AngularJS_4 Dependency Injection（依賴注入）

(This is the note of angular course in HKUST.)

為了友善整理思路和回憶，這篇部落格還是不寫蹩腳的英文了。

AngularJS有多種可用的代碼形式來實作依賴注入，最清晰明确的是下面這種——Inline array annotation：

module.controller('MyController',['$scope','myFactory',function($scope,myFactory){...}])
           

module為控制全頁面的子產品，通過其controller接口聲明一個新的控制器。該接口包含兩個參數，第一個為該控制器的名稱，第二個為依賴注入清單。上述例子中，一個注入了三個實體，分别是scope子產品，工廠類與本地函數（本地函數可以調用前兩者）。在形式上，後續三個實體全是以注入形式聲明，反過來，該控制器依賴于這三個實體。理論上三個實體的代碼都可以在遠端定義（這裡第三個實體，即本地功能實作直接以代碼形式給出），控制器本身并不清楚三個實體的定義，這種形式更利于架構解耦。

scope子產品和本地函數的功能都很清楚了，實作變量綁定和本地功能。其中scope子產品，由于其便利性，一般都會注入。可以發現，這兩個實體主要隻是借用了依賴注入的形式，也可以用傳統形式實作。應該是出于架構一直上的考慮，angular選擇了全部采用依賴注入。

首先，得了解Angular Service。它是lazily instantiated，隻在需要的時候執行個體化。各個Service可以存儲在系統的不同位置。其代碼可以通過依賴注入的方式，在整個App範圍内共享。Angular提供很多Built-in Service（内建），用

$

符号開頭（比如我們常用的scope service），常用的如下：

我們可以通過Angular預留的接口實作自定義的Service，一共有的有

service();factory();provider();constant();value();

五個接口用于實作不同功能的Service，常用的有前兩個，它們的定義方式如下：

angular.module('myApp')
    .factory('myFactory', function() {
        var myfac = {};
        var dishes = [...];
        myfac.getDishes = function() {
            return  dishes;
        };
        myfac.getDish = function(index) {
            return  dishes[index];
        };
        return  myfac;
    }

    .service('myService', function() {
        var dishes = [...];
        this.getDishes = function(){
            return dishes;
        };
        this.getDish = function(index)  
        {
            return dishes[index];
        };
});
           

它們的使用方式相同，以最開始的定義舉例，在控制器函數内，可用下面的方式調用：

$scope.dishes = myFactory.getDishes()
$scope.favoriteDish = myService.getDish()
           

關于Service、Factory與Provider的對比，網上有一篇很詳細的講解，請參考——http://blog.csdn.net/lglgsy456/article/details/36902179