詳解AngularJS中的依賴(lài)注入機(jī)制
依賴(lài)注入是一個(gè)在組件中給出的替代了硬的組件內(nèi)的編碼它們的依賴(lài)關(guān)系的軟件設(shè)計(jì)模式。這減輕一個(gè)組成部分,從定位的依賴(lài),依賴(lài)配置。這有助于使組件可重用,維護(hù)和測(cè)試。
AngularJS提供了一個(gè)至高無(wú)上的依賴(lài)注入機(jī)制。它提供了一個(gè)可注入彼此依賴(lài)下列核心組件。
- 值
- 工廠(chǎng)
- 服務(wù)
- 提供者
- 常值
值
值是簡(jiǎn)單的JavaScript對(duì)象,它是用來(lái)將值傳遞過(guò)程中的配置相位控制器。
//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); } });
工廠(chǎng)
工廠(chǎng)是用于返回函數(shù)的值。它根據(jù)需求創(chuàng)造值,每當(dāng)一個(gè)服務(wù)或控制器需要。它通常使用一個(gè)工廠(chǎng)函數(shù)來(lái)計(jì)算并返回對(duì)應(yīng)值
//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); } }); ...
服務(wù)
服務(wù)是一個(gè)單一的JavaScript包含了一組函數(shù)對(duì)象來(lái)執(zhí)行某些任務(wù)。服務(wù)使用service()函數(shù),然后注入到控制器的定義。
//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內(nèi)部創(chuàng)建過(guò)程中配置階段的服務(wù),工廠(chǎng)等(相AngularJS引導(dǎo)自身期間)。下面提到的腳本,可以用來(lái)創(chuàng)建,我們已經(jīng)在前面創(chuàng)建MathService。提供者是一個(gè)特殊的工廠(chǎng)方法以及get()方法,用來(lái)返回值/服務(wù)/工廠(chǎng)。
//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; }; }); });
常量
常量用于通過(guò)配置相位值考慮事實(shí),值不能使用期間的配置階段被傳遞。
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瀏覽器打開(kāi)textAngularJS.html??吹浇Y(jié)果如下。
相關(guān)文章
詳解AngularJS 模態(tài)對(duì)話(huà)框
在涉及GUI程序開(kāi)發(fā)的過(guò)程中,常常有模態(tài)對(duì)話(huà)框以及非模態(tài)對(duì)話(huà)框的概念。接下來(lái)通過(guò)本文給大家介紹AngularJS 模態(tài)對(duì)話(huà)框 ,感興趣的朋友一起學(xué)習(xí)吧2016-04-04angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)?lái)一篇淺析angularJS中的ui-router和ng-grid模塊。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05AngularJS教程之MVC體系結(jié)構(gòu)詳解
本文主要講解AngularJS MVC體系結(jié)構(gòu),這里提供詳細(xì)的教程供大家學(xué)習(xí)參考,有需要的小伙伴可以參考下2016-08-08Angular重構(gòu)數(shù)組字段的解決方法示例
這篇文章主要為大家介紹了Angular重構(gòu)數(shù)組字段的解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)的購(gòu)物金額計(jì)算工具,涉及AngularJS事件監(jiān)聽(tīng)、數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2018-05-05動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法
本篇文章主要介紹了動(dòng)手寫(xiě)一個(gè)angular版本的Message組件的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Angular之toDoList的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12