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

請重置工作目錄：

git checkout -f step-5

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

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

數(shù)據(jù)

你項目當中的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服務$http向你的Web服務器發(fā)起一個HTTP請求，以此從app/phones/phones.json文件中獲取數(shù)據(jù)。$http僅僅是AngularJS眾多內(nèi)建服務中之一，這些服務可以處理一些Web應用的通用操作。AngularJS能將這些服務注入到任何你需要它們的地方。

服務是通過AngularJS的依賴注入DI子系統(tǒng)來管理的。依賴注入服務可以使你的Web應用良好構(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';
}

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

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

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

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

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

注意到參數(shù)名字非常重要，因為注入器會用他們?nèi)ふ蚁鄳囊蕾嚒?br />

'$'前綴命名習慣

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

關(guān)于JS壓縮

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

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

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

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

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

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

測試

test/unit/controllerSpec.js：

由于我們現(xiàn)在開始使用依賴注入，并且我們的控制器也含有了許多依賴服務，所以為我們的控制器構(gòu)造測試就有一點小小的復雜了。我們需要使用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服務實例注入到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服務獲取了手機列表數(shù)據(jù)，我們需要告訴測試套件等待一個從控制器來的請求。我們可以這樣做：

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

使用$httpBackend.expectGET方法來告訴$httpBackend服務來等待一個HTTP請求，并且告訴它如何對其進行響應。注意到，當我們調(diào)用$httpBackend.flush方法之前，響應是不會被發(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服務返回的promise（什么是promise請參見這里）能夠被解釋成規(guī)范的應答。

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

最終，我們驗證orderProp的默認值被正確設置：

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

練習

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

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

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

總結(jié)

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

謝謝大家對本站的支持，后續(xù)繼續(xù)更新相關(guān)文章！

最新評論