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()
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  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保留字而导致的错误问题。
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
    <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>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

  对应的服务器端文件,使用了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')
        }
    });
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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>
 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

  对应的服务器端文件,使用了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');
            }
        }
    })
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值