angularjs $resource restful api

AngularJS中的RESTful資源

palwo

發表於 2014-12-16 17:31:50

        $http服務提供了一個很是低級的實現，能夠用來發送XHR請求，同時它還爲你提供了很大的可控性和靈活性。可是，在大多數狀況下，咱們須要處理對象，以及封裝了特定屬性和方法的對象模型，例如一個person對象（帶有詳細信息），或者一個信用卡對象。

        在這些狀況下，若是咱們可以建立一個JS對象，並且它能夠理解並表明這種對象模型，是否是會很棒？若是咱們僅僅編輯這個對象的屬性，例如保存或者更新，那麼這些狀態會被持久化到服務端嗎？

        $resource就是爲這一功能而設計的。AngularJS中的resource(資源)容許咱們用描述性的方式來定義對象模型，它能夠描述如下內容：

        1.資源在服務端的URL。

        2.經常使用的請求參數類型。

        3.一些附加的方法（你能夠自動得到get、save、query、remove和delete方法），這些方法爲對象模型包裝了特定的功能和業務邏輯（例如信用卡對象的charge()方法）。

        4.指望得到的響應類型（一個數組或者一個對象）。

        5.協議頭。

        使用Angular所提供的$resource對象，你能夠根據各類需求查詢服務器；除此以外，你還能夠把服務端返回的對象當成已經持久好的數據模型，你能夠修改它們，而且能夠把它們持久化。

        ngResource是一個獨立的、可選的模塊。爲了使用它，須要：

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

b.在模塊依賴聲明中包含ngResource（例如，angular.module('myModule', ['ngResource'])）。

c.在須要的地方使用注入的$resource服務。

        在學習如何使用ngResource方法建立資源以前，咱們先來看看使用基本的$http服務建立相似的東西須要作些什麼事情。對於咱們的信用卡資源來講，除了要可以對它進行"change"（收費）操做以外，咱們還要可以get（獲取）、query（查詢）以及save（保存）信用卡。

        如下是一種可能的實現：

myAppModule.factory('CreditCard', ['http', function($http) {
 var baseUrl = '/user/123/card';
 return {
 get: function(cardId) {
 return $http.get(baseUrl + '/' + cardId);
},
 save: function(card) {
 var url = card.id ? baseUrl + '/' + card.id : baseUrl;
 return $http.post(url, card);
},
 query: function() {
 return $http.get(baseUrl);
},
 charge: function(card) {
 return $http.post(baseUrl + '/' + card.id, card, {params: {charge: true}});
}
};
}]);

        除了這種方式以外，還能夠簡單地建立一個Angular服務，這個服務將會經過如下方式來描述應用所提供的資源：

