AngularJS 依賴注入詳解及示例代碼

2019-11-20 09:13:10

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

依賴注入是一個在組件中給出的替代了硬的組件內(nèi)的編碼它們的依賴關(guān)系的軟件設(shè)計模式。這減輕一個組成部分，從定位的依賴，依賴配置。這有助于使組件可重用，維護和測試。

AngularJS提供了一個至高無上的依賴注入機制。它提供了一個可注入彼此依賴下列核心組件。

值

工廠

服務(wù)

提供者

常值

值

值是簡單的JavaScript對象，它是用來將值傳遞過程中的配置相位控制器。

//define a modulevar mainApp = angular.module("mainApp", []);//create a value object as "defaultInput" and pass it a data.mainApp.value("defaultInput", 5);...//inject the value in the controller using its name "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);  }});

工廠

工廠是用于返回函數(shù)的值。它根據(jù)需求創(chuàng)造值，每當一個服務(wù)或控制器需要。它通常使用一個工廠函數(shù)來計算并返回對應(yīng)值

//define a modulevar mainApp = angular.module("mainApp", []);//create a factory "MathService" which provides a method multiply to return multiplication of two numbersmainApp.factory('MathService', function() {     var factory = {};   factory.multiply = function(a, b) {   return a * b   }  return factory;}); //inject the factory "MathService" in a service to utilize the multiply method of factory.mainApp.service('CalcService', function(MathService){   this.square = function(a) {    return MathService.multiply(a,a);   }});...

服務(wù)

服務(wù)是一個單一的JavaScript包含了一組函數(shù)對象來執(zhí)行某些任務(wù)。服務(wù)使用service()函數(shù)，然后注入到控制器的定義。

//define a modulevar mainApp = angular.module("mainApp", []);...//create a service which defines a method square to return square of a number.mainApp.service('CalcService', function(MathService){   this.square = function(a) {    return MathService.multiply(a,a);   }});//inject the service "CalcService" into the controllermainApp.controller('CalcController', function($scope, CalcService, defaultInput) {   $scope.number = defaultInput;   $scope.result = CalcService.square($scope.number);   $scope.square = function() {   $scope.result = CalcService.square($scope.number);  }});

提供者

提供者所使用的AngularJS內(nèi)部創(chuàng)建過程中配置階段的服務(wù)，工廠等(相AngularJS引導(dǎo)自身期間)。下面提到的腳本，可以用來創(chuàng)建，我們已經(jīng)在前面創(chuàng)建MathService。提供者是一個特殊的工廠方法以及get()方法，用來返回值/服務(wù)/工廠。

//define a modulevar mainApp = angular.module("mainApp", []);...//create a service using provider which defines a method square to return square of a number.mainApp.config(function($provide) {  $provide.provider('MathService', function() {   this.$get = function() {     var factory = {};      factory.multiply = function(a, b) {      return a * b;      }     return factory;   };  });});

常量

常量用于通過配置相位值考慮事實，值不能使用期間的配置階段被傳遞。

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

例子

下面的例子將展示上述所有指令。

testAngularJS.html

<html><head>  <title>AngularJS Dependency Injection</title></head><body>  <h2>AngularJS Sample Application</h2>  <div ng-app="mainApp" ng-controller="CalcController">   <p>Enter a number: <input type="number" ng-model="number" />   <button ng-click="square()">X<sup>2</sup></button>   <p>Result: {{result}}</p>  </div>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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é)果

在Web瀏覽器打開textAngularJS.html。看到結(jié)果如下。