AngularJS中的依賴注入是什麼？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【AngularJS中的依賴注入是什麼？】

你們好，我是IT修真院深圳分院第12期的學員韓鵬，一枚正直純潔善良的前端程序員，今天給你們分享一下，修真院官網JS任務7，深度思考中的知識點——AngularJS中的依賴注入是什麼？

一、背景介紹

在軟件工程中，依賴注入是實現控制反轉的一種軟件設計模式，一個依賴是一個被其餘對象(client)調用的對象（服務）,注入則是將被依賴的對象(service)實例傳遞給依賴對象(client)的行爲。將 被依賴的對象傳給依賴者，而不須要依賴者本身去建立或查找所需對象是DI的基本原則。 依賴注入容許程序設計聽從依賴倒置原則（簡單的說就是要求對抽象進行編程，不要對實現進行編程，這樣就下降了客戶與實現模塊間的耦合） 調用者(client)只需知道服務的接口，具體服務的查找和建立由注入者(injector)負責處理並提供給client，這樣就分離了服務和調用者的依賴，符合低耦合的程序設計原則。

優勢：

鬆耦合，可重用

提升了組件的可測試性

二、知識剖析

在Angular中DI是無處不在的，你能夠用它來定義一個組件，也能夠提供module實現run和config代碼塊。

• 像services, directives, filters 和 animations這樣的組件都由一個工廠方法或者構造函數定義，在此service和value組件能夠做爲依賴注入到這些組件當中。
• Controllers經過一個構造函數定義，同樣service和value組件能夠做爲依賴注入到組件當中，但他們也有着特殊的依賴關係。
• Module的run方法接受一個函數,在函數的參數中做爲依賴能夠注入service，value和constant組件，可是不能注入providers。
• Module的config方法接受一個函數,在函數的參數中做爲依賴能夠注入provider和constant組件，可是不能注入service和value。

AngularJS提供了很好的依賴注入機制，如下5個核心組件用來做爲依賴注入：value、factory、service、provider、constant。

value

Value 是一個簡單的 javascript 對象，用於向控制器傳遞值（配置階段）：

angular.module(, []);
.value(, );
...
.controller(, (, , ) {
    .number ;
    .result .square(.number);

    .square () {
        .result .square(.number);
    }
});

factory

factory 是一個函數用於返回值。在 service 和 controller 須要時建立。

一般咱們使用 factory 函數來計算或返回值。

angular.module(, []);
.factory(, () {
    factory {};
    factory.multiply (, ) {
        }
    factory;
});
.service(, (){
    .square () {
        .multiply(,);
    }
});
...

provider

AngularJS 中經過 provider 建立一個 service、factory等(配置階段)。

Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。

angular.module(, []);
...
.config(() {
    .provider(, () {
        .$get () {
            factory {};
            factory.multiply (, ) {
                ;
            }
            factory;
        };
    });
});

constant

constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。

mainApp.constant("configParam", "constant value");

三、常見問題

AngularJS依賴注入的方法

四、解決方案

1. 經過函數的參數進行推斷式注入聲明（隱式聲明）

若是沒有明確的聲明， AngularJS會假定參數名稱就是依賴的名稱。所以，它會在內部調用函數對象的toString()方法，分析並提取出函數的參數列表，而後經過 $injector將這些參數注入進對象實例。

1. 顯式注入聲明

AngularJS提供了顯式的方法來明肯定義一個函數在被調用時須要用到的依賴關係。

經過這種方法聲明依賴，即便在源代碼被壓縮、參數名稱發生改變的狀況下依然可以正常工做。

須要注意的地方:

對於這種聲明方式來說，參數的順序是十分重要的，由於$inject數組元素的順序必須和注入的參數的順序一一對應。

1. 行內注入聲明

AngularJS提供的行內注入方法其實是一種語法糖，它與前面的提到的經過$inject屬性進行聲明的原理是同樣的，可是容許咱們在函數定義的時候從行內將參數傳入，這種方法方便，簡單，並且避免了在定義的過程當中使用臨時變量。

須要注意的地方:

行內聲明的方式容許咱們直接傳入一個參數數組，而不是一個函數。數組的元素是字符串，它們表明的是能夠被注入到對象中的依賴名字，最後一個參數就是依賴注入的目標函數對象自己。

五、編碼實戰

六、擴展思考

AngularJS依賴注入有什麼優勢？

1、模板功能強大豐富，而且是聲明式的，自帶了豐富的Angular指令；

2、是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，過濾器，依賴注入等全部功能；

3、依賴注入簡化了組件之間處理依賴的過程（即解決依賴）。沒有依賴注入，就不得不以某種方式本身查找$scope，極可能得使用全局變量。這雖然可以工做，可是不如AngularJS的依賴注入技術這麼簡單。

4、在開發中使用依賴注入的主要好處是AngularJS負責管理組件並在須要的時候提供給相應函數。依賴注入還可以爲測試帶來好處，由於它容許你使用假的或者模擬的對象來代替真實的組件，從而讓開發者專一於程序的特定部分。

七、參考文獻

參考一：Angular依賴注入詳解————http://www.cnblogs.com/leonwa...

參考二：玩轉 AngualrJS 的依賴注入————https://segmentfault.com/a/11...

參考三：理解AngularJS中的依賴注入————http://www.html-js.com/articl...

八、更多討論

問：什麼適合使用service方法？

答：service()方法很適合使用在功能控制比較多的service裏面。

注意：須要使用.config()來配置service的時候不能使用service()方法

問：service和factory的區別

答：factory 是普通函數，能夠返回任何東西。service 是構造函數，能夠不返回東西。功能相同。

問：推薦使用行內注入聲明的緣由？

答：寫法上比顯式注入聲明更簡單明瞭，比隱式注入聲明更可靠（因爲Javascript能夠被壓縮，AngularJS又是經過解析服務名稱找到對應Service的，所以Javascript壓縮以後AngularJS將沒法找到指定的Service，但字符串不會被壓縮，所以單獨以字符串指定Service的名稱能夠避免這個問題）。

今天的分享就到這裏啦，歡迎你們點贊、轉發、留言、拍磚~

更多內容，能夠加入IT交流羣565734203與你們一塊兒討論交流