[转]AngularJS的$resource

转自:http://blog.csdn.net/violet\_day/article/details/17403207

$http

$http服务是因$q劳动之,提供了promise封装,它承受一个布置对象参数,并返一个promise对象。同时,它还提供了2单艺术用来定义Promise回调:success
和 error。

 

[javascript] view
plaincopyAngularJS 1AngularJS 2

 

  1. $http({method:”GET”, url:”/someUrl”}).  
  2.     success(function(data, status, headers, config){  
  3.         //当异步请求成功返回响应时触发  
  4.     }).error(function(data, status, headers, config){  
  5.         //当发生特别时触发  
  6.     });  

 

 

出于常用之http请求虽那几种,$http服务实现了相应之便捷方法,比方说:
$http.get
$http.post
$http.put
$http.delete
$http.head
$http.jsonp

$http也每次要自动添加了HTTP
header,可透过$httpProvider.defaults.headers来配置相关内容。

$httpProvider.defaults.headers.common设置了有请求都见面蕴藏的腔信息:

Accept: application/json, text/plain, * / *
x-Requested-With: XMLHttpRequest

$httpProvider.defaults.headers.post设置了POST请求的默认请求头:

Content-Type: application/json

$httpProvider.defaults.headers.put设置了PUT请求的默认请求头:

Content-Type: application/json

此外,关于$http的cache特点,推荐看一下应声首文章。

那$http的系内容,就优先到这个结束。

 

而今,我们开看$resource,需要小心的凡,该服务需要我们手动加载angular-resource.js文件~
$resource服务之骨干价值在于:提供被开发者和RESTful风格WebServices交互的又好之用户体验,它包裹了较低级的$http,这样就非需前端开发者写大量之异步请求代码了。

$resource服务之布局方式:

 

[javascript] view
plaincopyAngularJS 3AngularJS 4

 

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

url

 

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

 

[javascript] view
plaincopyAngularJS 5AngularJS 6

 

  1. $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)进行互的兼具办法,默认会包含如下默认方法:

 

[javascript] view
plaincopyAngularJS 7AngularJS 8

 

  1. { ‘get’:    {method:’GET’},  
  2.   ‘save’:   {method:’POST’},  
  3.   ‘query’:  {method:’GET’, isArray:true},  
  4.   ‘remove’: {method:’DELETE’},  
  5.   ‘delete’: {method:’DELETE’}  
  6. };  

 

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

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

[javascript] view
plaincopyAngularJS 9AngularJS 10

 

  1. var User = $resource(‘/user/:userId’, {userId:’@id’});  
  2. var user = User.get({userId:123}, function() {  
  3.   user.abc = true;  
  4.   user.$save();  
  5. });  

留意点代码中的”@id”和”$save()”,使用了@后,当执行$save时,user.id就会见受看做userId的价来发送请求。

这种艺术封装Ajax,不仅仅让代码更加文雅,而且还会配合ng的视图渲染:当数没有回来之前,模板引擎不会见渲染,一旦异步数据获得成功,会自动触发模板引擎的渲染机制把多少表现到视图中。

末了,看一个概括的事例:

AngularJS的$resource

[html] view
plaincopyAngularJS 11AngularJS 12

 

  1. <!DOCTYPE html>  
  2. <html ng-app=”Demo”>  
  3. <head>  
  4. <meta charset=utf-8 />  
  5. <title>ngResource DEMO</title>  
  6. </head>  
  7. <body>  
  8.     <div ng-controller=”GeekListCtrl”>  
  9.         <ul>  
  10.             <li ng-repeat=”geek in geeks”>  
  11.                 <a href=”#” ng-click=”show({{geek.id}})”>{{geek.name}}</a>  
  12.             </li>  
  13.         </ul>  
  14.         <div ng-show=”user”>  
  15.             {{user.msg}}  
  16.         </div>  
  17.     </div>  
  18.      
  19.     <script src=”./src/angular.js”></script>  
  20.     <script src=”./src/angular-resource.js”></script>  
  21.     <script type=”text/javascript”>  
  22.         var Demo = angular.module(‘Demo’, [“ngResource”])  
  23.                     .factory(‘Geek’, function ($resource){  
  24.                         return $resource(“geek/:geekId.json”, {}, {  
  25.                             query: {  
  26.                                 method: “GET”,  
  27.                                 params: {geekId: “list”},  
  28.                                 isArray: true  
  29.                             }  
  30.                         });  
  31.                     });  
  32.   
  33.         function GeekListCtrl($scope, Geek){  
  34.             $scope.geeks = Geek.query();  
  35.             $scope.show = function(id){  
  36.                 $scope.user = Geek.get({geekId: id});  
  37.             };  
  38.         }  
  39.   
  40.         function GeekDetailCtrl($scope, $routeParams, Geek){  
  41.             $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){  
  42.                 console.dir(geek);  
  43.             });  
  44.         }  
  45.     </script>  
  46. </body>  
  47. </html>  

转自:

相关文章