詳解AngularJS中的依賴注入機(jī)制
依賴注入是一個在組件中給出的替代了硬的組件內(nèi)的編碼它們的依賴關(guān)系的軟件設(shè)計模式。這減輕一個組成部分,從定位的依賴,依賴配置。這有助于使組件可重用,維護(hù)和測試。
AngularJS提供了一個至高無上的依賴注入機(jī)制。它提供了一個可注入彼此依賴下列核心組件。
- 值
- 工廠
- 服務(wù)
- 提供者
- 常值
值
值是簡單的JavaScript對象,它是用來將值傳遞過程中的配置相位控制器。
//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); } });
工廠
工廠是用于返回函數(shù)的值。它根據(jù)需求創(chuàng)造值,每當(dāng)一個服務(wù)或控制器需要。它通常使用一個工廠函數(shù)來計算并返回對應(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ù)是一個單一的JavaScript包含了一組函數(shù)對象來執(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)建過程中配置階段的服務(wù),工廠等(相AngularJS引導(dǎo)自身期間)。下面提到的腳本,可以用來創(chuàng)建,我們已經(jīng)在前面創(chuàng)建MathService。提供者是一個特殊的工廠方法以及get()方法,用來返回值/服務(wù)/工廠。
//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; }; }); });
常量
常量用于通過配置相位值考慮事實(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瀏覽器打開textAngularJS.html??吹浇Y(jié)果如下。
相關(guān)文章
angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼
本篇文章主要介紹了angularJS利用ng-repeat遍歷二維數(shù)組的實(shí)例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06淺析angularJS中的ui-router和ng-grid模塊
下面小編就為大家?guī)硪黄獪\析angularJS中的ui-router和ng-grid模塊。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧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)的購物金額計算工具示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)的購物金額計算工具,涉及AngularJS事件監(jiān)聽、數(shù)值計算相關(guān)操作技巧,需要的朋友可以參考下2018-05-05angularjs實(shí)現(xiàn)Tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)Tab欄切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03Angular之toDoList的實(shí)現(xiàn)代碼示例
本篇文章主要介紹了Angular之toDoList的實(shí)現(xiàn)代碼示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12