Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Viết 1 function sử dụng cho toàn bộ app
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.







