AngularJS入門教程之REST和定製服務詳解_AngularJS

在這一步中，我們會改進我們APP擷取資料的方式。

請重設工作目錄：

git checkout -f step-11

對我們應用所做的最後一個改進就是定義一個代表RESTful用戶端的定製服務。有了這個用戶端我們可以用一種更簡單的方式來發送XHR請求，而不用去關心更底層的$http服務（API、HTTP方法和URL）。

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

模板

定製的服務被定義在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通過一個Factory 方法註冊了一個定製服務。我們傳入服務的名字Phone和工廠函數。工廠函數和控制器建構函式差不多，它們都通過函數參數聲明依賴服務。Phone服務聲明了它依賴於$resource服務。

$resource服務使得用短短的幾行代碼就可以建立一個RESTful用戶端。我們的應用使用這個用戶端來代替底層的$http服務。

app/js/app.js

...angular.module('phonecat', ['phonecatFilters', 'phonecatServices'])....

我們需要把phonecatServices添加到phonecat的依賴數組裡。

控制器

通過重構掉底層的$http服務，把它放在一個新的服務Phone中，我們可以大大簡化子控制器（PhoneListCtrl和PhoneDetailCtrl）。AngularJS的$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服務通過添加更新和刪除資源的方法來增強響應得到的對象。如果我們打算使用toEqual匹配器，我們的測試會失敗，因為測試值並不會和響應完全等同。為瞭解決這個問題，我們需要使用一個最近定義的toEqualDataJasmine匹配器。當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應用。在完結篇裡面我們會提起接下來應該幹什麼。

以上就是AngularJS RES和定製服務的資料整理，後續繼續補充相關資料，希望能協助大家學習AngularJS!