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中,我们可以大大简化子控制器(PhoneListCtrlPhoneDetailCtrl)。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

时间: 2024-10-13 18:38:16

AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11的相关文章

AngularJs学习笔记5——自定义服务

前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 | number/currency/data/orderBy : " 相应的格式或表达式 "}} 函数:function,应该不用介绍了.这里需要注意的是forEach函数的形参顺序,基本格式如下: 1 var obj={name:"fanfan",age:"

angularjs factory,service,provider 自定义服务的不同

angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angularjs的内置服务多,例如:$scope,$rootScope,$http,$q,$resource,$routeProvider等等,下面来说一下怎么自定义服务 一,factory,service,provider自定义服务,services.js 'use strict'; /* Service

AngularJs学习笔记3——自定义指令

指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一旦发布了指令,就要执行某项动作.就像我们军训的时候,一个口令一个动作.而常用的指令是固定的,如果我们有一些特殊的需要,这时候要自定义指令,没有条件就要自己创造条件嘛. 基本语法: var app=angular.module('myApp',[ ]); app.directive(name,fn);

AngularJs学习之一使用自定义的过滤器

script: 参数item是由AngularJs提供的,是应当被过滤的对象集合.而showComplete是我们传入的参数. {{item.action}} 用ng-model创造一个名为showComplete的数据 script: <script type="text/javascript">// <![CDATA[ todoApp.filter("checkedItems",function(){ return function (item

angularJs自定义服务(实现签名和加密)

写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zhihu.com/question/25539382) 对base64.md5.sha1加密算法简单解释: 1.base64是可逆的.对称的加密算法:base64具有64个基本字符组成的基本字符集 base64加密原理: a.base64以3个字节为一组,而一个字节占8个位(bit) b.再把24bi

Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念

Angularjs 自定义服务 provide 里 provider 方法 以及factory. service 方法以及 provider 供应商的概念 学习要点:1. Angularjs 中的 provider 方法2. Angularjs 中的 factory 方法3. Angularjs 中的 service 方法4. provider 供应商的概念5. 研究 ionic 代码中的 services 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆

【AngularJS学习笔记】01 指令、服务和过滤器

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 比如: ng-app 指令初始化一个 AngularJS 应用程序.注意ng-app一般为空,如果值不为空,就得加这样一句代码var app = angular.module('名字', []); ng-init 指令初始化应用程序数据. 这个在之前已经说过了,下面讲一下之前没讲到的. ng-repeat指令与ng-options指令 <!--一般ng-repeat通常用于ul与li这种列表和表格--> <div ng

angularjs学习笔记--服务

在angularjs中,服务是一个函数或对象,可在angularjs应用中使用.其中$location服务可以返回当前页面的url地址.要使用它,需要在controller中进行定义,作为一个参数传入到controller中. <!DOCTYPE html> <html lang="en"> <head> <script src="../angular/angular.js"></script> </

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式. Factory Service Provider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想.所以我们得了解下分层的作用,如果你是前端人员不了解什么是分层,那么你最好问问你后台的小伙伴. dao层:就是Model层,在后台时,这一层的作用,就要是写与数据库交互数据的一层,在angularJS里就主要是写ajax的. service层:主查写逻辑代码的,但在angularJS里也可以持久化数据(充当数据容器),以