AngularJS 依賴注入

依賴注入是一種軟件設計，其中為組件提供了相關(guān)性，而不是在組件中對其進行硬編碼。它使組件不必查找依賴關(guān)系，并使依賴關(guān)系可配置。它還有助于使組件可重用，可維護和可測試。

AngularJS提供了一種最高的依賴注入機制。它提供了以下核心組件，它們可以作為依賴項相互注入。

Value
Factory
Service
Provider
Constant

Value - 值

Value 是一個簡單的JavaScript對象，在配置階段（配置階段是AngularJS引導自身時），需要將值傳遞給控制器。

//定義模塊
var mainApp = angular.module("mainApp", []);

//創(chuàng)建一個值對象作為“ defaultInput”并向其傳遞數(shù)據(jù)。"defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...

//使用名稱“ defaultInput”將值注入控制器"defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

Factory - 工廠

Factory 是用于返回值的函數(shù)。每當服務或控制器需要時，它都會按需創(chuàng)建值。它通常使用Factory函數(shù)來計算并返回值。

//定義模塊
var mainApp = angular.module("mainApp", []);

//創(chuàng)建一個工廠“MathService”，它提供一個乘法方法來返回兩個數(shù)字的乘法
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

//在服務中注入工廠“MathService”以利用factory的乘法方法。
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

Service - 服務

服務(Service)是一個單例JavaScript對象，其中包含一組執(zhí)行某些任務的功能。使用service()方法定義服務，然后將其注入到控制器中。

//定義模塊
var mainApp = angular.module("mainApp", []);
...

//創(chuàng)建一個服務，該服務定義方法平方以返回數(shù)字的平方。
mainApp.service('CalcService', function(MathService) {
   this.square = function(a) {
      return MathService.multiply(a,a); 
   }
});

//將服務“ CalcService”注入控制器"CalcService"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);
   
   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

Provider

AngularJS內(nèi)部使用提供程序在配置階段創(chuàng)建服務，工廠等。以下腳本可用于創(chuàng)建我們之前創(chuàng)建的MathService。Provider是一種特殊的工廠方法，其get()方法用于返回value/service/factory。

//定義模塊
var mainApp = angular.module("mainApp", []);
...

//使用提供程序創(chuàng)建服務，該提供程序定義一個方法平方以返回數(shù)字的平方。
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

Constant - 常量

考慮到在配置階段無法使用值的事實，常量用于在配置階段傳遞值。

mainApp.constant("configParam", "constant value");

在線示例

以下示例顯示了所有上述指令的使用-

testAngularJS.htm

示例

<html>
   <head>
      <title>AngularJS Dependency Injection</title>
   </head>
   
   <body>
      <h2>AngularJS-依賴注入應用示例</h2>
      
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>輸入一個數(shù)字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup>2</sup></button>
         <p>結(jié)果: {{result}}</p>
      </div>
      
      <script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.config(function($provide) {
            $provide.provider('MathService', function() {
               this.$get = function() {
                  var factory = {};
                  
                  factory.multiply = function(a, b) {
                     return a * b;
                  }
                  return factory;
               };
            });
         });
			
         mainApp.value("defaultInput", 5);
         
         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, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
               $scope.result = CalcService.square($scope.number);
            }
         });
      </script>
      
   </body>
</html>

測試看看?/?

輸出結(jié)果

圖片.png

也可以在網(wǎng)絡瀏覽器中打開testAngularJS.htm并查看結(jié)果。

AngularJS 自定義指令 AngularJS 服務(Service)

AngularJS 基礎(chǔ)教程