首页 > 代码库 > angular学习笔记(二十八-附1)-$resource中的资源的方法

angular学习笔记(二十八-附1)-$resource中的资源的方法

通过$resource获取到的资源,或者是通过$resource实例化的资源,资源本身就拥有了一些方法,比如$save,可以直接调用来保存该资源: 

比如有一个$resource创建的服务:

var service = angular.module(‘myRecipe.service‘,[‘ngResource‘]);service.factory(‘Recipe‘,[‘$resource‘,function($resource){    return $resource(‘/recipe/:id‘,{id:‘@id‘});}]);service.factory(‘loadRecipes‘,[‘Recipe‘,‘$q‘,function(Recipe,$q){    return function(){        var defer = $q.defer();        Recipe.query(function(recipes){            defer.resolve(recipes)        },function(err){            defer.reject(err)        });        return defer.promise    }}]);service.factory(‘loadRecipe‘,[‘Recipe‘,‘$q‘,‘$route‘,‘$routeParams‘,function(Recipe,$q,$route,$routeParams){    return function(){        var defer = $q.defer();        Recipe.get({id:$route.current.params.recipeId},function(recipe){            defer.resolve(recipe)        },function(err){            defer.reject(err)        });        return defer.promise    }}]);

然后我通过loadRecipe方法获取到了一个recipe,修改了recipe后需要对它进行提交保存,以下两种方式是一样的:

1. 通过$resource的save方法(第一个参数是请求提,第二个参数是请求完成后的回调)

        Recipe.save($scope.recipe,function(){            $location.path(‘/view/‘+$scope.recipe.id)        });

2. 由于recipe本身就是通过$resource获取的资源,所以它拥有$save方法,$save方法里的函数就是保存成功后的回调.

        $scope.recipe.$save(function(){            $location.path(‘/view/‘+$scope.recipe.id)        });

除了通过loadRecipe获取到的资源,通过$resource实例化的资源也有$save方法:

比如下面的recipe:

    $scope.recipe = new Recipe({        ingredients:[{}]    });    $scope.save = function(invalid){        if(invalid){            return false        }        Recipe.save($scope.recipe,function(recipe){            $location.path(‘/view/‘+recipe.id)        });    };

$resource()中第二个参数{id:‘@id‘},表示url中的:id 将会使用资源的id属性值,也就是recipe的id属性值.

 

还可以通过$resource()第三个参数来给资源自定义方法:

return $resource(‘/card/user/:userID/:id‘,{userID:123,id:‘@id‘},{charge:{method:‘POST‘,params:{charge:true},isArray:false}})

来分析一下这里的第三个参数 {charge:{method:‘POST‘,params:{charge:true},isArray:false}}

1.charge是自定义方法的名字,资源就可以通过$charge()来调用该自定义方法

2.charge属性值是一个json对象,里面有三个属性:

   method: 该方法的请求方式: ‘POST‘,‘GET‘,‘DELETE‘,‘PUT‘,等...

   params: 定义请求url后面的参数,这里是{charge:true},就会向url?charge=true发送请求

   isArray: 定义返回的数据的格式是否是数组

eg:

HttpREST.factory(‘cardResource‘,function($resource){    return $resource(‘/card/user/:userID/:id‘,{userID:123,id:‘@id‘},{charge:{method:‘POST‘,params:{charge:true},isArray:false}})});HttpREST.factory(‘httpCard‘,function($q,cardResource){    return {        getById:function(cardID){            var defer = $q.defer();            cardResource.get({id:cardID},function(data,headers){                defer.resolve(data);            },function(data,headers){                defer.reject(data);            });            return defer.promise        }    }});$scope.addCharge = function(){    $scope.card_1.then(function(card){         card.$charge({amount:100});    })}

注意,card_1得到的是promise对象,而不是资源本身,要获得实际的资源,要通过它的then方法里的函数的参数来获得.关于这个问题,请查看: 

http://www.cnblogs.com/liulangmao/p/3907307.html

$charge里的参数表示url后面的参数,也就是说:

card.$charge({amount:100}) 向/card/user/123/1?charge=turn&amount=100发送了post请求,请求体就是card

请求url里的1是因为在$resource()第二个参数中配置了{id:@id},所以就是card的id,

请求参数是charge=true是因为在$resource()第三个参数中配置了{charge:{params:{charge:true}}
请求方式是post是因为在$resource()第三个参数中配置了{charge:{method:‘POST‘,params:{charge:true}}}

请求参数是amount=100是因为在调用card.$charge()的时候传入了参数{amount:100}

资源的方法还有一个特性: 在请求完成后,会自动用返回值来填充调用方法的资源,继而更新视图.无需在回调手动处理:

eg: 

html:

  <button ng-click="addCharge()">给建设银行的卡充值100元</button>  <br/>  <span>{{card_1[‘name‘]}}</span>  <span>{{card_1[‘amount‘]}}</span>  <br/>

js:

    $scope.addCharge = function(){        $scope.card_1.then(function(card){            card.$charge({amount:100});        })    }

node:

app.post(‘/card/user/123/:id‘,function(req,res){    var index = req.params.id ? req.params.id-1 : cards.length;    var query = url.parse(req.url,true)[‘query‘];    if (query.charge){        cards[index][‘amount‘]+= Number(query[‘amount‘])    }    else {        cards[index] = req.body;    }    res.send(cards[index]);});

点击充值后,后台会给建设银行卡添加100元,然后再把建设银行卡这个资源返回给客户端:

点击按钮后:

我们可以看到,在card.$charge({amount:100})这个调用中,我们并没有书写回调来改变$scope.card_1,但是视图里card_1[‘amount‘]确实发生了变化,原因是,

angular自动将返回值填充了card,而card是card_1的$$v属性值(关于$$v请查看http://www.cnblogs.com/liulangmao/p/3907307.html),所以视图里的card_1也会被更新.