XHR 和依賴注入 - XHRs Dependency Injection

到現(xiàn)在為止，我們使用是硬編碼的三條手機記錄數(shù)據(jù)集?，F(xiàn)在我們使用AngularJS一個內(nèi)置服務(wù)$http來獲取一個更大的手機記錄數(shù)據(jù)集。我們將使用AngularJS的依賴注入（dependency injection (DI)）功能來為PhoneListCtrl控制器提供這個AngularJS服務(wù)。

請重置工作目錄：

    git checkout -f step-5

刷新瀏覽器，你現(xiàn)在應(yīng)該能看到一個20部手機的列表。

步驟4和步驟5之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

數(shù)據(jù)

你項目當(dāng)中的app/phones/phones.json文件是一個數(shù)據(jù)集，它以JSON格式存儲了一張更大的手機列表。

下面是這個文件的一個樣例：

    [
     {
      "age": 13,
      "id": "motorola-defy-with-motoblur",
      "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
      "snippet": "Are you ready for everything life throws your way?"
      ...
     },
    ...
    ]

控制器

我們在控制器中使用AngularJS服務(wù)$http向你的Web服務(wù)器發(fā)起一個HTTP請求，以此從app/phones/phones.json文件中獲取數(shù)據(jù)。$http僅僅是AngularJS眾多內(nèi)建服務(wù)中之一，這些服務(wù)可以處理一些Web應(yīng)用的通用操作。AngularJS能將這些服務(wù)注入到任何你需要它們的地方。

服務(wù)是通過AngularJS的依賴注入DI子系統(tǒng)來管理的。依賴注入服務(wù)可以使你的Web應(yīng)用良好構(gòu)建（比如分離表現(xiàn)層、數(shù)據(jù)和控制三者的部件）并且松耦合（一個部件自己不需要解決部件之間的依賴問題，它們都被DI子系統(tǒng)所處理）。

app/js/controllers.js

    function PhoneListCtrl($scope, $http) {
      $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
      });

      $scope.orderProp = 'age';
    }

    //PhoneListCtrl.$inject = ['$scope', '$http'];

$http向Web服務(wù)器發(fā)起一個HTTP GET請求，索取phone/phones.json（注意，url是相對于我們的index.html文件的）。服務(wù)器用json文件中的數(shù)據(jù)作為響應(yīng)。（這個響應(yīng)或許是實時從后端服務(wù)器動態(tài)產(chǎn)生的。但是對于瀏覽器來說，它們看起來都是一樣的。為了簡單起見，我們在教程里面簡單地使用了一個json文件。）

$http服務(wù)用success返回[對象應(yīng)答][ng.$q]。當(dāng)異步響應(yīng)到達時，用這個對象應(yīng)答函數(shù)來處理服務(wù)器響應(yīng)的數(shù)據(jù)，并且把數(shù)據(jù)賦值給作用域的phones數(shù)據(jù)模型。注意到AngularJS會自動檢測到這個json應(yīng)答，并且已經(jīng)為我們解析出來了！

為了使用AngularJS的服務(wù)，你只需要在控制器的構(gòu)造函數(shù)里面作為參數(shù)聲明出所需服務(wù)的名字，就像這樣：

function PhoneListCtrl($scope, $http) {...}

當(dāng)控制器構(gòu)造的時候，AngularJS的依賴注入器會將這些服務(wù)注入到你的控制器中。當(dāng)然，依賴注入器也會處理所需服務(wù)可能存在的任何傳遞性依賴（一個服務(wù)通常會依賴于其他的服務(wù)）。

注意到參數(shù)名字非常重要，因為注入器會用他們?nèi)ふ蚁鄳?yīng)的依賴。

http://wiki.jikexueyuan.com/project/angularjs-tutorial/images/xhrs-&-dependency-injection-1.png" alt="Image of xhrs-&-dependency-injection-1.png" />

'$'前綴命名習(xí)慣

你可以創(chuàng)建自己的服務(wù)，實際上我們在步驟11就會學(xué)習(xí)到它。作為一個命名習(xí)慣，AngularJS內(nèi)建服務(wù)，作用域方法，以及一些其他的AngularJS API都在名字前面使用一個‘$’前綴。不要使用‘$’前綴來命名你自己的服務(wù)和模型，否則可能會產(chǎn)生名字沖突。

關(guān)于 JS 壓縮

由于AngularJS是通過控制器構(gòu)造函數(shù)的參數(shù)名字來推斷依賴服務(wù)名稱的。所以如果你要壓縮PhoneListCtrl控制器的JS代碼，它所有的參數(shù)也同時會被壓縮，這時候依賴注入系統(tǒng)就不能正確的識別出服務(wù)了。

為了克服壓縮引起的問題，只要在控制器函數(shù)里面給$inject屬性賦值一個依賴服務(wù)標(biāo)識符的數(shù)組，就像被注釋掉那段最后一行那樣：

    PhoneListCtrl.$inject = ['$scope', '$http'];

