Angular依賴注入詳解

angular算是將後端開發工程化引入前端的先驅之一,而dependency injection依賴注入(後面簡稱為di)又是angular內部運作的核心功能，所以要深入理解angular有必要先理解這一核心概念。

維基百科對依賴注入的解釋

在軟體工程中，依賴注入是實現控制反轉的一種軟體設計模式，乙個依賴是乙個被其他物件(client)呼叫的物件（服務）,注入則是將被依賴的物件(service)例項傳遞給依賴物件(client)的行為。將被依賴的物件傳給依賴者，而不需要依賴者自己去建立或查詢所需物件是di的基本原則。依賴注入允許程式設計遵從依賴倒置原則（簡單的說就是要求對抽象進行程式設計，不要對實現進行程式設計，這樣就降低了客戶與實現模組間的耦合）呼叫者(client)只需知道服務的介面，具體服務的查詢和建立由注入者(injector)負責處理並提供給client，這樣就分離了服務和呼叫者的依賴，符合低耦合的程式設計原則。

依賴注入中的角色

從維基百科解釋可知, di中包含三個角色，呼叫者(client), 服務(service)和注入者 (injector)，下面開始介紹本文的主題 angular的依賴注入。

angular依賴注入分析

先看看下面這段 hello,world** （注意：設定了嚴格模式或壓縮混淆**後下面的**不能正常工作,後面有解釋）

.controller('ctl', function

($scope, $log) );

function
createinternalinjector(cache, factory) 
var args =,
//查詢依賴
$inject =createinjector.$$annotate(fn, strictdi, servicename),
length, i,
key;
//中間一段略去...
//遍歷$inject陣列呼叫getservice獲取服務....
//開始執行client , args則是依賴的全部服務,injector都為我們建立好了
return
}//中間一段略去...
//這裡返回公開的injector物件 
return
};}

原始碼中查詢依賴的原始碼如下：

function
annotate(fn, strictdi, name) 
throw $injectorminerr('strictdi',
' is not using explicit annotation...', name);
}//針對直接在建構函式中使用服務的情況
//使用function.tostring() 然後正則匹配出依賴的物件
//所以上面例子如果混淆了**就呵呵了
//最後存入$inject陣列
fntext = fn.tostring().replace(strip_comments, '');
argdecl =fntext.match(fn_args);
foreach(argdecl[1].split(fn_arg_split), function
(arg) );
});}
//給建構函式新增$inject屬性
fn.$inject =$inject;}} 
else
if(isarray(fn))  
else
//返回依賴陣列
return
$inject;
}

看了上面的原始碼片段和解釋，想必大家對angular的依賴注入有了整體的認識。

下面是另外兩種推薦的宣告依賴的方式

1. 陣列注釋 (推薦), js壓縮混淆不會有影響。

.controller('ctl', ['$scope', '$log', function

($scope, $log) ]);

2.$inject 屬性 ,js壓縮混淆不會有影響

.controller('ctl', ctrl);

function

ctrl($scope, $log)

//給建構函式新增$inject屬性,

//$inject是乙個陣列，元素是依賴的服務名.

ctrl.$inject = ["$scope", "$log"];

angular引入了大量後端開發的概念，而前端同學可能還不熟悉，望本文能有所幫助。

Angular依賴注入詳解

Angular 依賴注入

Angular 依賴注入

Angular依賴注入例項

Angular依賴注入詳解

Angular 依賴注入

Angular 依賴注入

Angular依賴注入例項

相關推薦