AngularJS 教學 - $resource service

這篇要來介紹一下 AngularJS 提供的一個 Service，就是 $resource

$resource 讓你能夠容易地和後端的 RESTful Service 做溝通，以便建構出一個 CRUD 的應用

而 $resource 也是建構在 $http 之上，其中 $http 提供了 AngularJS 一個執行 Ajax 的方式

如果對 $http 不熟的可以看 AngularJS 教學 - Ajax、AngularJS 教學 - Ajax(1)

接下來就開始介紹   如何利用 $resource 來與 RESTful Service 溝通


1.準備 angular-resource.js
首先要使用 $resource，需要先額外引入 angular-resource.js 到你的 HTML 內

因為 $resource 並不在原本 AngularJS 核心的 JS 檔案內，所以才需要額外引入 JS 檔

2.一個 Todo REST 範例

URL	Method	Body	Result
/todos	GET	Nothing	Get all Todos
/todos	POST	Todo JSON String	Add a Todo
/todos/:id	GET	Nothing	Get a Todo by id
/todos/:id	PUT	Todo JSON String	Update a Todo
/todos/:id	DELETE	Nothing	Delete a Todo

3.利用 $resource 建立一個 Todo Service

          

angular.module("todoApp.services", ["ngResource"]) .factory("Todo", function($resource){ return $resource('todos/:_id'); });

          

上面的程式利用 factory 建立了一個 Todo 的 Service，方便後續其他的 Controller 可以直接注入並使用

4.CRUD 操作
接下來就可以在 Controller 中執行一些 Todo Service 的操作

          

angular.module("todoApp.controllers", []) .controller("TodoCtrl", function($scope, Todo){ // 查詢所有的 todos $scope.todos = Todo.query(); // 取得 id 為 1 的 todo $scope.todo = Todo.get({id: '1'}); // 新增一個 todo $scope.addTodo = function(){ var todo = new Todo(); todo.name = $scope.name; todo.owner = $scope.owner; todo.priority = $scope.priority; todo.$save(function(){ $scope.todos.push(todo); }); }; // 刪除一個 todo $scope.deleteTodo = function(idx){ $scope.todos[idx].$remove(function(res){ $scope.todos.forEach(function(p, index) { if (index == idx) $scope.todos.splice(index, 1); }); }); }; }); 
上面的範例一開始利用 Todo.query() 來查詢出所有的 Todo 項目

因此透過呼叫 query() 方法會用 GET 的方式請求 /todos 這個 URL

接下來用 Todo.get({id: '1'}) 來找出 id 為 1 的 Todo 項目

因此透過呼叫 get()方法會用 GET 的方式請求 /todos/1 這個 URL

再來如果要新增一個 Todo 項目，可以利用 new 這個關鍵字 var todo = new Todo()

並用  todo.$save() 來新增這個 Todo 項目

因此透過呼叫 $save() 方法會用 POST 的方式請求 /todos 這個 URL

最後利用 todo.$remove() 來刪除一個 Todo 項目

因此透過呼叫 $remove() 方法會用 DELETE 的方式來請求 /todos/1 這個 URL

到目前為止已經介紹了如何"查詢"、"新增"與"刪除"，還缺一個"更新"

在前面有提到 REST 的更新 (update) 要發 PUT 的請求

我們必須要客製化一下剛剛的 Todo Service，如下：
angular.module("todoApp.services", ["ngResource"]) .factory("Todo", function($resource){ return $resource('todos/:id', {id:'@_id'}, { update: { method: 'PUT' } }); }); //controller... $scope.todo = Todo.get({id: '1'}); $scope.updateTodo = function(){ $scope.todo.$update(); };
注意上面的 $resource，額外多傳了兩個參數

第一個參數依舊是 RESTful 的 URL 

第二個參數是用來告訴 :id 在刪除($delete)或是更新($update)時，URL 的 :id 值要從物件的哪個屬性取得

從範例可以看到要從物件的 _id 屬性取得，這樣 AngularJS 發出刪除或是更新的請求時URL 中的 :id 才會有值

而第三個參數則是讓 AngularJS 再發出更新的請求時會以 PUT 的方式請求 /todos/:id


5.結論
AngularJS 提供了 $resource 這個 Service 讓開發者能夠與後端的 RESTful 溝通

如果不想透過 $resource，你也是可以利用 $http

之後再寫幾個關於 $resource 的範例

AngularJS 與 Java RESTful 範例  AngularJS 教學 - Java RESTful 範例