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

AngularJS

31

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.