angularJS $resource與後臺restapi的對應關係

REST（表徵性狀態傳輸，Representational State Transfer）是Roy Fielding博士在2000年他的博士論文中提出來的一種軟件架構風格。RESTful風格的設計不只具備更好的可讀性（Human Readable），並且易於作緩存以及服務器擴展（scalability）。REST風格體如今URL設計上：

• 每一個URL對應一個資源
• 對資源的不一樣操做對應於HTTP的不一樣方法
• 資源表現形式（representation）經過Accept和Content-Type指定

AngularJS提供了$resourceService來更方便地與RESTful服務器API進行交互，能夠方便地定義一個REST資源，而沒必要手動全部的聲明CRUD方法。

參考文檔： https://docs.angularjs.org/api/ngResource/service/$resource

Resource Factory

$resourceService定義在ngResourceModule中，須要在你的HTML中引入這個Module對應的JS，同時在你的APP中添加這樣一個依賴：

var app = angular.module('helloApp, ['ngResource']); 

而後爲資源創建一個Factory：

app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id'); }]); 

固然，你也能夠不把$esource的實例放到Factory裏，直接在控制器中存起來：var Notes = $resource('/notes/:id)。

CRUD

在你的控制器中就能夠對資源進行增刪改查了：

app.controller('NotesCtrl', ['$scope', 'Notes', function($scope, Notes) { var notes = Notes.query(function(){ // GET: /notes // Response: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]; var first = notes[0]; first.content = 'halo'; first.$save(); //update效果 // POST: /notes/1 {id: 1, content: 'halo'} // Response: {id: 1, content: 'halo'} second.$delete(); // DELETE: /notes/2 }); var note = new Notes({content: 'xxx'}); note.$save(); // insert效果 // POST: /notes // Response: {id: 3, content: 'xxx'} }]); 

PUT 操做

$resource提供了五種默認操做：get, query, save, remove, delete。你能夠配置一個update操做來完成HTTP PUT：

app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id', null, { update: { method:'PUT' } }); }]); 

如今，你能夠在控制器中獲取一個note並更新它：

var note = Notes.get({ id: 3}), $id = note.id; note.content = 'yyy'; Notes.update({ id:$id }, note); // PUT /notes/3 {id: 3, content: 'yyy'} 

如今你的Notes有六種操做了。這些操做有兩種調用方式：

1. 經過資源類調用，例如：Notes.update({id: xxx})；
2. 經過資源實例調用，例如：note.$update()，此時操做名需加前綴$。

具體的調用參數可參考文檔：

HTTP GET "class" actions: Resource.action([parameters], [success], [error])     get資源類調用

non-GET "class" actions: Resource.action([parameters], postData, [success], [error])   非get（update，post，delete）資源類調用

non-GET instance actions: instance.$action([parameters], [success], [error])    非get資源實例調用

其中，success參數爲(value, responseHeaders)，error參數爲(httpResponse)。

屬性/URL映射

上述例子中，咱們看到note對象的id屬性會映射到URL中的:id（/notes/:id）。若是你的業務更加複雜，能夠手動配置這個映射關係。例如：

var Notes = $resouce('/users/:userId/notes/:noteId', { noteId: '@id', userId: '@owner' } 

將會讀取note的owner和id屬性來生成URL，好比刪除note時：

// note === {id: 123, owner: 'alice', content: 'hello'} note.$delete(); // DELETE: /users/alice/notes/123 

在構造$resource時，多於的屬性映射會成爲URL Query。例如：

var Notes = $resouce('/notes/:id', { id: '@id', user: '@owner' }); // note === {id: 123, owner: 'alice', content: 'hello'} note.$delete(); // DELETE: /notes/123?user=alice 

REST操做的聲明和調用中，多於的屬性會成爲URL Query。例如：

var Notes = $resouce('/notes/:id', {id: '@id'}, { update: {method: 'PUT', operator: 'bob'} }); // note === {id: 123, content: 'hello'} note.$update({trusted: true}); // PUT: /notes/123?operator=bob&trusted=true {id: 123, content: 'hello'} 

響應轉換

有時基於既定的後臺設計，沒法提供徹底RESTful的API，好比/notes返回的是一個分頁器對象，而非數組。此時，咱們仍然可使用$resource，但須要設置響應轉換回調。例如：

var Notes = $resouce('/notes/:id', null, { pager: { method: 'GET', transformResponse: function(data, headers){ // Server respond: // data = {currentPage: 1, // totalPage: 20, // pageSize: 2, // content: [{id: 1, content: 'hello'}, {id: 2, content: 'world'}]} var pager = JSON.parse(data); return pager.content; } } }); var notes = Notes.query(function(){ // GET: /notes // notes === [{id: 1, content: 'hello'}, {id: 2, content: 'world'}] }); 

相似響應重寫，你還能夠設置請求轉換transformRequest。

雖然$resource的設計能夠支持絕大多數的URL和內容表示設計，但若是你發現$resource的使用過程極其複雜，那多是你的服務器API並不知足RESTful風格。

---

除非註明，本博客文章均爲原創，轉載請以連接形式標明本文地址： http://harttle.com/2015/06/05/angular-resource.html