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

更新時間：2016年08月19日 10:50:40 作者：速凍沙漠

本文主要講解 AngularJS REST和定制服務的知識，這里幫大家整理了相關知識，并附示例代碼，詳細講解了RES和定制服務的知識，有興趣的小伙伴可以參考下

在這一步中，我們會改進我們APP獲取數據的方式。

請重置工作目錄：

git checkout -f step-11

對我們應用所做的最后一個改進就是定義一個代表RESTful客戶端的定制服務。有了這個客戶端我們可以用一種更簡單的方式來發(fā)送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通過一個工廠方法注冊了一個定制服務。我們傳入服務的名字Phone和工廠函數。工廠函數和控制器構造函數差不多，它們都通過函數參數聲明依賴服務。Phone服務聲明了它依賴于$resource服務。

$resource服務使得用短短的幾行代碼就可以創(chuàng)建一個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就是一個解釋。

測試

修改我們的單元測試來驗證我們新的服務會發(fā)起HTTP請求并且按照預期地處理它們。測試同時也檢查了我們的控制器是否與服務正確協(xié)作。

$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());
  });
 });
});

執(zhí)行./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)

總結

完工！你在相當短的時間內已經創(chuàng)建了一個Web應用。在完結篇里面我們會提起接下來應該干什么。

以上就是AngularJS RES和定制服務的資料整理，后續(xù)繼續(xù)補充相關資料，希望能幫助大家學習AngularJS!

您可能感興趣的文章:

AngularJS動態(tài)菜單操作指令
在我們創(chuàng)建一個angularJS應用的時候，菜單往往往是不可或缺的元素之一。接下來通過本文給大家介紹AngularJS動態(tài)菜單操作指令，感興趣的朋友一起學習吧
2017-04-04
Angularjs中UI Router全攻略
這篇文章主要介紹了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友參考下吧
2016-01-01
Angular 2使用路由自定義彈出組件toast操作示例
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結合實例形式分析了Angular2使用路由操作彈出組件toast相關定義與使用技巧,需要的朋友可以參考下
2019-05-05
深入理解Angularjs 臟值檢測
這篇文章主要介紹了深入理解Angularjs 臟值檢測，詳細的介紹了臟值檢測的原理和實現，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
AngularJS模塊管理問題的非常規(guī)處理方法
這篇文章主要介紹了AngularJS模塊管理問題的非常規(guī)處理方法，算是一個無奈之舉，分享給小伙伴，大家可以參考下。
2015-04-04
angular ngClick阻止冒泡使用默認行為的方法
這篇文章主要介紹了angular ngClick阻止冒泡使用默認行為的方法,較為詳細的分析了AngularJS中ngClick事件執(zhí)行原理與阻止冒泡的實現技巧,需要的朋友可以參考下
2016-11-11
詳解AngularJs路由之Ui-router-resolve（預加載）
本篇文章主要介紹了詳解AngularJs路由之Ui-router-resolve（預加載），具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-06-06
angular2路由切換改變頁面title的示例代碼
本篇文章主要介紹了angular2路由切換改變頁面title的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
AngularJS監(jiān)聽路由變化的方法
本篇文章主要介紹了AngularJS監(jiān)聽路由變化的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
angular 組件通信的幾種實現方式
這篇文章主要介紹了angular 組件通信的幾種實現方式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07