angular學習筆記(二十八-附1)-$resource中的資源的方法

標籤：style   blog   http   color   使用   os   io   資料   

通過$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也會被更新.