关闭

angularjs之$resource中的资源的方法

144人阅读 评论(0) 收藏 举报

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

比如有一个$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',等,这里的请求方式可以自定义方法,$resource()返回的对象的get,query,save,remove,delete里用到的只有'GET','POST','DELETE'三种请求方式,但是这里自定义的方法,可以使用$http的所以请求方式. 所以,如果要自定义请求方式,也是通过自定义方法来创建的.

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

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

3.charge属性值除了2里说到的三个属性,还有所有$http里所有可配置的项:

   headers:,

   transformRequest:,

   transformResponse:,

   cache:,

   timeout:,

   withCredentials:

这些项的意思和具体怎么配置,请参考之前将$http的文章,他们是一致的.

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]);
});
0
0
查看评论

angularjs$resource的5种基本操作方法

get,save,query,delete,remove五种基本操作详解及扩展 【HTTP GET类型的方法】   ①GET请求:  get(params,successFn,errrorFn)    不定义具体的参数,get()请求通常被用来获取单个资...
  • javascript_panjialin
  • javascript_panjialin
  • 2016-12-08 16:23
  • 584

angularjs中$resource的使用

一、使用$resource    1、引入 angular-resource.min.js     2、定义模块时加载 ngResource       var app = angular.module('app...
  • lzyisaking
  • lzyisaking
  • 2016-02-18 11:16
  • 1744

angularjs中$resource对应的五种基本操作及扩展

get,save,query,delete,remove五种基本操作详解及扩展 【HTTP GET类型的方法】   ①GET请求:  get(params,successFn,errrorFn)    不定义具体的参数,get()请求通常被用来获取单个资...
  • win7system
  • win7system
  • 2016-07-09 15:35
  • 4431

AngularJS中使用$resource

这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。       REST是Representational State Transfer(表征状态转移...
  • hsany330
  • hsany330
  • 2016-11-10 10:36
  • 660

AngularJS学习(九) $resource服务 前后台交互ajax

要在项目中彻底的使用单入口的前端mvc框架来开发,那么都会把和后端交互获取数据改成异步Ajax,这样的话,后端就相当于一个WebServices,比较轻量级的方案就是RESTful,这个不是我们要讨论的内容,我们把注意力放在前端上:如何用AngularJS来和rest风格的WebServices进行...
  • Mooner_guo
  • Mooner_guo
  • 2015-01-07 14:15
  • 3380

Java中,关于资源Resource的定位问题

通过class的getResource方法,查找与给定类相关的资源。 URL java.lang.Class.getResource(String name) Finds a resource with a given name. The rules for searching ...
  • u013144121
  • u013144121
  • 2015-01-20 16:46
  • 1701

AngularJs $resource 高大上的数据交互

$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互。 需要注入 ngResource 模块。angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离。 这个可...
  • yzbben
  • yzbben
  • 2016-10-10 10:12
  • 634

AngularJs(四):$Http,$resource

一.使用$http $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success和error两个方法。例如代码: $http({    method:"GET"...
  • u014077165
  • u014077165
  • 2015-02-01 00:50
  • 5100

Android - 使用资源(resource)

使用资源(resource) 本文地址: http://blog.csdn.net/caroline_wendy/article/details/21036645 Android平台, 可以使用本地资源, 也可以使用系统资源; 使用静态R类访问资源, R类中包含一个静态子类, R类...
  • u012515223
  • u012515223
  • 2014-03-11 20:53
  • 2145

AngularJS中的$resource使用与Restful资源交互

1.AngularJS中的 $resource  这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。       REST是Represen...
  • he90227
  • he90227
  • 2016-01-15 21:09
  • 9133
    个人资料
    • 访问:17399次
    • 积分:331
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:51篇
    • 译文:0篇
    • 评论:0条