AngularJS中如何使用$resource

這篇文章主要為大家展示了“AngularJS中如何使用$resource”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“AngularJS中如何使用$resource”這篇文章吧。

REST是Representational State Transfer（表征狀態(tài)轉(zhuǎn)移）的縮寫，是服務(wù)器用來智能化地提供數(shù)據(jù)服務(wù)的一種方式  

1）我們首先需要引入ng-Resource  模塊，在angular之后

 <script src="js/vendor/angular.js"></script>
  <script src="js/vendor/angular-resource.js"></script>

2） 在我們的應(yīng)用中需要將其當(dāng)做依賴進(jìn)行引用

angular.module('myApp', ['ngResource']);

3）如何使用？

$resource服務(wù)本身是一個(gè)創(chuàng)建資源對象的工廠，返回的$resource對象中包含了同后端服務(wù)器進(jìn)行的交互的高層API.

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

可以把User對象理解成同RESTful的后端服務(wù)進(jìn)行交互的接口。

一、HTTP GET類型的方法

①GET請求：  get(params,successFn,errrorFn)

不定義具體的參數(shù)，get()請求通常被用來獲取單個(gè)資源。

//GET /api/users
  User.get(function(resp){
  //處理成功 
  
  },function(err){
  //處理錯(cuò)誤
  
  });

如果參數(shù)中傳入了具名參數(shù)（我們例子中的參數(shù)是id），那么get()方法會(huì)向包含id的URL發(fā)送請求：   

  //發(fā)起一個(gè)請求：GET-->/api/users/123
  User.get({id:'1234'},function(resp){
    //success
  },function(error){
    //fail
  });

②QUERY 請求：query向指定URL發(fā)送一個(gè)GET請求，并期望返回一個(gè)JSON格式的資源對象集合。

 //發(fā)起一個(gè)請求
 User.query(function(users){
  //讀取集合中的第一個(gè)用戶
  var user=users[0];
 });

query()和get()方法之間唯一的區(qū)別是AngularJS期望query()方法返回?cái)?shù)組。 

二、非HTTP GET類型的方法    

1. save(params, payload, successFn, errorFn)

save方法向指定URL發(fā)送一個(gè)POST請求，并用數(shù)據(jù)體來生成請求體。save()方法用來在服務(wù)器上生成一個(gè)新的資源。 payload:代表請求發(fā)送的數(shù)據(jù)體

  //發(fā)送一個(gè)請求 with the body {name: 'Ari'}
  User.save({},{name:'Ari'},function(resp){
  
  },function(error){
  
  });

2. delete(params, payload, successFn, errorFn)   

delete方法會(huì)向指定URL發(fā)送一個(gè)DELETE請求，并用數(shù)據(jù)體來生成請求體。它被用來在服務(wù)器上刪除一個(gè)實(shí)例：  

  // DELETE /api/users
  User.delete({}, {
    id: '123'
  }, function(response) {
  // 處理成功的刪除響應(yīng)
  }, function(response) {
  // 處理非成功的刪除響應(yīng)
  });

3. remove(params, payload, successFn, errorFn)

remove方法和delete()方法的作用是完全相同的，它存在的意義是因?yàn)閐elete是JavaScript的保留字，在IE瀏覽器中會(huì)導(dǎo)致額外的問題。  

  // 發(fā)起一個(gè)請求：
  // DELETE /api/users
  User.remove({}, {
   id: '123'
  }, function(response) {
  // 處理成功的刪除響應(yīng)
  }, function(response) {
  // 處理非成功的刪除響應(yīng)
  });

三、$resource設(shè)置對象

$resource對常見的五種請求進(jìn)行封裝，我們還可以對$resource進(jìn)行擴(kuò)展，這里要擴(kuò)展$resource我們需要傳入第三個(gè)參數(shù)，該參數(shù)是一個(gè)對象。

$resource('/api/users',{},{ 
 sendEmail:{ 
  method:'', 
  url:'', 
  params:{}, 
  isArray:boolean, 
  transformRequest:函數(shù)或者函數(shù)數(shù)組 
  transformResponse:函數(shù)或者函數(shù)數(shù)組 
  cache:布爾型或緩存對象 
  timeout:數(shù)值或promise對象 
  withCredentials:布爾類型 
  responseType:字符串，用來設(shè)置XMLHttpRequestResponseType屬性 
 } 
})

四、$resource實(shí)例

示例1：簡單的CRUD --摘自點(diǎn)擊打開鏈接 這哥們總結(jié)的很全面

var User = $resource('/user/:userId', {userId:'@id'});  
var user = User.get({userId:123}, function() {  
 user.abc = true;  
 user.$save();  
});

注意上面代碼中的”@id”和”$save()”，使用了@后，當(dāng)執(zhí)行$save時(shí)，user.id就會(huì)被當(dāng)做userId的值來發(fā)送請求。

以這種方式封裝Ajax，不僅僅使得代碼更加優(yōu)雅，而且還能配合ng的視圖渲染：當(dāng)數(shù)據(jù)沒有返回之前，模板引擎不會(huì)渲染，一旦異步數(shù)據(jù)獲取完成，會(huì)自動(dòng)觸發(fā)模板引擎的渲染機(jī)制把數(shù)據(jù)呈現(xiàn)到視圖中。

 怎么理解呢？

