到現(xiàn)在為止，我們使用是硬編碼的三條手機(jī)記錄數(shù)據(jù)集?，F(xiàn)在我們使用AngularJS一個(gè)內(nèi)置服務(wù)[$http](http://code.angularjs.org/1.1.0/docs/api/ng.$http)來獲取一個(gè)更大的手機(jī)記錄數(shù)據(jù)集。我們將使用AngularJS的[依賴注入（dependency injection (DI)）](http://angularjs.cn/A00z)功能來為`PhoneListCtrl`控制器提供這個(gè)AngularJS服務(wù)。
請(qǐng)重置工作目錄：
~~~
git checkout -f step-5
~~~
刷新瀏覽器，你現(xiàn)在應(yīng)該能看到一個(gè)20部手機(jī)的列表。
步驟4和步驟5之間最重要的不同在下面列出。你可以在[GitHub](https://github.com/angular/angular-phonecat/compare/step-4...step-5)里看到完整的差別。
## 數(shù)據(jù)
你項(xiàng)目當(dāng)中的`app/phones/phones.json`文件是一個(gè)數(shù)據(jù)集，它以JSON格式存儲(chǔ)了一張更大的手機(jī)列表。
下面是這個(gè)文件的一個(gè)樣例：
~~~
[
{
"age": 13,
"id": "motorola-defy-with-motoblur",
"name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
"snippet": "Are you ready for everything life throws your way?"
...
},
...
]
~~~
## 控制器
我們?cè)诳刂破髦惺褂肁ngularJS服務(wù)[$http](http://code.angularjs.org/1.1.0/docs/api/ng.$http)向你的Web服務(wù)器發(fā)起一個(gè)HTTP請(qǐng)求，以此從`app/phones/phones.json`文件中獲取數(shù)據(jù)。`$http`僅僅是AngularJS眾多內(nèi)建服務(wù)中之一，這些服務(wù)可以處理一些Web應(yīng)用的通用操作。AngularJS能將這些服務(wù)注入到任何你需要它們的地方。
服務(wù)是通過AngularJS的[依賴注入DI子系統(tǒng)](http://angularjs.cn/A00z)來管理的。依賴注入服務(wù)可以使你的Web應(yīng)用良好構(gòu)建（比如分離表現(xiàn)層、數(shù)據(jù)和控制三者的部件）并且松耦合（一個(gè)部件自己不需要解決部件之間的依賴問題，它們都被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ā)起一個(gè)`HTTP GET`請(qǐng)求，索取`phone/phones.json`（注意，url是相對(duì)于我們的`index.html`文件的）。服務(wù)器用json文件中的數(shù)據(jù)作為響應(yīng)。（這個(gè)響應(yīng)或許是實(shí)時(shí)從后端服務(wù)器動(dòng)態(tài)產(chǎn)生的。但是對(duì)于瀏覽器來說，它們看起來都是一樣的。為了簡(jiǎn)單起見，我們?cè)诮坛汤锩婧?jiǎn)單地使用了一個(gè)json文件。）
`$http`服務(wù)用`success`返回[對(duì)象應(yīng)答][ng.$q]。當(dāng)異步響應(yīng)到達(dá)時(shí)，用這個(gè)對(duì)象應(yīng)答函數(shù)來處理服務(wù)器響應(yīng)的數(shù)據(jù)，并且把數(shù)據(jù)賦值給作用域的`phones`數(shù)據(jù)模型。注意到AngularJS會(huì)自動(dòng)檢測(cè)到這個(gè)json應(yīng)答，并且已經(jīng)為我們解析出來了！
為了使用AngularJS的服務(wù)，你只需要在控制器的構(gòu)造函數(shù)里面作為參數(shù)聲明出所需服務(wù)的名字，就像這樣：
~~~
function PhoneListCtrl($scope, $http) {...}
~~~
當(dāng)控制器構(gòu)造的時(shí)候，AngularJS的依賴注入器會(huì)將這些服務(wù)注入到你的控制器中。當(dāng)然，依賴注入器也會(huì)處理所需服務(wù)可能存在的任何傳遞性依賴（一個(gè)服務(wù)通常會(huì)依賴于其他的服務(wù)）。
注意到參數(shù)名字非常重要，因?yàn)樽⑷肫鲿?huì)用他們?nèi)ふ蚁鄳?yīng)的依賴。
### '$'前綴命名習(xí)慣
你可以創(chuàng)建自己的服務(wù)，實(shí)際上我們?cè)赱步驟11](http://www.angularjs.cn/docs/tutorial/488.html)就會(huì)學(xué)習(xí)到它。作為一個(gè)命名習(xí)慣，AngularJS內(nèi)建服務(wù)，作用域方法，以及一些其他的AngularJS API都在名字前面使用一個(gè)‘$’前綴。不要使用‘$’前綴來命名你自己的服務(wù)和模型，否則可能會(huì)產(chǎn)生名字沖突。
### 關(guān)于JS壓縮
由于AngularJS是通過控制器構(gòu)造函數(shù)的參數(shù)名字來推斷依賴服務(wù)名稱的。所以如果你要[壓縮](http://en.wikipedia.org/wiki/Minification_(programming))`PhoneListCtrl`控制器的JS代碼，它所有的參數(shù)也同時(shí)會(huì)被壓縮，這時(shí)候依賴注入系統(tǒng)就不能正確的識(shí)別出服務(wù)了。
為了克服壓縮引起的問題，只要在控制器函數(shù)里面給`$inject`屬性賦值一個(gè)依賴服務(wù)標(biāo)識(shí)符的數(shù)組，就像被注釋掉那段最后一行那樣：
~~~
PhoneListCtrl.$inject = ['$scope', '$http'];
~~~
另一種方法也可以用來指定依賴列表并且避免壓縮問題——使用Javascript數(shù)組方式構(gòu)造控制器：把要注入的服務(wù)放到一個(gè)字符串?dāng)?shù)組（代表依賴的名字）里，數(shù)組最后一個(gè)元素是控制器的方法函數(shù)：
~~~
var PhoneListCtrl = ['$scope', '$http', function($scope, $http) { /* constructor body */ }];
~~~
上面提到的兩種方法都能和AngularJS可注入的任何函數(shù)完美協(xié)作，要選哪一種方式完全取決于你們項(xiàng)目的編程風(fēng)格，建議使用數(shù)組方式。
## 測(cè)試
test/unit/controllerSpec.js：
由于我們現(xiàn)在開始使用依賴注入，并且我們的控制器也含有了許多依賴服務(wù)，所以為我們的控制器構(gòu)造測(cè)試就有一點(diǎn)小小的復(fù)雜了。我們需要使用`new`操作并且提供給構(gòu)造器包括`$http`的一些偽實(shí)現(xiàn)。然而，我們推薦的方法（而且更加簡(jiǎn)單噢）是在測(cè)試環(huán)境下創(chuàng)建一個(gè)控制器，使用的方法和AngularJS在產(chǎn)品代碼于下面的場(chǎng)景下做的一樣：
~~~
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});
}));
~~~
注意：因?yàn)槲覀冊(cè)跍y(cè)試環(huán)境中加載了Jasmine和angular-mock.js，我們有了兩個(gè)輔助方法，[module](http://code.angularjs.org/1.1.0/docs/api/angular.mock.module)和[inject](http://code.angularjs.org/1.1.0/docs/api/angular.mock.inject)，來幫助我們獲得和配置注入器。
用如下方法，我們?cè)跍y(cè)試環(huán)境中創(chuàng)建一個(gè)控制器：
* 我們使用`inject`方法將[$rootScope](http://code.angularjs.org/1.1.0/docs/api/ng.$rootScope)，[$controller](http://code.angularjs.org/1.1.0/docs/api/ng.$controller)和[$httpBackend](http://code.angularjs.org/1.1.0/docs/api/ng.$httpBackend)服務(wù)實(shí)例注入到Jasmine的`beforeEach`函數(shù)里。這些實(shí)例都來自一個(gè)注入器，但是這個(gè)注入器在每一個(gè)測(cè)試內(nèi)部都會(huì)被重新創(chuàng)建。這樣保證了每一個(gè)測(cè)試都從一個(gè)周知的起始點(diǎn)開始，并且每一個(gè)測(cè)試都和其他測(cè)試相互獨(dú)立。
* 調(diào)用`$rootScope.$new()`來為我們的控制器創(chuàng)建一個(gè)新的作用域。
* `PhoneListCtrl`函數(shù)和剛創(chuàng)建的作用域作為參數(shù)，傳遞給已注入的`$controller`函數(shù)。
由于我們現(xiàn)在的代碼在創(chuàng)建`PhoneListCtrl`子作用域之前，于控制器中使用`$http`服務(wù)獲取了手機(jī)列表數(shù)據(jù)，我們需要告訴測(cè)試套件等待一個(gè)從控制器來的請(qǐng)求。我們可以這樣做：
* 將請(qǐng)求服務(wù)`$httpBackend`注入到我們的`beforeEach`函數(shù)中。這是這個(gè)服務(wù)的一個(gè)偽版本，這樣做在產(chǎn)品環(huán)境中有助于處理所有的XHR和JSONP請(qǐng)求。服務(wù)的偽版本允許你不用考慮原生API和全局狀態(tài)——隨便一個(gè)都能構(gòu)成測(cè)試的噩夢(mèng)——就可以寫測(cè)試。
* 使用`$httpBackend.expectGET`方法來告訴`$httpBackend`服務(wù)來等待一個(gè)HTTP請(qǐng)求，并且告訴它如何對(duì)其進(jìn)行響應(yīng)。注意到，當(dāng)我們調(diào)用`$httpBackend.flush`方法之前，響應(yīng)是不會(huì)被發(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）請(qǐng)求隊(duì)列。這樣會(huì)使得`$http`服務(wù)返回的promise（什么是promise請(qǐng)參見[這里](http://stackoverflow.com/questions/11004273/what-is-stdpromise)）能夠被解釋成規(guī)范的應(yīng)答。
* 我們?cè)O(shè)置一些斷言，來驗(yàn)證手機(jī)數(shù)據(jù)模型已經(jīng)在作用域里了。
最終，我們驗(yàn)證`orderProp`的默認(rèn)值被正確設(shè)置：
~~~
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('age');
});
;
~~~
執(zhí)行`./scripts/test.sh`腳本來運(yùn)行測(cè)試，你應(yīng)該會(huì)看到如下輸出：
~~~
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末尾添加一個(gè)`{{phones | json}}`綁定，觀察json格式的手機(jī)列表。
* 在`PhoneListCtrl`控制器中，把HTTP應(yīng)答預(yù)處理一下，使得只顯示手機(jī)列表的前五個(gè)。在`$http`回調(diào)函數(shù)里面使用如下代碼：
~~~
$scope.phones = data.splice(0, 5);
~~~
## 總結(jié)
現(xiàn)在你應(yīng)該感覺得到使用AngularJS的服務(wù)是多么的容易（這都要?dú)w功于AngularJS服務(wù)的依賴注入機(jī)制），轉(zhuǎn)到[步驟6](a009)，你會(huì)為手機(jī)添加縮略圖和鏈接。