另一種方法也可以用來指定依賴列表并且避免壓縮問題——使用Javascript數(shù)組方式構(gòu)造控制器：把要注入的服務(wù)放到一個字符串?dāng)?shù)組（代表依賴的名字）里，數(shù)組最后一個元素是控制器的方法函數(shù)：

    var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];

上面提到的兩種方法都能和AngularJS可注入的任何函數(shù)完美協(xié)作，要選哪一種方式完全取決于你們項目的編程風(fēng)格，建議使用數(shù)組方式。

測試

test/unit/controllerSpec.js：

由于我們現(xiàn)在開始使用依賴注入，并且我們的控制器也含有了許多依賴服務(wù)，所以為我們的控制器構(gòu)造測試就有一點小小的復(fù)雜了。我們需要使用new操作并且提供給構(gòu)造器包括$http的一些偽實現(xiàn)。然而，我們推薦的方法（而且更加簡單噢）是在測試環(huán)境下創(chuàng)建一個控制器，使用的方法和AngularJS在產(chǎn)品代碼于下面的場景下做的一樣：

    describe('PhoneCat controllers', function() {

      describe('PhoneListCtrl', function(){
        var scope, ctrl, $httpBackend;

        beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
          $httpBackend = _$httpBackend_;
          $httpBackend.expectGET('phones/phones.json').
              respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);

          scope = $rootScope.$new();
          ctrl = $controller(PhoneListCtrl, {$scope: scope});
        }));

注意：因為我們在測試環(huán)境中加載了Jasmine和angular-mock.js，我們有了兩個輔助方法，module和inject，來幫助我們獲得和配置注入器。

用如下方法，我們在測試環(huán)境中創(chuàng)建一個控制器：

• 我們使用inject方法將$rootScope，$controller和$httpBackend服務(wù)實例注入到Jasmine的beforeEach函數(shù)里。這些實例都來自一個注入器，但是這個注入器在每一個測試內(nèi)部都會被重新創(chuàng)建。這樣保證了每一個測試都從一個周知的起始點開始，并且每一個測試都和其他測試相互獨立。

• 調(diào)用$rootScope.$new()來為我們的控制器創(chuàng)建一個新的作用域。

• PhoneListCtrl函數(shù)和剛創(chuàng)建的作用域作為參數(shù)，傳遞給已注入的$controller函數(shù)。

由于我們現(xiàn)在的代碼在創(chuàng)建PhoneListCtrl子作用域之前，于控制器中使用$http服務(wù)獲取了手機列表數(shù)據(jù)，我們需要告訴測試套件等待一個從控制器來的請求。我們可以這樣做：

• 將請求服務(wù)$httpBackend注入到我們的beforeEach函數(shù)中。這是這個服務(wù)的一個偽版本，這樣做在產(chǎn)品環(huán)境中有助于處理所有的XHR和JSONP請求。服務(wù)的偽版本允許你不用考慮原生API和全局狀態(tài)——隨便一個都能構(gòu)成測試的噩夢——就可以寫測試。

• 使用$httpBackend.expectGET方法來告訴$httpBackend服務(wù)來等待一個HTTP請求，并且告訴它如何對其進行響應(yīng)。注意到，當(dāng)我們調(diào)用$httpBackend.flush方法之前，響應(yīng)是不會被發(fā)出的。

現(xiàn)在，

    it('should create "phones" model with 2 phones fetched from xhr', function() {
      expect(scope.phones).toBeUndefined();
      $httpBackend.flush();

      expect(scope.phones).toEqual([{name: 'Nexus S'},
                               {name: 'Motorola DROID'}]);
    });

• 在瀏覽器里，我們調(diào)用$httpBackend.flush()來清空（flush）請求隊列。這樣會使得$http服務(wù)返回的promise什么是promise請參見這里能夠被解釋成規(guī)范的應(yīng)答。

• 我們設(shè)置一些斷言，來驗證手機數(shù)據(jù)模型已經(jīng)在作用域里了。

最終，我們驗證orderProp的默認(rèn)值被正確設(shè)置：

    it('should set the default value of orderProp model', function() {
      expect(scope.orderProp).toBe('age');
    });
    ;

執(zhí)行`./scripts/test.sh`腳本來運行測試，你應(yīng)該會看到如下輸出：

    Chrome: Runner reset.
    ..
    Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
      Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)

練習(xí)

在index.html末尾添加一個{{phones | json}}綁定，觀察json格式的手機列表。

在PhoneListCtrl控制器中，把HTTP應(yīng)答預(yù)處理一下，使得只顯示手機列表的前五個。在$http回調(diào)函數(shù)里面使用如下代碼：

    $scope.phones = data.splice(0, 5);

總結(jié)

現(xiàn)在你應(yīng)該感覺得到使用AngularJS的服務(wù)是多么的容易（這都要歸功于AngularJS服務(wù)的依賴注入機制），轉(zhuǎn)到連接與圖片模版，你會為手機添加縮略圖和鏈接。