深入理解Angularjs中的$resource服务


Posted in Javascript onDecember 31, 2016

一、$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.

例如: <script src="http://cdn.bootcss.com/angular-resource/1.5.8/angular-resource.min.js"></script>

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服务所返回?愣韵笾兴????个与服务端交互常用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保留字而导致的错误问题。

<div ng-controller='myController'>
 <ul>
 <li ng-repeat='item in items'>
 <span>{{item.Code}}</span>
 <span>{{item.Name}}</span>
 <span>{{item.Gender}}</span>
 </li>
 </ul>
 <div>
 Key: <input type="text" ng-model='key' />
 <button ng-click='save()'>保存</button>
 <div>{{result}}</div>
 </div>
 </div>
 <script type="text/javascript">
 angular.module('myapp',['ngResource'])
 .config(function($httpProvider){
 $httpProvider.defaults.transformRequest=function(obj){
 var arrStr=[];
 for(var p in obj){
  arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
 }
 return arrStr.join("&");
 };
 $httpProvider.defaults.headers.post={
  'Content-Type':'application/x-www-form-urlencoded'
 }
 })
 .controller('myController',['$scope','$resource',function($scope,$resource){
 var stus=$resource('/info');
 ///info?action=search
 stus.query({action:'search'},function(resp){
  $scope.items=resp;
 });
 $scope.save=function(){
  var data={
  key:$scope.key
  };
  stus.save({action:'save'},data,function(resp){
  $scope.result=(resp[0]=='1')?'保存成功':"保存失败";
  });
 }
 }])
 </script>

对应的服务器端文件,使用了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的方式自定义。

<div ng-controller='myController'>
 <div>
 <div>{{r0}}</div>
 <div>{{r1}}</div>
 <div>{{r2}}</div>
 <button ng-click='click()'>开始</button>
 </div>
 </div>
 <script type="text/javascript">
 var url='/self?action=:act';
 angular.module('myapp',['ngResource'])
 .config(function($httpProvider){
 $httpProvider.defaults.transformRequest=function(obj){
 var arrStr=[];
 for(var p in obj){
  arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
 }
 return arrStr.join("&");
 };
 $httpProvider.defaults.headers.post={
  'Content-Type':'application/x-www-form-urlencoded'
 }
 })
 .factory('custom',['$resource',function($resource){
 return $resource(url,{act:'search'},
  {
   update:{
   method:'POST',//使用POST方式请求服务器
   params:{
   update:true
   },
   isArray:false //表示调用该方法后,服务器返回的数据可以不是一个数组
   }
  });
 }])
 .controller('myController',['$scope','custom',function($scope,custom){
 $scope.click=function(){
  //这里的id是放在url后面的,/self?action=search&id=1001
  custom.get({id:'1001'},function(resp0){
  $scope.r0=(resp0[0]=='1')?'查找成功':'查找失败';
  resp0.key='1001';
  // /self?action=update&update=true
  resp0.$update({act:'update'},function(resp1){
  $scope.r1=(resp0[0]=='1')?'更新成功':'更新失败';
  //这里的key是放在数据body体里面的
  resp1.key='1002';
  //self?action=save
  resp1.$save({act:'save'},function(resp2){
  $scope.r2=(resp0[0]=='1')?'保存成功':'保存失败';
  })
  })
  })
 }
 }])
 </script>

对应的服务器端文件,使用了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');
 }
 }
 })

总结

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

Javascript 相关文章推荐
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
js面向对象编程总结
Feb 16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
BootStrap Fileinput的使用教程
Dec 30 #Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 #Javascript
bootstrapValidator表单验证插件学习
Dec 30 #Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 #Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 #Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 #Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 #Javascript
You might like
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
js动态修改input输入框的type属性(实现方法解析)
2013/11/13 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
Python创建xml文件示例
2017/03/22 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python微信公众号开发简单流程实现
2020/03/09 Python
python用700行代码实现http客户端
2021/01/14 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
性能测试工程师的面试题
2015/02/20 面试题
营销与策划专业毕业生求职信
2013/11/01 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
家长给孩子的评语
2014/01/30 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
毕业大学生自荐信
2014/06/17 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
大学生自荐材料范文
2014/12/30 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python