zoukankan      html  css  js  c++  java
  • angular $resource模块

     

     

    上一篇中讲到使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。

    安装

    ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js 

    <script type="text/javascript" src="/javascripts/angular-resource.js">

    $resource服务的核心价值在于:提供给开发者与RESTful风格WebServices交互的更好的用户体验,它封装了较为低级的$http,这样就不需要前端开发者写大量的异步请求代码了。

    $resource服务的配置方法:

    $resource(url[, paramDefaults][, actions]); 

    url字符串类型,其中可以出现占位符,占位符要以“:”为前缀,如果系统的域名带端口号的话,需要手动转义:
    http://www.codingcool.com:8080/api应该这么传入: 

    $resource("http://www.codingcool.com\:8080/api");

    这种情况在ng的1.2.0rc1版本已经不存在了,端口号会被识别而不需要手工转义~~

    paramDefaults(可选)

    对象类型,用于设置参数的默认值,它设置的数值可以被actions(第三个参数)进行覆盖。如果设置的参数值是函数,那么该函数将在每次获取其值时被执行(有那么点废话的意思)。

    对于设置的没有出现在url模板(第一个参数)中的参数,将会以search query的方式添加,例如:
    如果url模板为/codingcool/:author,paramDefaults为{author:”kazaff”, profession:”geek”},那么最终的请求url会变成:
    /codingcool/kazaff?profession=geek

    如果参数值是以“@”开头的,那么其真实值将会从数据对象中提取,后面会有例子。

    actions(可选)

    对象类型,用来定义$resource提供的可以使用方法,声明细节和$http一样。

    下面再来看一下$resource的返回值:
    返回值的类型是对象,它包含了和指定服务api(即url)进行互动的所有方法,默认会包含如下默认方法: 

    { 'get':    {method:'GET'},  
      'save':   {method:'POST'},  
      'query':  {method:'GET', isArray:true},  
      'remove': {method:'DELETE'},  
      'delete': {method:'DELETE'}  
    }; 

      

    这些方法会调用内置的$http服务~

    当异步请求成功,数据从服务器端取回后,被封装到一个$resource服务的一个对象实例中,这个对象可以被save,remove,delete方法直接操作,这种封装并提供简单的CRUD操作的方式,使得开发者可以感受到被尊重啊!呵呵~

    var User = $resource('/user/:userId', {userId:'@id'});  
    var user = User.get({userId:123}, function() {  
      user.abc = true;  
      user.$save();  
    });  
    注意上面代码中的”@id”和”$save()”,使用了@后,当执行$save时,user.id就会被当做userId的值来发送请求。

    这种方式封装Ajax,不仅仅使得代码更加优雅,而且还能配合ng的视图渲染:当数据没有返回之前,模板引擎不会渲染,一旦异步数据获取完成,会自动触发模板引擎的渲染机制把数据呈现到视图中。

    最后,看一个简单的例子:

    AngularJS的$resource
    <!DOCTYPE html>  
    <html ng-app="Demo">  
    <head>  
    <meta charset=utf-8 />  
    <title>ngResource DEMO</title>  
    </head>  
    <body>  
        <div ng-controller="GeekListCtrl">  
            <ul>  
                <li ng-repeat="geek in geeks">  
                    <a href="#" ng-click="show({{geek.id}})">{{geek.name}}</a>  
                </li>  
            </ul>  
            <div ng-show="user">  
                {{user.msg}}  
            </div>  
        </div>  
         
        <script src="./src/angular.js"></script>  
        <script src="./src/angular-resource.js"></script>  
        <script type="text/javascript">  
            var Demo = angular.module('Demo', ["ngResource"])  
                        .factory('Geek', function ($resource){  
                            return $resource("geek/:geekId.json", {}, {  
                                query: {  
                                    method: "GET",  
                                    params: {geekId: "list"},  
                                    isArray: true  
                                }  
                            });  
                        });  
      
            function GeekListCtrl($scope, Geek){  
                $scope.geeks = Geek.query();  
                $scope.show = function(id){  
                    $scope.user = Geek.get({geekId: id});  
                };  
            }  
      
            function GeekDetailCtrl($scope, $routeParams, Geek){  
                $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){  
                    console.dir(geek);  
                });  
            }  
        </script>  
    </body>  
    </html>  

    应用$resource

    我们并不是直接通过$resource服务本身同服务器通信,$resource是一个创建资源对象的工厂,用来创建同服务端交互的对象。

    var User = $resource('/api/users/:userId', {userId:'@id'});

    返回的User对象包含了同后端服务进行交互的方法,我们可以把User对象理解成同RESTFul的后端服务进行交互的接口。

    该对象包含两个get类型的方法以及三个非get类型的方法。

    User.get({id:'123'}, successFn, errorFn);

    该方法向url发送一个get请求,并期望一个json类型的响应。这里会向/api/users/123发送一个请求,successFn处理请求成功响应,errorFn处理错误。

    User.query(params, successFn, errorFn)

    同get()方法使用类似,一般用来请求多条数据。

    save(params, payload, successFn, errorFn);

    save方法会发起一个post请求,params参数用来填充url中变量,对象payload会作为请求体进行发送

    delete(params, payload, successFn,errorFn)

    delete方法一个DELETE请求,payload作为消息体进行发送

    remove(params, payload, successFn, errorFn)

    同delete类似,不同的是remove用来移除多条数据

    通过$resource生成的对象来同服务器进行交互的时候,我们看可以定义处理成功以及处理失败的函数,这些函数接受的参数不仅仅是简单的对象,而是经过包装之后的对象,会被添加$save(), $remove(), $delete三个方法,可以直接调用这三个方法来后服务端进行交互。

    User.get({id:'123'}, function(user){
      user.name = 'changeAnotherName';
      user.$save();
    //这里等价于User.save({id:'123'},{name:'changeAnotherName'})
    });

    扩展$resource

    $resource对常见的五种请求进行封装,我们还可以对$resource进行扩展。

    这里要扩展$resource我们需要传入第三个参数,该参数是一个对象。

    $resource('/api/users',{},{
      sendEmail:{
        method:'',
        url:'',
        params:{},
        isArray:boolean,
        transformRequest:函数或者函数数组
        transformResponse:函数或者函数数组
        cache:布尔型或缓存对象
        timeout:数值或promise对象
        withCredentials:布尔类型
        responseType:字符串,用来设置XMLHttpRequestResponseType属性
      }
    })
    我们也可以将$resource服务当做自定义服务的基础。
    angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
    
        return $resource(url,{},{});
    
    }]);
  • 相关阅读:
    反转链表 16
    CodeForces 701A Cards
    hdu 1087 Super Jumping! Jumping! Jumping!(动态规划)
    hdu 1241 Oil Deposits(水一发,自我的DFS)
    CodeForces 703B(容斥定理)
    poj 1067 取石子游戏(威佐夫博奕(Wythoff Game))
    ACM 马拦过河卒(动态规划)
    hdu 1005 Number Sequence
    51nod 1170 1770 数数字(数学技巧)
    hdu 2160 母猪的故事(睡前随机水一发)(斐波那契数列)
  • 原文地址:https://www.cnblogs.com/feng18/p/5139084.html
Copyright © 2011-2022 走看看