AngularJS學習---REST和自訂服務(REST and Custom Services) ngResource step 11

標籤：des   style   blog   class   code   java   

1.切換目錄

git checkout step-11npm start

2.

和step 10的沒有什麼差別,這裡主要的改動都是代碼,代碼做了很多最佳化,這裡就不再貼出來了.

3.實現代碼

step-10和step-11之間的差別:https://github.com/angular/angular-phonecat/compare/step-10...step-11

Dependencies (依賴的JS):

{  "name": "angular-seed",  "description": "A starter project for AngularJS",  "version": "0.0.0",  "homepage": "https://github.com/angular/angular-seed",  "license": "MIT",  "private": true,  "dependencies": {    "angular": "1.2.x",    "angular-mocks": "~1.2.x",    "bootstrap": "~3.1.1",    "angular-route": "~1.2.x",    "angular-resource": "~1.2.x"  }}

這裡用的是 Bower 去管理JS庫,增加了angular-resource.js,這個是通過npm install 或者 bower install命令去下載angular-resource.js檔案的.

 

Template(模板層)

app/index.html

...  <script src="bower_components/angular-resource/angular-resource.js"></script>  <script src="js/services.js"></script>...

注:這裡引入了angular-resource.js,關於ngResource可以查看api:https://docs.angularjs.org/api/ngResource

 Service(服務層)

app/js/services.js.

var phonecatServices = angular.module(‘phonecatServices‘, [‘ngResource‘]);phonecatServices.factory(‘Phone‘, [‘$resource‘,  function($resource){    return $resource(‘phones/:phoneId.json‘, {}, {      query: {method:‘GET‘, params:{phoneId:‘phones‘}, isArray:true}    });  }]);

我們使用模組API通過一個Factory 方法註冊了一個定製服務。我們傳入服務的名字Phone和工廠函數。工廠函數和控制器建構函式差不多，它們都通過函數參數聲明依賴服務。Phone服務聲明了它依賴於$resource服務。

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

 其實其內部實現還是通過$http方式擷取資料的,這裡只不過是多加了一層封裝而已.

$resource的用法:

$resource(url, [paramDefaults], [actions], options);

Controller(控制器)

 app/js/controllers.js.

var phonecatControllers = angular.module(‘phonecatControllers‘, []);...phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘Phone‘, function($scope, Phone) {  $scope.phones = Phone.query();  $scope.orderProp = ‘age‘;}]);phonecatControllers.controller(‘PhoneDetailCtrl‘, [‘$scope‘, ‘$routeParams‘, ‘Phone‘, function($scope, $routeParams, Phone) {  $scope.phone = Phone.get({phoneId: $routeParams.phoneId}, function(phone) {    $scope.mainImageUrl = phone.images[0];  });  $scope.setImage = function(imageUrl) {    $scope.mainImageUrl = imageUrl;  }}]);

通過重構掉底層的 $http服務，把它放在一個新的服務Phone中，我們可以大大簡化子控制器（PhoneListCtrl和PhoneDetailCtrl）。AngularJS的 $resource相比於$http更加適合於與RESTful資料來源互動。而且現在我們更容易理解控制器這些代碼在幹什麼了。

 注意代碼的替換:

-phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘$http‘, -  function($scope, $http) { -    $http.get(‘phones/phones.json‘).success(function(data) { -      $scope.phones = data; -    }); - +phonecatControllers.controller(‘PhoneListCtrl‘, [‘$scope‘, ‘Phone‘, +  function($scope, Phone) { +    $scope.phones = Phone.query();      $scope.orderProp = ‘age‘;    }]);

---表示被替換的)(即刪除掉的),+++表示替換後的(即新增加的).

這裡$resource中關於actions的封裝如下:

 { ‘get‘:    {method:‘GET‘},    ‘save‘:   {method:‘POST‘},    ‘query‘:  {method:‘GET‘, isArray:true},    ‘remove‘: {method:‘DELETE‘},    ‘delete‘: {method:‘DELETE‘} };

這裡用的是get方式.我們通過這條簡單的語句來查詢所有的手機。

另一個非常需要注意的是，在上面的代碼裡面，當調用Phone服務的方法是我們並沒有傳遞任何回呼函數。儘管這看起來結果是同步返回的，其實根本就不是。被同步返回的是一個“future”——一個對象，當XHR相應返回的時候會填充進資料。鑒於AngularJS的資料繫結，我們可以使用future並且把它綁定到我們的模板上。然後，當資料到達時，我們的視圖會自動更新。

有的時候，單單依賴future對象和資料繫結不足以滿足我們的需求，所以在這些情況下，我們需要添加一個回呼函數來處理伺服器的響應。PhoneDetailCtrl控制器通過在一個回呼函數中設定mainImageUrl就是一個解釋。

 

4.測試

修改我們的單元測試來驗證我們新的服務會發起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(‘phonecatApp‘));  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).toEqualData([]);      $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());    });  });});