Angular之$resource服务

1. $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()

2. $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必须返回一个数组或集合类的资源。**

1. $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')        }    });

4. 在$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');            }        }    })