1.背景介紹
今天給大家講的是angular的依賴注入，首先，我們要介紹一下什么是依賴注入
依賴注入，我們打個(gè)比喻，以前原始社會(huì)，我們需要斧子，然后由于還沒有社會(huì)分工，只能自己打磨一把來使用，對應(yīng)在程序上是我們需要一個(gè)功能的時(shí)候只能自己創(chuàng)建，然后使用new等關(guān)鍵字來調(diào)用方法。
然后工業(yè)社會(huì)階段，我們需要使用斧子的時(shí)候，只需要找到工廠，購買斧子就可以使用，共產(chǎn)主義社會(huì)，需要斧子的時(shí)候甚至不需要購買，直接坐等社會(huì)提供。
依賴注入的意思就是我們需要的東西不是我們自己創(chuàng)建的，而是第三方提供的，我們只需要引用就可以使用了。
不需要的時(shí)候就不引用它。
依賴注入的優(yōu)點(diǎn)：不用自己去管理眾多對象，代碼耦合性低，方便開發(fā)；便于維護(hù)，便于模塊化測試。
2.知識剖析
依賴注入的原理：程序運(yùn)行過程中，如需另一個(gè)對象協(xié)作(調(diào)用它的方法、訪問他的屬性)時(shí)，無須在代碼中創(chuàng)建被調(diào)用者，而是依賴于外部容器的注入， 調(diào)用者僅通過聲明某個(gè)組件就可以獲得組件的控制權(quán)，而對該組件的依賴關(guān)系管理、查找、加載由外部完成。
angular提供了幾種很好的依賴注入機(jī)制，以下5個(gè)核心組件用來作為依賴注入
value、factory、service、provider、constant、
值工廠 ? ????? 服務(wù)提供者 ????? ?常值
值是簡單的JavaScript對象，它是用來將值傳遞過程中的配置相位控制器。
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
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)一個(gè)服務(wù)或控制器需要。它通常使用一個(gè)工廠函數(shù)來計(jì)算并返回對應(yīng)值
var mainApp = angular.module("mainApp", []);
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);
}
});
提供者所使用的AngularJS內(nèi)部創(chuàng)建過程中配置階段的服務(wù)，工廠等(相AngularJS引導(dǎo)自身期間)。下面提到的腳本，可以用來創(chuàng)建，我們已經(jīng)在前面創(chuàng)建MathService。提供者是一個(gè)特殊的工廠方法以及get()方法，用來返回值/服務(wù)/工廠。
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;
};
});
});
服務(wù)是一個(gè)單一的JavaScript包含了一組函數(shù)對象來執(zhí)行某些任務(wù)。服務(wù)使用service()函數(shù)，然后注入到控制器的定義。
var mainApp = angular.module("mainApp", []);
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);
}
});
3.常見問題
a、依賴注入的幾種方法如何使用
b、angular依賴注入的時(shí)候，controller里面注入的參數(shù)和function的參數(shù)列表順序問題。
4.解決方案
a 依賴注入有三種方式進(jìn)行注入：推斷式注入聲明，顯式注入聲明，行內(nèi)注入聲明：
推斷式注入聲明
如果沒有明確的聲明， AngularJS會(huì)假定參數(shù)名稱就是依賴的名稱。請注意，這個(gè)過程只適用于未經(jīng)過壓縮和混淆的代碼，因?yàn)锳ngularJS需要原始未經(jīng)壓縮的參數(shù)列表來進(jìn)行解析。當(dāng)AngularJS實(shí)例化這個(gè)模塊時(shí)，會(huì)查找greeter并自然而然地把對它的引用傳遞進(jìn)去.
顯式注入聲明
AngularJS提供了顯式的方法來明確定義一個(gè)函數(shù)在被調(diào)用時(shí)需要用到的依賴關(guān)系。通過這種方法聲明依賴，即使在源代碼被壓縮、參數(shù)名稱發(fā)生改變的情況下依然能夠正常工作。我們給我們的函數(shù)設(shè)置的參數(shù)名稱分別是renamed$scope和renamedGreeter，然后我們在后面使用
MyController.$inject=['$scope','greeter'];
顯式的將我們需要的依賴注入到MyController函數(shù)中；
所以在MyController函數(shù)中，renamedscope代表scope,MyController.inject=[′scope’, ‘greeter’];代表greeter
行內(nèi)注入聲明
AngularJS提供的注入聲明的最后一種方式，是可以隨時(shí)使用的行內(nèi)注入聲明。允許我們在函數(shù)定義時(shí)從行內(nèi)將參數(shù)傳入。此外，它可以避免在定義過程中使用臨時(shí)變量。它同前面提到的通過$inject屬性進(jìn)行注入聲明的原理是完全一樣的
b：這里需要注意的是，行內(nèi)注入聲明的時(shí)候controller和function里面的參數(shù)列表的順序是一一對應(yīng)的，否則就會(huì)注入失敗，導(dǎo)致程序不執(zhí)行或者執(zhí)行失敗。并且沒有報(bào)錯(cuò)信息。所以在一開始就需要注意這里。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
Q：這些依賴組件的本質(zhì)是啥？
A：factory，service以及value全部都是用來定義一個(gè)provider的簡寫， 它們提供了一種方式來定義一個(gè)provider而無需輸入所有的復(fù)雜的代碼。
7.參考文獻(xiàn)
參考：詳解依賴注入 ? ? ? ?參考：理解依賴注入 ? ? ? ?參考：深究依賴注入
8.更多討論
AngularJS中的依賴注入組件的應(yīng)用場景？
