首頁 > 開發者 > 網站開發

［轉］AngularJS的$resource

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：blog   http   color   os   io   使用   java   ar   strong   

轉自：http://blog.csdn.net/violet_day/article/details/17403207

$http

$http服務是基於$q服務的，提供了promise封裝，它接受一個設定物件參數，並返回一個promise對象。同時，它還提供了2個方法用來定義Promise回調：success 和 error。

 

[javascript] view plaincopy 
  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 plaincopy 
  1. $resource(url[, paramDefaults][, actions]);  


url

 

字串類型，其中可以出現預留位置，預留位置要以“:”為首碼，如果系統的網域名稱帶連接埠號碼的話，需要手動轉義：
http://www.codingcool.com:8080/api應該這麼傳入：

 

[javascript] view plaincopy 
  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 plaincopy 
  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 plaincopy 
  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 plaincopy 
  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>  

轉自：

［轉］AngularJS的$resource

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More