深入理解Angularjs中的$resource服务

 `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">总结

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

                                
                                

                                    angularjs,resource,angular,resource详解,angular,resource 
                                

                                    标签：
                                        
angularjs,resource,angular,resource详解,angular,resource
                                     

                            
                        
                        

                            

                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        

                            

                                
                                    上一篇
                                    
javascript 闭包详解及简单实例应用
                                
                            
                            

                                
                                    下一篇
                                    
BootStrap Fileinput的使用教程
                                
                            
                        
                        
                        

                            

                                
                                
                                    评论“深入理解Angularjs中的$resource服务”
                                
                            
                            

                                

                                    

                                        

                                            

                                                深入理解Angularjs中的$resource服务
                                            
                                            

                                                
                                            
                                            

                                                

                                                

                                                

                                            
                                            

                                        
                                    
                                    

                                    

                                        
暂无“深入理解Angularjs中的$resource服务”评论...