深入理解Angularjs中的$resource服務(wù)

更新時間：2016年12月31日 08:46:24 作者：Quiet-Night

大家可以知道在Angularjs中可以用$http同服務(wù)器進行通信，功能上比較簡單，AngularJS還提供了另外一個可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進行數(shù)據(jù)交互。這篇文章主要給大家深入的介紹了Angularjs中的$resource服務(wù)。

一、$resource服務(wù)介紹

$http服務(wù)提供的實現(xiàn)極為簡單和低級，可以用來發(fā)送XHR請求，同時它還為你提供了很大的可控性和靈活性。但是，在大多數(shù)情況下，我們需要處理對象，以及封裝了特定屬性和方法的對象模型，例如一個person對象（帶有詳細信息），或者一個信用卡對象。

$resource就是為這一功能而設(shè)計的。AngularJS中的resource(資源)允許我們用描述性的方式來定義對象模型，它可以描述以下內(nèi)容：

資源在服務(wù)端的URL。
常用的請求參數(shù)類型。
一些附加的方法（你可以自動獲得get、save、query、remove和delete方法），這些方法為對象模型包裝了特定的功能和業(yè)務(wù)邏輯（例如信用卡對象的charge()方法）。
期望獲得的響應(yīng)類型（一個數(shù)組或者一個對象）。
協(xié)議頭。

使用Angular所提供的$resource對象，你可以根據(jù)各種需求查詢服務(wù)器；除此之外，你還可以把服務(wù)端返回的對象當成已經(jīng)持久好的數(shù)據(jù)模型，你可以修改它們，并且可以把它們持久化。

ngResource是一個獨立的、可選的模塊，因此，并沒有默認包含在Angular中，為了使用它，需要：

1、在加載的腳本文件中包含angular-resource.js.

例如：<script src="http://cdn.bootcss.com/angular-resource/1.5.8/angular-resource.min.js"></script>

2、在模塊依賴聲明中包含ngResource

例如:angular.module(‘myapp', [‘ngResource'])

3、在需要的地方使用注入的$resource服務(wù)。

格式： var obj=$resource(url,[,paramsDefaults],[,actions])

obj表示請求服務(wù)器指定url地址后返回的`$resource`對象，該對象中就包含了**與服務(wù)端進行數(shù)據(jù)交互的全部API**。

參數(shù)url表示請求服務(wù)器的地址，其中允許占位符變量，該變量必須以`:`為前綴

例如：

 `var obj=$resource('url?action=:act');`
 `obj.$save{act:'save'}`

那么，在執(zhí)行save動作時，向服務(wù)端發(fā)送的實際地址就為`url?action=save`。

此外，可選參數(shù)`paramsDefaults`是一個對象，用于設(shè)置請求時的默認參數(shù)值，在發(fā)送請求時，該對象中的全部值將自動進行序列化，如遇占位符變量自動替換，并將結(jié)果添加到url請求之后

代碼如下：

 var obj=`$resource`('url?action=:act',{
 act:'save',
 a:'1',
 b:'2'
 });

執(zhí)行上述代碼后，向服務(wù)器發(fā)送的實際地址是`url?action=save&a=1&b=2`。

另外一個可選參數(shù)`actions`的功能是擴展默認資源動作，例如，可以在該對象中自定義新的方法：

 var boj=$resource('url?action=:act',{
 ...
 },{
 a:{
 method:'get'
 }
 });

然后就可以在$resource對象中直接調(diào)用在可選參數(shù)actions中自定義的方法a，即obj.$a()

二、 $resource服務(wù)所返回娿對象中所包含的5個與服務(wù)端交互常用API

1、$resource服務(wù)返回對象中的GET類型請求

包含兩個api，分別為get query，調(diào)用格式如下：

 var obj=$resource('url');
 //get()方法
 obj.get(params,successFn,errorFn);
 //query方法
 obj.query(params,successFn,errorFn);

這兩個api的請求參數(shù)相同，區(qū)別在于，**get返回值可以是單個資源，但是query必須返回一個數(shù)組或集合類的資源。**

2、$resource服務(wù)返回對象中的非GET類型請求

包含3個api，分別為save delete remove，調(diào)用格式如下：

 var obj=$resource('url');
 //save()方法
 obj.save(params,postData,successFn,errorFn);
 //delete方法
 obj.save(params,postData,successFn,errorFn);
 //remove方法
 obj.save(params,postData,successFn,errorFn);

