Viết 1 function sử dụng cho toàn bộ app
AngularJS
23
White

My Mai viết ngày 27/05/2015

Khi các bạn viết sử dụng AngularJS có thấy thắc mắc về phần làm thế nào để mình viết 1 function mà có thể sử dụng cho toàn bộ app của mình không?
Ví dụ nha:
Bạn có 1chức năng tính tổng và chức năng này sử dụng cho toàn bộ app của bạn ( cụ thể là nó hiện hữu trong rất là nhiều page trong site của bạn) bạn sẽ chọn giải quyết vấn đề này như thế nào:

  • Cách 1: cứ mỗi controller thì mình sẽ viết 1 function riêng cho nó
  • Cách 2: sẽ define ra 1 directive để xử lý việc tính tổng này
  • Cách 3: sẽ define ra 1 function ở service để xử lý

Mình sẽ tập trung vào cách 3 và giải thích ngắn gọn tại sao mình không chọn cách 1, 2 dựa vào quan điểm của mình ( chỉ mình thôi nhé :P)
Cách 1: không được hay cho lắm vì nó ko tối ưu được code ( Cách này là cách chuối nhất mà lúc trước khi mới tiếp xúc với Angular mình thường làm :D)
Cách 2: Thường thì mình thấy nhiều người hay chọn cách này nhưng nó sẽ có những bất tiện sau đây:

  • Function này chỉ mang ý nghĩa về tính toán nên bạn cần xác định được scope ở đây hướng đến là gì? vì directive có đến 3 loại scope khác nhau mà
  • Bạn phải bind data vào nó như thế nào ( ví dụ data của bạn được cung cấp ở controller)
  • Nghĩ xa hơn tí nếu thực hiện xong function tính tổng, bạn cần kết quả đó để xử lý tiếp tục ở controller, bạn phải thực hiện thêm 1 bước tiếp theo nữa là broadcast data của mình đến controller, controller nhận được mới xử lý tiếp

    Directive này nó rất hay lần sau mình sẽ viết thêm 1 bài khác

Những nhược điểm của 2 cách trên thì ở cách 3 sẽ khắc phục được, nên mình trình bài cách viết luôn nha:

Ở service: define ra 1 function dùng chung cho toàn bộ app của bạn

angular.module('utilityApp')
  .factory('tinhtong',[ function () {
    return {
      sum: function (num1, num2) {
        num1 + num2;
      }
    };
  }]);

Ở controller: gọi function đó

angular.module('utilityApp')
  .controller('TinhtongCtrl', ['$scope','tinhtong', function ($rootScope, $scope,tinhtong) 
    {
      $scope.tong = function (num1, num2) {
        $scope.ketqua = tinhtong.sum(num1, num2);
      };
    }
  ]);

Đây là cách viết đơn giản để các bạn hiểu được cấu trúc code đơn giản. Nếu các bạn muốn xem ví dụ hoàn chỉnh thì có thể xem ở đây: https://github.com/mymai91/angular-utility-app xem demo draw-chart ấy nha.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

My Mai

33 bài viết.
177 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
21 8
Lotus là gì? (Link) là một Ruby Web Framework mới với chú trọng vào cấu trúc tách rời với thiết kế đơn giản và dễ hiểu. Hiện tại thì Lotus vừa re...
My Mai viết 3 năm trước
21 8
White
19 21
Bạn muốn load 3 image khác nhau (Ý mình ở đây là dùng tag không phải background nhé) cho 3 loại màn hình khác nhau (small, medium, large). Bạn sẽ l...
My Mai viết 3 năm trước
19 21
White
19 9
Tham gia cộng đồng Thoáng đó cũng đã 2 năm từ lúc tớ tham gia cộng đồng Ruby Việt Nam. Giờ ngồi ngẫm lại được gì và mất gì :v Thật thì chẳng mất...
My Mai viết gần 2 năm trước
19 9
Bài viết liên quan
White
7 2
1. Giới thiệu: Lovefield, một relational database được viết hoàn toàn bởi JavaScript & được phát triển bởi Google. Cung cấp cú pháp truy vấn tư...
Cùi Bắp viết hơn 2 năm trước
7 2
White
19 4
Tạo ứng dụng chat với 50 dòng code, Firebase và AngularJS Từ lúc viết blog tới giờ, mình chưa có bài nào hướng dẫn các bạn tạo ra một sản phẩm từ ...
Huy Hoàng Phạm viết hơn 2 năm trước
19 4
White
12 16
Có bao giờ bạn có suy nghĩ là sẽ cho ra đời 1 sản phẩm app sử dụng những ngôn ngữ của web (HTML, CSS, JS) chưa. Dùng ngôn ngữ của web để xây dựng ...
My Mai viết hơn 3 năm trước
12 16
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
33 bài viết.
177 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!