1.切換目錄

git checkout step-11 npm 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通過一個工廠方法注冊了一個定制服務。我們傳入服務的名字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());});}); });

?

?

?

?

?

總結

以上是生活随笔為你收集整理的AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。