AngularJS - Dịch vụ

AngularJS hỗ trợ khái niệm Tách các mối quan tâm bằng kiến trúc dịch vụ. Dịch vụ là các hàm JavaScript, có nhiệm vụ chỉ thực hiện các tác vụ cụ thể. Điều này làm cho chúng trở thành các thực thể riêng lẻ có thể bảo trì và kiểm tra được. Bộ điều khiển và bộ lọc có thể gọi chúng theo yêu cầu. Dịch vụ thường được tiêm bằng cơ chế tiêm phụ thuộc của AngularJS.

AngularJS cung cấp nhiều dịch vụ sẵn có. Ví dụ: $ http, $ route, $ window, $ location, v.v. Mỗi dịch vụ chịu trách nhiệm cho một nhiệm vụ cụ thể chẳng hạn như $ http được sử dụng để thực hiện lệnh gọi ajax để lấy dữ liệu máy chủ, $ route được sử dụng để xác định thông tin định tuyến, v.v. Các dịch vụ có sẵn luôn có tiền tố là biểu tượng $.

Có hai cách để tạo một dịch vụ -

Factory
Service

Sử dụng phương pháp nhà máy

Trong phương pháp này, đầu tiên chúng ta xác định một nhà máy và sau đó gán phương thức cho nó.

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   
   return factory;
});

Sử dụng phương thức dịch vụ

Trong phương thức này, chúng tôi xác định một dịch vụ và sau đó gán phương thức cho nó. Chúng tôi cũng đưa vào một dịch vụ đã có sẵn cho nó.

mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});

Thí dụ

Ví dụ sau cho thấy việc sử dụng tất cả các lệnh được đề cập ở trên -

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Services</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>Enter a number: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>Result: {{result}}</p>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.factory('MathService', function() {
            var factory = {};
            
            factory.multiply = function(a, b) {
               return a * b
            }
            return factory;
         });
         mainApp.service('CalcService', function(MathService) {
            this.square = function(a) {
               return MathService.multiply(a,a);
            }
         });
         mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

Đầu ra

Mở tệp testAngularJS.htm trong trình duyệt web và xem kết quả.