一、$resource服务介绍
$http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。 
$resource就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容:
- 资源在服务端的URL。
 
- 常用的请求参数类型。
- 一些附加的方法(你可以自动获得get、save、query、remove和delete方法),这些方法为对象模型包装了特定的功能和业务逻辑(例如信用卡对象的charge()方法)。
 
- 期望获得的响应类型(一个数组或者一个对象)。
 
- 协议头。
使用Angular所提供的$resource对象,你可以根据各种需求查询服务器;除此之外,你还可以把服务端返回的对象当成已经持久好的数据模型,你可以修改它们,并且可以把它们持久化。 
ngResource是一个独立的、可选的模块,因此,并没有默认包含在Angular中, 为了使用它,需要:
1、在加载的脚本文件中包含angular-resource.js. 
例如: <script src="/UploadFiles/2021-04-02/angular-resource.min.js">
2、在模块依赖声明中包含ngResource 
例如: angular.module(‘myapp', [‘ngResource'])
3、在需要的地方使用注入的$resource服务。 
格式: var obj=$resource(url,[,paramsDefaults],[,actions])
obj表示请求服务器指定url地址后返回的`$resource`对象,该对象中就包含了**与服务端进行数据交互的全部API**。
参数url表示请求服务器的地址,其中允许占位符变量,该变量必须以`:`为前缀
例如:
 `var obj=$resource('url"htmlcode">
 var obj=`$resource`('url"htmlcode">
 var boj=$resource('url"color: #ff0000">二、 $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保留字而导致的错误问题。
 <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"保存失败";
  });
 }
 }])
 </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"="+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"htmlcode">
 // /self"color: #ff0000">总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
                                
                                
                                
                                蝙蝠岛资源网 Design By www.hbtsch.com
                            
                        
                        
                            
                                广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
                                免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
                                如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
                            
                        
                        
                        
                        蝙蝠岛资源网 Design By www.hbtsch.com
                        
                            
                                
                                    
                                    
                                    
                                        暂无深入理解Angularjs中的$resource服务的评论...
                                    
                                
                            
                        
                        
                    RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
 
                        