AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11

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