其中，delete方法和remove方法作用享用，區(qū)別在于remove可以解決IE瀏覽器中delete是Javascript保留字而導(dǎo)致的錯誤問題。

 <div ng-controller='myController'>
 <ul>
 <li ng-repeat='item in items'>
 <span>{{item.Code}}</span>
 <span>{{item.Name}}</span>
 <span>{{item.Gender}}</span>
 </li>
 </ul>
 <div>
 Key: <input type="text" ng-model='key' />
 <button ng-click='save()'>保存</button>
 <div>{{result}}</div>
 </div>
 </div>
 <script type="text/javascript">
 angular.module('myapp',['ngResource'])
 .config(function($httpProvider){
 $httpProvider.defaults.transformRequest=function(obj){
 var arrStr=[];
 for(var p in obj){
  arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
 }
 return arrStr.join("&");
 };
 $httpProvider.defaults.headers.post={
  'Content-Type':'application/x-www-form-urlencoded'
 }
 })
 .controller('myController',['$scope','$resource',function($scope,$resource){
 var stus=$resource('/info');
 ///info?action=search
 stus.query({action:'search'},function(resp){
  $scope.items=resp;
 });
 $scope.save=function(){
  var data={
  key:$scope.key
  };
  stus.save({action:'save'},data,function(resp){
  $scope.result=(resp[0]=='1')?'保存成功':"保存失敗";
  });
 }
 }])
 </script>

對應(yīng)的服務(wù)器端文件，使用了Express架構(gòu)，核心代碼如下：

 //對于query請求
 app.get('/info',function(req,res){
 var info=[
 {Code:'1001',Name:'zhangsan',Gender:'female'},
 {Code:'1002',Name:'lisi',Gender:'male'}
 ];
 res.status(200).json(info);
 });
 //對于save請求
 app.post('/info',function(req,res){
 if(req.body.key=='1001'){
 res.send('1');
 }else{
 res.send('0')
 }
 });

三、在$resource服務(wù)中自定義請求方法

var obj=$resource(url,[,paramsDefaults],[,actions])

在第三個可選參數(shù)中，通過key/value的方式自定義。

 <div ng-controller='myController'>
 <div>
 <div>{{r0}}</div>
 <div>{{r1}}</div>
 <div>{{r2}}</div>
 <button ng-click='click()'>開始</button>
 </div>
 </div>
 <script type="text/javascript">
 var url='/self?action=:act';
 angular.module('myapp',['ngResource'])
 .config(function($httpProvider){
 $httpProvider.defaults.transformRequest=function(obj){
 var arrStr=[];
 for(var p in obj){
  arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
 }
 return arrStr.join("&");
 };
 $httpProvider.defaults.headers.post={
  'Content-Type':'application/x-www-form-urlencoded'
 }
 })
 .factory('custom',['$resource',function($resource){
 return $resource(url,{act:'search'},
  {
   update:{
   method:'POST',//使用POST方式請求服務(wù)器
   params:{
   update:true
   },
   isArray:false //表示調(diào)用該方法后，服務(wù)器返回的數(shù)據(jù)可以不是一個數(shù)組
   }
  });
 }])
 .controller('myController',['$scope','custom',function($scope,custom){
 $scope.click=function(){
  //這里的id是放在url后面的，/self?action=search&id=1001
  custom.get({id:'1001'},function(resp0){
  $scope.r0=(resp0[0]=='1')?'查找成功':'查找失敗';
  resp0.key='1001';
  // /self?action=update&update=true
  resp0.$update({act:'update'},function(resp1){
  $scope.r1=(resp0[0]=='1')?'更新成功':'更新失敗';
  //這里的key是放在數(shù)據(jù)body體里面的
  resp1.key='1002';
  //self?action=save
  resp1.$save({act:'save'},function(resp2){
  $scope.r2=(resp0[0]=='1')?'保存成功':'保存失敗';
  })
  })
  })
 }
 }])
 </script>

對應(yīng)的服務(wù)器端文件，使用了Express架構(gòu)，核心代碼如下：

 // /self?action=search&id=1001
 app.get('/self',function(req,res){
 if(req.query.action=='search'){
 console.log('req.params.id:'+req.params.id);
 if(req.query.id=='1001'){
 res.send('1');
 }else{
 res.send('0');
 }
 }
 });

 // /self?action=update&update=true /self?action=save
 app.post('/self',function(req,res){
 if(req.query.action=='update'){
 if(req.body.key=='1001' && req.query.update=='true'){
 res.send('1');
 }else{
 res.send('0');
 }
 }else if(req.query.action=='save'){
 if(req.body.key=='1002'){
 res.send('1');
 }else{
 res.send('0');
 }
 }
 })

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: