第十一讲 angularjs $resource 数据交互插件

2015-11-1 17:48| 发布者: admin| 查看: 36761| 评论: 0

摘要: $resource服务的核心价值在于：提供给开发者与RESTful风格WebServices交互的更好的用户体验，它封装了较为低级的$http，这样就不需要前端开发者写大量的异步请求代码了。 ...

学习要点：

1.   $resource 简介
2.   $resource的使用
3.   何时可以使用Angular资源（选看）

第十一讲免费视频教程下载地址：http://bbs.phonegap100.com/thread-2047-1-1.html

1．    angularjs $resource简介

$resource：
$resource服务的核心价值在于：提供给开发者与RESTful风格WebServices交互的更好的用户体验，它封装了较为低级的$http，这样就不需要前端开发者写大量的异步请求代码了。

RESTful架构：
　　（1）每一个URI代表一种资源；
　　（2）客户端和服务器之间，传递这种资源的某种表现层；
（3）客户端通过四个HTTP动词，对服务器端资源进行操作，实现"表现层状态转化"。

RESTful架构详细了解：

http://www.ruanyifeng.com/blog/2011/09/restful.html

2．$resource的使用

1.    引入 angular-resource.min.js

2.    定义模块时加载ngResource

var app = angular.module('app',["ngResource"]);

3.    写代码

http://www.thinksaas.cn/group/topic/348581/

http://docs.angularjs.cn/api/ngResource/service/$resource

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

支持方法：
{
'get':   {method:'GET'},
'save':   {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
};

var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});

后端支持跨域请求php为例子：
header('Access-Control-Allow-Origin: *');

3.何时可以使用Angular资源（选看）

   只有服务端按照RESTful的方式工作的时候，你才可以使用Angular资源。对于信用卡场景，它需要：
     1.一个到/user/123/card的GET请求，它会返回用户123的信用卡列表。
    2.一个到/user/123/card/15的GET请求，它会返回用户123的ID为15的信用卡。
    3.一个到/user/123/card的POST请求，在POST的数据中带有信用卡信息，它将会为用户123的ID创建一张新的信用卡。
    4.一个到/user/123/card/15的POST请求，POST的数据中带有信用卡信息，它将会更新用户123的ID为15的信用卡信息。
    5.一个到/user/123/card/15的DELETE请求，它将会删除用户123的ID为15的信用卡信息。

在学习如何使用ngResource方法创建资源之前，我们先来看看使用基本的$http服务创建类似的东西需要做些什么事情。对于我们的信用卡资源来说，除了要能够对它进行"change"（收费）操作之外，我们还要能够get（获取）、query（查询）以及save（保存）信用卡。

myAppModule.factory('CreditCard', ['http', function($http) {
var baseUrl = '/user/123/card';
return {
get: function(cardId) {
return $http.get(baseUrl + '/' + cardId);
},
save: function(card) {
var url = card.id ? baseUrl + '/' + card.id : baseUrl;
return $http.post(url, card);
},
query: function() {
return $http.get(baseUrl);
},
charge: function(card) {
return $http.post(baseUrl + '/' + card.id, card, {params: {charge: true}});
}
};
}]);

除了这种方式之外，还可以简单地创建一个Angular服务，这个服务将会通过以下方式来描述应用所提供的资源：

myAppModule.factory('CreditCard', ['$resource', function($resource) {
return $resource('/usr/:userId/card/:cardId',
{userId: 123, cardId: '@id'},
{charge: {method: 'POST', params: {charge: true}, isArray: false});
}]);