最近在看AngularJS權(quán)威指南，由于各種各樣的原因（主要是因?yàn)槲覜](méi)有money，好討厭的有木有......），于是我選擇了網(wǎng)上下載電子版的（因?yàn)樗灰X，哈哈...），字體也蠻清晰的，總體效果還不錯(cuò)。但是，當(dāng)我看到左上角的總頁(yè)碼的時(shí)候，479頁(yè)....479....479....俺的小心臟被擊穿了二分之一有木有啊，上半身都石化了有木有啊，那種特別想學(xué)但是看到頁(yè)碼又不想學(xué)的糾結(jié)的心情比和女朋友吵架了還復(fù)雜有木有啊，我平?？吹碾娮訒?shū)百位數(shù)都不大于3的好伐！ 哎，原諒我吧，我應(yīng)該多看幾本新華字典習(xí)慣習(xí)慣的...

不過(guò)幸好在看電子書(shū)之前，我已經(jīng)稍微有點(diǎn)基礎(chǔ)了，之前看著視頻學(xué)習(xí)了一些，從雙向數(shù)據(jù)綁定到服務(wù)，然后到指令系統(tǒng)，都多多少少有些接觸。并且在一次web專選課結(jié)課作業(yè)當(dāng)中，通過(guò)前端的AngularJS和后臺(tái)的NodeJS加Mongoose搭建了一個(gè)簡(jiǎn)易學(xué)生班級(jí)管理系統(tǒng)。因?yàn)闆](méi)有錢，所以只能放在GitHub了，GitHub地址: 學(xué)生管理系統(tǒng)，歡迎來(lái)fork哈，下面進(jìn)入正題...

=======================================請(qǐng)叫我華麗的分割線=======================================

一個(gè)對(duì)象通常有三種方式可以獲得對(duì)其依賴的控制權(quán)：

  (1) 在內(nèi)部創(chuàng)建依賴；
  (2) 通過(guò)全局變量進(jìn)行引用；
  (3) 在需要的地方通過(guò)參數(shù)進(jìn)行傳遞。

依賴注入是通過(guò)第三種方式實(shí)現(xiàn)的。其余兩種方式會(huì)帶來(lái)各種問(wèn)題，例如污染全局作用域，使隔離變得異常困難等。依賴注入是一種設(shè)計(jì)模式，它可以去除對(duì)依賴關(guān)系的硬編碼，從而可以在運(yùn)行時(shí)改變甚至移除依賴關(guān)系。

  在運(yùn)行時(shí)修改依賴關(guān)系的能力對(duì)測(cè)試來(lái)講是非常理想的，因?yàn)樗试S我們創(chuàng)建一個(gè)隔離的環(huán)境，從而在測(cè)試環(huán)境可以使用模擬的對(duì)象取代生產(chǎn)環(huán)境中的真實(shí)對(duì)象。

 從功能上看，依賴注入會(huì)事先自動(dòng)查找依賴關(guān)系，并將注入目標(biāo)告知被依賴的資源，這樣就可以在目標(biāo)需要時(shí)立即將資源注入進(jìn)去。

 在編寫依賴于其他對(duì)象或庫(kù)的組件時(shí)，我們需要描述組件之間的依賴關(guān)系。在運(yùn)行期，注入器會(huì)創(chuàng)建依賴的實(shí)例，并負(fù)責(zé)將它傳遞給依賴的消費(fèi)者。

// 出自Angular文檔的優(yōu)秀示例
function SomeClass(greeter) {
this.greeter = greeter;
}
SomeClass.prototype.greetName = function(name) {
this.greeter.greet(name);
};
//注意，示例代碼在全局作用域上創(chuàng)建了一個(gè)控制器，這并不是一個(gè)好主意，這里只是為了方便演示。

SomeClass 能夠在運(yùn)行時(shí)訪問(wèn)到內(nèi)部的 greeter ，但它并不關(guān)心如何獲得對(duì) greeter 的引用。為了獲得對(duì) greeter 實(shí)例的引用， SomeClass 的創(chuàng)建者會(huì)負(fù)責(zé)構(gòu)造其依賴關(guān)系并傳遞進(jìn)去。

基于以上原因，AngularJS使用 $injetor （注入器服務(wù)）來(lái)管理依賴關(guān)系的查詢和實(shí)例化。事實(shí)上， $injetor 負(fù)責(zé)實(shí)例化AngularJS中所有的組件，包括應(yīng)用的模塊、指令和控制器等。

在運(yùn)行時(shí)，任何模塊啟動(dòng)時(shí) $injetor 都會(huì)負(fù)責(zé)實(shí)例化，并將其需要的所有依賴傳遞進(jìn)去。

例如下面這段代碼。這是一個(gè)簡(jiǎn)單的應(yīng)用，聲明了一個(gè)模塊和一個(gè)控制器：

angular.module('myApp', [])
.factory('greeter', function() {
return {
greet: function(msg) {alert(msg);}
}
})
.controller('MyController',
function($scope, greeter) {
$scope.sayHello = function() {
greeter.greet("Hello!");
};
});

當(dāng)AngularJS實(shí)例化這個(gè)模塊時(shí)，會(huì)查找 greeter 并自然而然地把對(duì)它的引用傳遞進(jìn)去：

<div ng-app="myApp">
<div ng-controller="MyController">
<button ng-click="sayHello()">Hello</button>
</div>
</div>

而在內(nèi)部，AngularJS的處理過(guò)程是下面這樣的：

