PhoneGap中文网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

2015-11-1 17:48| 发布者: admin| 查看: 2379| 评论: 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});
}]);





头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

最新评论

关闭

站长推荐上一条 /1 下一条

Archiver|手机版|小黑屋|PhoneGap中文网 ( 京ICP备13027796号-1

GMT+8, 2017-5-27 14:30 , Processed in 0.146796 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部