簡單來說，上述方法在返回?cái)?shù)據(jù)時(shí)，響應(yīng)會(huì)被一個(gè)原型類包裝，并在實(shí)例中添加一些有用的方法。

有以下三個(gè)實(shí)例方法：

• $save()

• $remove()

• $delete()

這三個(gè)方法可以在資源實(shí)例上被調(diào)用，如上所示。需要格外注意，這三個(gè)方法在調(diào)用時(shí)$resource對象會(huì)立即返回一個(gè)空的數(shù)據(jù)引用。由于所有方法都是異步執(zhí)行的，所以這個(gè)數(shù)據(jù)是一個(gè)空的引用，并不是真實(shí)的數(shù)據(jù)。

因此，雖然獲取實(shí)例的調(diào)用看起來是同步的，但實(shí)際上不是。事實(shí)上，它只是數(shù)據(jù)的引用，當(dāng)數(shù)據(jù)從服務(wù)器返回后AngularJS會(huì)自動(dòng)將數(shù)據(jù)填充進(jìn)去。

比如：

  // $scope.user將為空

  $scope.user = User.get({id: '123'});

這些方法也提供了回調(diào)函數(shù)，在數(shù)據(jù)返回時(shí)按預(yù)期的方式調(diào)用：

 User.get({id: '123'}, function(user) {

  $scope.user = user;

  });

五、$resource服務(wù)

服務(wù)配置方法：$resource(url，[paramDefaults]，[ actions]);  

我們也可以將$resource服務(wù)當(dāng)做自定義服務(wù)的基礎(chǔ)。

 angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
  return $resource(url,{},{});
 }]);

舉例：參考自AngularJS中的RESTful資源

app.factory('CreditCard', ['$resource', function($resource) { 
  return $resource('/usr/:userId/card/:cardId', 
  {userId: 123, cardId: '@id'}, 
  { 
  charge: {   //自定義的方法 
    method: 'POST',  
    params: {charge: true}, //表示需要作為請求的一部分來傳遞的參數(shù) 
    isArray: false 
    } 
  }) 
  }]);

在這里我們指定了一個(gè)charge方法，可以通過傳遞一個(gè)對象來配置這個(gè)方法，對象中的key就是需要暴露的方法名稱。配置項(xiàng)中需要指定的內(nèi)容有：請求的類型（GET、POST等）、需要作為請求的一部分來傳遞的參數(shù)（在這個(gè)例子中就是charge=true），以及返回的結(jié)果是否是一個(gè)數(shù)組（在這個(gè)例子中不是）。一旦做完這些事情之后，你就可以自由地調(diào)用CreditCard.charge()了。

說明：這是一種非常靈活的編碼風(fēng)格，根據(jù)上面的代碼，對于配置對象{charge: {method: 'POST', params: {charge: true}, isArray: false}，Angular會(huì)將其解析成一個(gè)方法，然后把這個(gè)方法綁定到返回的Restful對象上，上面的配置對象解釋之后的方法為：

CreditCard.charge = function(charge, isArray) { 
//這里是方法體 
}

對于AngularJS應(yīng)用來說，最常見的處理流程是：到服務(wù)器上獲取數(shù)據(jù)，然后把數(shù)據(jù)賦值給變量，再把數(shù)據(jù)顯示到模板中。這種快捷方式是非常好用的。在控制器代碼中，你唯一要做的事情就是發(fā)起對服務(wù)端的調(diào)用，把返回值賦給正確的作用域變量，然后讓模板自動(dòng)負(fù)責(zé)渲染它。由于card變量是使用{{}}這種數(shù)據(jù)綁定技術(shù)綁定到視圖上的，所以一開始給它一個(gè)空值并沒有問題，等異步響應(yīng)返回之后再把結(jié)果賦給它。這時(shí)候Angular的數(shù)據(jù)綁定機(jī)制會(huì)立即發(fā)現(xiàn)數(shù)據(jù)發(fā)生了變化，然后會(huì)自動(dòng)通知視圖進(jìn)行刷新。從這里可以看到，使用Angular框架時(shí)，對異步調(diào)用的很多處理方式已經(jīng)發(fā)生了細(xì)微的變化。

五、本人在項(xiàng)目中應(yīng)用實(shí)例

define([ 
  '{angular}/angular', 
  '{angular-sanitize}/angular-sanitize', 
  '{w20-ui}/modules/select' 
], function (angular) { 
  'use strict'; 
 
  var hubComponentImport = angular.module('hubComponentImport', ['ui.select', 'ngSanitize']); 
 
  hubComponentImport.controller('hubImportComponentCtrl', ['$scope', '$routeParams', '$timeout','$resource','$location', function ($scope, $routeParams, $timeout,$resource,$location) { 
    $scope.editComponent = function () { 
      //初始化參數(shù) 
      $scope.component= {tags:[]}; 
      //利用$resource自定義post方法 
      var Components= $resource('rest/components/url',{},{ 
        getComponent: {method:'POST'} 
      }); 
      //接收頁面輸入數(shù)據(jù)，并發(fā)送請求 
      var component= Components.getComponent({},{url:$scope.componentUrl},function(data){ 
        $scope.component = data; 
      }); 
      //轉(zhuǎn)向edit.html頁面 
      $scope.searchComponent = 'manage/views/edit.html'; 
    }; 
     
     
  }]); 
 
  return { 
    angularModules: [ 'hubComponentImport' ] 
  }; 
});

以上是“AngularJS中如何使用$resource”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！