在這一步中，我們會改進我們APP獲取數據的方式。
請重置工作目錄：
~~~
git checkout -f step-11
~~~
對我們應用所做的最后一個改進就是定義一個代表[RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer)客戶端的定制服務。有了這個客戶端我們可以用一種更簡單的方式來發送XHR請求，而不用去關心更底層的[$http](http://code.angularjs.org/1.1.0/docs/api/ng.$http)服務（API、HTTP方法和URL）。
步驟9和步驟10之間最重要的不同在下面列出。你可以在[GitHub](https://github.com/angular/angular-phonecat/compare/step-10...step-11)里看到完整的差別。
## 模板
定制的服務被定義在app/js/services，所以我們需要在布局模板中引入這個文件。另外，我們也要加載angularjs-resource.js這個文件，它包含了`ngResource`模塊以及其中的`$resource`服務，我們一會就會用到它們：
app/index.html
~~~
...
<script src="js/services.js"></script>
<script src="lib/angular/angular-resource.js"></script>
...
~~~
## 服務
app/js/services.js
~~~
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
});
});
~~~
我們使用模塊API通過一個工廠方法注冊了一個定制服務。我們傳入服務的名字`Phone`和工廠函數。工廠函數和控制器構造函數差不多，它們都通過函數參數聲明依賴服務。Phone服務聲明了它依賴于`$resource`服務。
[$resource](http://code.angularjs.org/1.1.0/docs/api/ngResource.$resource)服務使得用短短的幾行代碼就可以創建一個[RESTful](http://en.wikipedia.org/wiki/Representational_State_Transfer)客戶端。我們的應用使用這個客戶端來代替底層的[$http](http://code.angularjs.org/1.1.0/docs/api/ng.$http)服務。
app/js/app.js
~~~
...
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
...
~~~
我們需要把`phonecatServices`添加到`phonecat`的依賴數組里。
## 控制器
通過重構掉底層的[$http](http://code.angularjs.org/1.1.0/docs/api/ng.$http)服務，把它放在一個新的服務`Phone`中，我們可以大大簡化子控制器（`PhoneListCtrl`和`PhoneDetailCtrl`）。AngularJS的[$resource](http://code.angularjs.org/1.1.0/docs/api/ngResource.$resource)相比于`$http`更加適合于與RESTful數據源交互。而且現在我們更容易理解控制器這些代碼在干什么了。
app/js/controllers.js
~~~
...
function PhoneListCtrl($scope, Phone) {
$scope.phones = Phone.query();
$scope.orderProp = 'age';
}
//PhoneListCtrl.$inject = ['$scope', 'Phone'];
function PhoneDetailCtrl($scope, $routeParams, Phone) {
$scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {
$scope.mainImageUrl = phone.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
}
//PhoneDetailCtrl.$inject = ['$scope', '$routeParams', 'Phone'];
~~~
注意到，在`PhoneListCtrl`里我們把：
~~~
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
~~~
換成了：
~~~
$scope.phones = Phone.query();
~~~
我們通過這條簡單的語句來查詢所有的手機。
另一個非常需要注意的是，在上面的代碼里面，當調用Phone服務的方法是我們并沒有傳遞任何回調函數。盡管這看起來結果是同步返回的，其實根本就不是。被同步返回的是一個“future”——一個對象，當XHR相應返回的時候會填充進數據。鑒于AngularJS的數據綁定，我們可以使用future并且把它綁定到我們的模板上。然后，當數據到達時，我們的視圖會自動更新。
有的時候，單單依賴future對象和數據綁定不足以滿足我們的需求，所以在這些情況下，我們需要添加一個回調函數來處理服務器的響應。`PhoneDetailCtrl`控制器通過在一個回調函數中設置`mainImageUrl`就是一個解釋。
## 測試
修改我們的單元測試來驗證我們新的服務會發起HTTP請求并且按照預期地處理它們。測試同時也檢查了我們的控制器是否與服務正確協作。
[$resource](http://code.angularjs.org/1.1.0/docs/api/ngResource.$resource)服務通過添加更新和刪除資源的方法來增強響應得到的對象。如果我們打算使用`toEqual`匹配器，我們的測試會失敗，因為測試值并不會和響應完全等同。為了解決這個問題，我們需要使用一個最近定義的`toEqualData`[Jasmine匹配器](http://pivotal.github.com/jasmine/jsdoc/symbols/jasmine.Matchers.html)。當`toEqualData`匹配器比較兩個對象的時候，它只考慮對象的屬性而忽略掉所有的方法。
test/unit/controllersSpec.js：
~~~
describe('PhoneCat controllers', function() {
beforeEach(function(){
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
}
});
});
beforeEach(module('phonecatServices'));
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});
}));
it('should create "phones" model with 2 phones fetched from xhr', function() {
expect(scope.phones).toEqual([]);
$httpBackend.flush();
expect(scope.phones).toEqualData(
[{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
});
it('should set the default value of orderProp model', function() {
expect(scope.orderProp).toBe('age');
});
});
describe('PhoneDetailCtrl', function(){
var scope, $httpBackend, ctrl,
xyzPhoneData = function() {
return {
name: 'phone xyz',
images: ['image/url1.png', 'image/url2.png']
}
};
beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
$httpBackend = _$httpBackend_;
$httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData());
$routeParams.phoneId = 'xyz';
scope = $rootScope.$new();
ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
}));
it('should fetch phone detail', function() {
expect(scope.phone).toEqualData({});
$httpBackend.flush();
expect(scope.phone).toEqualData(xyzPhoneData());
});
});
});
~~~
執行`./scripts/test.sh`運行測試，你應該會看到如下的輸出：
~~~
Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)
~~~
## 總結
完工！你在相當短的時間內已經創建了一個Web應用。在[完結篇](a00f)里面我們會提起接下來應該干什么。