// 使用注入器加載應(yīng)用
var injector = angular.injector(['ng', 'myApp']);
// 通過(guò)注入器加載$controller服務(wù)
var $controller = injector.get('$controller');
// 加載控制器并傳入一個(gè)作用域，同AngularJS在運(yùn)行時(shí)做的一樣
var scope = injector.get('$rootScope').$new();
var MyController = $controller('MyController', {$scope: scope});

上面的代碼中并沒(méi)有說(shuō)明是如何找到 greeter 的，但是它的確能正常工作，因?yàn)?$injector會(huì)負(fù)責(zé)為我們查找并加載它。

AngularJS通過(guò) annotate 函數(shù)，在實(shí)例化時(shí)從傳入的函數(shù)中把參數(shù)列表提取出來(lái)。在Chrome的開(kāi)發(fā)者工具中輸入下面的代碼可以查看這個(gè)函數(shù)：

> injector.annotate(function($q, greeter) {})
 ["$q", "greeter"]

在任何一個(gè)AngularJS的應(yīng)用中，都有 $injector 在進(jìn)行工作，無(wú)論我們知道與否。當(dāng)編寫控制器時(shí)，如果沒(méi)有使用 [] 標(biāo)記或進(jìn)行顯式的聲明， $injector 就會(huì)嘗試通過(guò)參數(shù)名推斷依賴關(guān)系。

推斷式注入聲明 

如果沒(méi)有明確的聲明，AngularJS會(huì)假定參數(shù)名稱就是依賴的名稱。因此，它會(huì)在內(nèi)部調(diào)用函數(shù)對(duì)象的 toString() 方法，分析并提取出函數(shù)參數(shù)列表，然后通過(guò) $injector 將這些參數(shù)注入進(jìn)對(duì)象實(shí)例。注入的過(guò)程如下：

injector.invoke(function($http, greeter) {});

請(qǐng)注意，這個(gè)過(guò)程只適用于未經(jīng)過(guò)壓縮和混淆的代碼，因?yàn)锳ngularJS需要原始未經(jīng)壓縮的參數(shù)列表來(lái)進(jìn)行解析。有了這個(gè)根據(jù)參數(shù)名稱進(jìn)行推斷的過(guò)程，參數(shù)順序就沒(méi)有什么重要的意義了，因?yàn)锳ngularJS會(huì)幫助我們把屬性以正確的順序注入進(jìn)去。

顯式注入聲明

AngularJS提供了顯式的方法來(lái)明確定義一個(gè)函數(shù)在被調(diào)用時(shí)需要用到的依賴關(guān)系。通過(guò)這種方法聲明依賴，即使在源代碼被壓縮、參數(shù)名稱發(fā)生改變的情況下依然能夠正常工作?？梢酝ㄟ^(guò)$inject 屬性來(lái)實(shí)現(xiàn)顯式注入聲明的功能。函數(shù)對(duì)象的 $inject 屬性是一個(gè)數(shù)組，數(shù)組元素的類型是字符串，它們的值就是需要被注入的服務(wù)的名稱。

下面是示例代碼：

var aControllerFactory =
function aController($scope, greeter) {
console.log("LOADED controller", greeter);
// ……控制器
};
aControllerFactory.$inject = ['$scope', 'greeter']; // Greeter服務(wù)
console.log("greeter service");
}
// 我們應(yīng)用的控制器
angular.module('myApp', [])
.controller('MyController', aControllerFactory)
.factory('greeter', greeterService);
// 獲取注入器并創(chuàng)建一個(gè)新的作用域
var injector = angular.injector(['ng', 'myApp']),
controller = injector.get('$controller'),
rootScope = injector.get('$rootScope'),
newScope = rootScope.$new();
// 調(diào)用控制器
controller('MyController', {$scope: newScope});

對(duì)于這種聲明方式來(lái)講，參數(shù)順序是非常重要的，因?yàn)?$inject 數(shù)組元素的順序必須和注入?yún)?shù)的順序一一對(duì)應(yīng)。這種聲明方式可以在壓縮后的代碼中運(yùn)行，因?yàn)槁暶鞯南嚓P(guān)信息已經(jīng)和函數(shù)本身綁定在一起了。

行內(nèi)注入聲明

AngularJS提供的注入聲明的最后一種方式，是可以隨時(shí)使用的行內(nèi)注入聲明。這種方式其實(shí)是一個(gè)語(yǔ)法糖，它同前面提到的通過(guò) $inject 屬性進(jìn)行注入聲明的原理是完全一樣的，但允許我們?cè)诤瘮?shù)定義時(shí)從行內(nèi)將參數(shù)傳入。此外，它可以避免在定義過(guò)程中使用臨時(shí)變量。

在定義一個(gè)AngularJS的對(duì)象時(shí)，行內(nèi)聲明的方式允許我們直接傳入一個(gè)參數(shù)數(shù)組而不是一個(gè)函數(shù)。數(shù)組的元素是字符串，它們代表的是可以被注入到對(duì)象中的依賴的名字，最后一個(gè)參數(shù)就是依賴注入的目標(biāo)函數(shù)對(duì)象本身。

示例如下：

angular.module('myApp')
.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
}]);

由于需要處理的是一個(gè)字符串組成的列表，行內(nèi)注入聲明也可以在壓縮后的代碼中正常運(yùn)行。通常通過(guò)括號(hào)和聲明數(shù)組的 [] 符號(hào)來(lái)使用它。

以上這篇AngularJS 依賴注入就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論