詳解AngularJS中的依賴注入機制

來源:互聯網
上載者:User

   這篇文章主要介紹了詳解AngularJS中的依賴注入機制,對JavaScript各組件的使用起到非常重要的作用,需要的朋友可以參考下

  依賴注入是一個在組件中給出的替代了硬的組件內的編碼它們的依賴關係的軟體設計模式。這減輕一個組成部分,從定位的依賴,依賴配置。這有助於使組件可重用,維護和測試。

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

  值

  工廠

  服務

  提供者

  常值

  值

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

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 //define a module var 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); } });

  工廠

  工廠是用於返回函數的值。它根據需求創造值,每當一個服務或控制器需要。它通常使用一個工廠函數來計算並返回對應值

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //define a module var mainApp = angular.module("mainApp", []); //create a factory "MathService" which provides a method multiply to return multiplication of two numbers mainApp.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); } }); ...

  服務

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

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 //define a module var 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 controller 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); } });

  提供者

  提供者所使用的AngularJS內部建立過程中設定階段的服務,工廠等(相AngularJS引導自身期間)。下面提到的指令碼,可以用來建立,我們已經在前面建立MathService。提供者是一個特殊的Factory 方法以及get()方法,用來傳回值/服務/工廠。

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //define a module var 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; }; }); });

  常量

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

  ?

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

  例子

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

  testAngularJS.html

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <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>

  結果

  在Web瀏覽器開啟textAngularJS.html。看到結果如下。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。