栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

深入理解Angularjs中的$resource服务

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

深入理解Angularjs中的$resource服务

一、$resource服务介绍

$http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。

$resource就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容:

  1. 资源在服务端的URL。
  2. 常用的请求参数类型。
  3. 一些附加的方法(你可以自动获得get、save、query、remove和delete方法),这些方法为对象模型包装了特定的功能和业务逻辑(例如信用卡对象的charge()方法)。
  4. 期望获得的响应类型(一个数组或者一个对象)。
  5. 协议头。

使用Angular所提供的$resource对象,你可以根据各种需求查询服务器;除此之外,你还可以把服务端返回的对象当成已经持久好的数据模型,你可以修改它们,并且可以把它们持久化。

ngResource是一个独立的、可选的模块,因此,并没有默认包含在Angular中, 为了使用它,需要:

1、在加载的脚本文件中包含angular-resource.js.

例如:

2、在模块依赖声明中包含ngResource

例如: angular.module(‘myapp', [‘ngResource'])

3、在需要的地方使用注入的$resource服务。

格式: var obj=$resource(url,[,paramsDefaults],[,actions])

obj表示请求服务器指定url地址后返回的`$resource`对象,该对象中就包含了**与服务端进行数据交互的全部API**。

参数url表示请求服务器的地址,其中允许占位符变量,该变量必须以`:`为前缀

例如:

 `var obj=$resource('url?action=:act');`
 `obj.$save{act:'save'}`

那么,在执行save动作时,向服务端发送的实际地址就为`url?action=save`。

此外,可选参数`paramsDefaults`是一个对象,用于设置请求时的默认参数值,在发送请求时,该对象中的全部值将自动进行序列化,如遇占位符变量自动替换,并将结果添加到url请求之后

代码如下:

 var obj=`$resource`('url?action=:act',{
 act:'save',
 a:'1',
 b:'2'
 });

执行上述代码后,向服务器发送的实际地址是`url?action=save&a=1&b=2`。

另外一个可选参数`actions`的功能是扩展默认资源动作,例如,可以在该对象中自定义新的方法:

 var boj=$resource('url?action=:act',{
 ...
 },{
 a:{
 method:'get'
 }
 });

然后就可以在$resource对象中直接调用在可选参数actions中自定义的方法a,即obj.$a()

二、 $resource服务所返回娿对象中所包含的5个与服务端交互常用API

1、$resource服务返回对象中的GET类型请求

包含两个api,分别为get  query,调用格式如下:

 var obj=$resource('url');
 //get()方法
 obj.get(params,successFn,errorFn);
 //query方法
 obj.query(params,successFn,errorFn);

这两个api的请求参数相同,区别在于,**get返回值可以是单个资源,但是query必须返回一个数组或集合类的资源。**

2、$resource服务返回对象中的非GET类型请求

包含3个api,分别为save  delete  remove,调用格式如下:

 var obj=$resource('url');
 //save()方法
 obj.save(params,postData,successFn,errorFn);
 //delete方法
 obj.save(params,postData,successFn,errorFn);
 //remove方法
 obj.save(params,postData,successFn,errorFn);

其中,delete方法和remove方法作用享用,区别在于remove可以解决IE浏览器中delete是Javascript保留字而导致的错误问题。

 
 
  • {{item.Code}} {{item.Name}} {{item.Gender}}
Key: {{result}}

对应的服务器端文件,使用了Express架构,核心代码如下:

 //对于query请求
 app.get('/info',function(req,res){
 var info=[
 {Code:'1001',Name:'zhangsan',Gender:'female'},
 {Code:'1002',Name:'lisi',Gender:'male'}
 ];
 res.status(200).json(info);
 });
 //对于save请求
 app.post('/info',function(req,res){
 if(req.body.key=='1001'){
 res.send('1');
 }else{
 res.send('0')
 }
 });

三、在$resource服务中自定义请求方法

var obj=$resource(url,[,paramsDefaults],[,actions])

在第三个可选参数中,通过key/value的方式自定义。

 
 
 {{r0}}
 {{r1}}
 {{r2}}
 
 
 
 

对应的服务器端文件,使用了Express架构,核心代码如下:

 // /self?action=search&id=1001
 app.get('/self',function(req,res){
 if(req.query.action=='search'){
 console.log('req.params.id:'+req.params.id);
 if(req.query.id=='1001'){
 res.send('1');
 }else{
 res.send('0');
 }
 }
 });

 // /self?action=update&update=true /self?action=save
 app.post('/self',function(req,res){
 if(req.query.action=='update'){
 if(req.body.key=='1001' && req.query.update=='true'){
 res.send('1');
 }else{
 res.send('0');
 }
 }else if(req.query.action=='save'){
 if(req.body.key=='1002'){
 res.send('1');
 }else{
 res.send('0');
 }
 }
 })

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/91332.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号