Cách Tạo service bằng Factory với các tham số

Trước hết chúng ta cần biết service trong AngularJS là gì? Service trong AngularJS là một object hoặc một function được viết để xử lý một công viêc nào đó trong ứng dụng của chúng ta. Trong AngularJS có sẵn một sô service sẵn có để giúp chúng ta viết các chức năng cho ứng dụng ví dụ như:

• $q
• $animate
• $cacheFactory
• $timeout
• $controller
• $document
• $exceptionHandler
• $filter
• $http
• $httpBackend
• ...

Ngoài ra chúng ta cũng có thể tự viết service mới cho ưng dụng chúng ta đang phát triển nếu thấy cần thiêt. Và trong phần này chúng ta sẽ sử dụng Factory để tạo một service mới với những tham số truyền vào. Với việc sử dụng factory chúng ta có thể dễ dàng inject một funtion vào trong code AngularJS, để tùy chỉnh một đối tượng đang sử dụng. Điều này rất tiện lợi vì nó tạo ra một đối tượng cụ thể với một công việc cụ thể, giúp cho việc bảo trì dễ dàng hơn. Và để hiểu rõ hơn về Factory, chúng ta cũng tìm hiểu ví dụ sau: Chúng ta có một directive sử dụng một factory để lấy thông tin giá sách trong DB.

angular.directive('bookShow',['BookFactory',function(BookFactory) {
     return {
        link: function($scope, $el, $attr) {
             var book = BookFactory('/api/books',$scope.book_id);
             book.price(function(value){
                $scope.price = value;
             });
        }
     }
}]);

ở trên Factory BookFactory đã được inject vào trong directive bởi angularJS . BookFactory được dùng tạo một object book với 2 tham sổ, tham sô đầu tiên là đường dẫn API, tham số thứ 2 là book_id. Với cách viết ở trên, chúng ta rất dễ đọc và hiểu được funtion sẽ làm những công việc gì, nhưng nó cũng có thể trở lên khó hiểu hơn làm thế nào để tạo ra một service để sử dụng theo cách đó.

service BookFactory chúng ta sẽ khai báo như sau:

angular.factory('InventoryFactory',[
   '$http',
   /** Khai báo tên phương thức của service **/
   function BookFactory($http) {
       /** chức năng sẽ được sử dụng trong js với các tham số được truyền vào **/
       return function(url, book_id) {
           /** Đối tượng được tạo ra và sẽ được sử dụng **/
           return new Book($http, url, book_id);
       };
   }]);

Trong service trên chúng ta đã viết code qua 3 giai đoạn là khai báo, thực thi lấy giá trị và trả về giá trị của service. Từ đó chúng ta có thể hiểu như sau:

• AngularJS sẽ chỉ thực hiện các chức năng trong factory một lần và lưu nó vào trong cache và điều này sẽ gây khó hiểu khi chúng ta không nắm rõ về factory.
• Factory có thể trả về bất kì giá trị gì mà chúng ta muốn, và đây là sự khác biệt chính giữa các factory và các service. Giá trị trả về có thể là một chuỗi các ký tự hay một object hoặc một funtion. Giá trị trả về sẽ được lưu trong cache và inject. Và trong ví dụ trên BookFatory sẽ trả về một funtion.
• Các đối tượng sẽ được tạo funtion, các thông tin của đối tượng sẽ phụ thuộc vào các tham sổ được truyền vào funtion. Các đối tượng Book sẽ nhận được cả $http, url và book-id. Với việc sử dụng Factory, chúng ta không cần lo lắng về $http vì Factory đảm bảo chúng cho chúng ta.

Việc tiếp theo là chúng ta khai báo đối tượng Book sẽ được sử dụng trong BookFactory ở trên:

function Book($http, url, project_id) {
     this.price = function(callback) {
          $http.get(url+"?project="+book_id)
                .success(function(value) {
                   callback(value);
                });
     };
};

Trong đối tượng này chúng ta sẽ khai báo thuộc tính price mà chúng ta muôn lấy khi sử dụng BookFactory service.

Cuối cùng là chúng ta khai bảo một directive để lấy và hiển thị price của book mà chúng ta muôn lấy

angular.directive('bookStatus',['BookFactory',function(BookFactory) {
    return {
       link: function($scope,$el,$attr) {
            var book = BookFactory('/api/projects',$scope.book_id);
            book.price(function(value){
               $scope.price = value;
            });
       }
    }
}]);