myAppModule.factory('CreditCard', ['$resource', function($resource) {
 return $resource('/usr/:userId/card/:cardId',
 {userId: 123, cardId: '@id'},
 {charge: {method: 'POST', params: {charge: true}, isArray: false});
}]);

        如今，只要向咱們AngularJS注射器請求一個CreditCard實例，咱們就能夠獲取一個Angular資源，它默認爲咱們提供了一些基礎的方法。下表列出了這些方法的內容以及它們的行爲，有了這些信息你就知道應該如何配置服務端了。         下面咱們來看一個信用卡的實例，這會讓咱們的思路更加清晰。

//假設CreditCard服務被注入到了這裏

//咱們能夠從服務端獲取一個集合，請求的路徑爲GET:/user/123/card
var cards = CreditCard.query();

//咱們還能夠在回調函數中獲取並使用單張信用卡
CreditCard.get({cardId: 456}, function(card) {
//每一個實例都是CreditCard類型
 expect(card instanceof CreditCard).toEqual(true);
 card.name ="J.Smith";
//非GET型的方法被映射到了實例上
card.$save();

//咱們自定義的方法也被映射上去了
card.$charge({amount:9.99});
//發起一個POST請求：/user/123/card/456?amount=9.99&charge=true
 //發送請求時傳遞的數據爲：{id:456, number: '1234', name: 'J.Smith'}
});

        這個例子涉及了比較多的內容，對於其中比較重要的內容依次介紹以下：

一.聲明

        不管是自已定義$resource，仍是使用正確的參數來調用注入的$resource函數，操做都很是簡單。

        $resource函數有一個必需的參數，便可用資源的URL地址，還有兩個可選的參數，即默認參數以及你想配置在資源上的額外動做。

        請注意URL是參數化的（用:來標識參數。:userId表示userId將會被替換成對應的文本，:cardId表示將會被cardId實參的值替換掉）。若是沒有傳遞參數，對應的標識符會被替換成空字符串。

        第二個參數負責處理每個請求中都會被髮送的默認值。在當前這個例子中，咱們會把常量123傳遞給userId。參數cardId更加有趣，「cardId是"@id."」表示的是，若是咱們正在使用一個從服務端返回的對象，那麼當調用這個對象上的任意方法時（例如調用對象的$save方法），對象上的id屬性值就會被賦給cardId參數。

        第三個參數是另外一個函數，咱們但願在自定義的資源上暴露這個函數。

 

二.自定義方法

        調用$resource時，傳遞的第三個參數是一個可選的。咱們但願在自已的資源上暴露的方法。

        在前面的例子中，咱們指定了一個charge方法，能夠經過傳遞一個對象來配置這個方法，對象中的key就是須要暴露的方法名稱。配置項中須要指定的內容有：請求的類型（GET、POST等）、須要做爲請求的一部分來傳遞的參數（在這個例子中就是charge=true），以及返回的結果是不是一個數組（在這個例子中不是）。一旦作完這些事情以後，你就能夠自由地調用CreditCard.charge()了

        說明：這是一種很是靈活的編碼風格，根據上面的代碼，對於配置對象{charge: {method: 'POST', params: {charge: true}, isArray: false}，Angular會將其解析成一個方法，而後把這個方法綁定到返回的Restful對象上，上面的配置對象解釋以後的方法爲：

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

 

三.別用回調！（除非你真的須要它們）

        第三個須要注意的內容是調用資源時的返回值類型。請再看一下CreditCard.query()調用，咱們直接把信用卡對象賦值給了card變量，而並無在回調函數裏面進和賦值。你可能會擔憂在對服務器進行異步請求的狀況下，這種代碼能運行嗎？

        你這種擔憂是合理的。但事實上，這段代碼徹底正確，而且可以運行。這裏發生的事情是，AngularJS賦給了card對象一個引用（一個對象或者數組，具體是什麼須要根據所指望的返回值類型而定），在將來的某個時間上，當對服務器的請求返回來以後，這個引用纔會被真正賦值。在些期間，引用對象一直是空的。

        對於AngularJS應用來講，最多見的處理流程是：到服務器上獲取數據，而後把數據賦值給變量，再把數據顯示到模板中。這種快捷方式是很是好用的。在控制器代碼中，你惟一要作的事情就是發起對服務端的調用，把返回值賦給正確的做用域變量，而後讓模板自動負責渲染它。因爲card變量是使用{{}}這種數據綁定技術綁定到視圖上的，因此一開始給它一個空值並無問題，等異步響應返回以後再把結果賦給它。這時候Angular的數據綁定機制會當即發現數據發生了變化，而後會自動通知視圖進行刷新。從這裏能夠看到，使用Angular框架時，對異步調用的不少處理方式已經發生了細微的變化。

        若是你有一些須要依賴於返回值才能執行的業務邏輯，那麼這種方法就不會奏效。在這種狀況下，你就須要使用回調函數，這個回調函數會在調用CreditCard.get()的時候被使用。

 

四.簡化服務端操做

        不管你使用返回值的快捷方式，仍是使用回調函數，都有一些關於返回對象的注意事項。返回值不是普通的JS對象，而是一個"resource"型的對象。這就意味着，除了服務端返回的數據以外，它上面還帶有一些附加的行爲（在這個例子中就是$save()和$charge()）。這樣可讓你更容易進行服務端調用，例如獲取數據、修改數據，以及把修改的內容持久化到服務端（也就是在不少應用中都很常見的CRUD操做）。

 

五.什麼時候可使用Angular資源

        只有服務端按照RESTful的方式工做的時候，你纔可使用Angular資源。對於信用卡場景，它須要：

        1.一個到/user/123/card的GET請求，它會返回用戶123的信用卡列表。

        2.一個到/user/123/card/15的GET請求，它會返回用戶123的ID爲15的信用卡。

        3.一個到/user/123/card的POST請求，在POST的數據中帶有信用卡信息，它將會爲用戶123的ID建立一張新的信用卡。

        4.一個到/user/123/card/15的POST請求，POST的數據中帶有信用卡信息，它將會更新用戶123的ID爲15的信用卡信息。

        5.一個到/user/123/card/15的DELETE請求，它將會刪除用戶123的ID爲15的信用卡信息。