最近在看AngularJS權威指南，由于各種各樣的原因（主要是因為我沒有money，好討厭的有木有......），于是我選擇了網(wǎng)上下載電子版的（因為它不要錢，哈哈...），字體也蠻清晰的，總體效果還不錯。但是，當我看到左上角的總頁碼的時候，479頁....479....479....俺的小心臟被擊穿了二分之一有木有啊，上半身都石化了有木有啊，那種特別想學但是看到頁碼又不想學的糾結(jié)的心情比和女朋友吵架了還復雜有木有啊，我平?？吹碾娮訒傥粩?shù)都不大于3的好伐！ 哎，原諒我吧，我應該多看幾本新華字典習慣習慣的...

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

=======================================請叫我華麗的分割線=======================================

一個對象通常有三種方式可以獲得對其依賴的控制權：

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

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

  在運行時修改依賴關系的能力對測試來講是非常理想的，因為它允許我們創(chuàng)建一個隔離的環(huán)境，從而在測試環(huán)境可以使用模擬的對象取代生產(chǎn)環(huán)境中的真實對象。

 從功能上看，依賴注入會事先自動查找依賴關系，并將注入目標告知被依賴的資源，這樣就可以在目標需要時立即將資源注入進去。

 在編寫依賴于其他對象或庫的組件時，我們需要描述組件之間的依賴關系。在運行期，注入器會創(chuàng)建依賴的實例，并負責將它傳遞給依賴的消費者。

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

SomeClass 能夠在運行時訪問到內(nèi)部的 greeter ，但它并不關心如何獲得對 greeter 的引用。為了獲得對 greeter 實例的引用， SomeClass 的創(chuàng)建者會負責構造其依賴關系并傳遞進去。

基于以上原因，AngularJS使用 $injetor （注入器服務）來管理依賴關系的查詢和實例化。事實上， $injetor 負責實例化AngularJS中所有的組件，包括應用的模塊、指令和控制器等。

在運行時，任何模塊啟動時 $injetor 都會負責實例化，并將其需要的所有依賴傳遞進去。

例如下面這段代碼。這是一個簡單的應用，聲明了一個模塊和一個控制器：

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

當AngularJS實例化這個模塊時，會查找 greeter 并自然而然地把對它的引用傳遞進去：

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

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

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

上面的代碼中并沒有說明是如何找到 greeter 的，但是它的確能正常工作，因為 $injector會負責為我們查找并加載它。

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

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

在任何一個AngularJS的應用中，都有 $injector 在進行工作，無論我們知道與否。當編寫控制器時，如果沒有使用 [] 標記或進行顯式的聲明， $injector 就會嘗試通過參數(shù)名推斷依賴關系。

推斷式注入聲明 

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

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

請注意，這個過程只適用于未經(jīng)過壓縮和混淆的代碼，因為AngularJS需要原始未經(jīng)壓縮的參數(shù)列表來進行解析。有了這個根據(jù)參數(shù)名稱進行推斷的過程，參數(shù)順序就沒有什么重要的意義了，因為AngularJS會幫助我們把屬性以正確的順序注入進去。

顯式注入聲明

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

下面是示例代碼：

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

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

行內(nèi)注入聲明

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

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

示例如下：

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

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

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

最新評論