上一篇中講到使用$http同服務器進行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數據交互。
安裝
ngResource模塊是一個可選的angularjs模塊，如果需要使用，我們要單獨引用js
<script type="text/javascript" src="/javascripts/angular-resource.js">
$resource服務的核心價值在於：提供給開發者與RESTful風格WebServices交互的更好的用戶體驗，它封裝了較為低級的$http，這樣就不需要前端開發者寫大量的異步請求代碼了。
$resource服務的配置方法：
$resource(url[, paramDefaults][, actions]);
url字符串類型，其中可以出現占位符，占位符要以“:”為前綴，如果系統的域名帶端口號的話，需要手動轉義：
http://www.codingcool.com:8080/api應該這么傳入：
$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）進行互動的所有方法，默認會包含如下默認方法：
{ 'get': {method:'GET'},
'save': {method:'POST'},
'query': {method:'GET', isArray:true},
'remove': {method:'DELETE'},
'delete': {method:'DELETE'}
};
這些方法會調用內置的$http服務~
當異步請求成功，數據從服務器端取回后，被封裝到一個$resource服務的一個對象實例中，這個對象可以被save,remove,delete方法直接操作，這種封裝並提供簡單的CRUD操作的方式，使得開發者可以感受到被尊重啊！呵呵~
var User = $resource('/user/:userId', {userId:'@id'});
var user = User.get({userId:123}, function() {
user.abc = true;
user.$save();
});
這種方式封裝Ajax，不僅僅使得代碼更加優雅，而且還能配合ng的視圖渲染：當數據沒有返回之前，模板引擎不會渲染，一旦異步數據獲取完成，會自動觸發模板引擎的渲染機制把數據呈現到視圖中。
最后，看一個簡單的例子：
<!DOCTYPE html> <html ng-app="Demo"> <head> <meta charset=utf-8 /> <title>ngResource DEMO</title> </head> <body> <div ng-controller="GeekListCtrl"> <ul> <li ng-repeat="geek in geeks"> <a href="#" ng-click="show({{geek.id}})">{{geek.name}}</a> </li> </ul> <div ng-show="user"> {{user.msg}} </div> </div> <script src="./src/angular.js"></script> <script src="./src/angular-resource.js"></script> <script type="text/javascript"> var Demo = angular.module('Demo', ["ngResource"]) .factory('Geek', function ($resource){ return $resource("geek/:geekId.json", {}, { query: { method: "GET", params: {geekId: "list"}, isArray: true } }); }); function GeekListCtrl($scope, Geek){ $scope.geeks = Geek.query(); $scope.show = function(id){ $scope.user = Geek.get({geekId: id}); }; } function GeekDetailCtrl($scope, $routeParams, Geek){ $scope.geek = Geek.get({geekId: $routeParams.geekId}, function(geek){ console.dir(geek); }); } </script> </body> </html>
應用$resource
我們並不是直接通過$resource服務本身同服務器通信，$resource是一個創建資源對象的工廠，用來創建同服務端交互的對象。
var User = $resource('/api/users/:userId', {userId:'@id'});
返回的User對象包含了同后端服務進行交互的方法，我們可以把User對象理解成同RESTFul的后端服務進行交互的接口。
該對象包含兩個get類型的方法以及三個非get類型的方法。
User.get({id:'123'}, successFn, errorFn);
該方法向url發送一個get請求，並期望一個json類型的響應。這里會向/api/users/123發送一個請求，successFn處理請求成功響應，errorFn處理錯誤。
User.query(params, successFn, errorFn)
同get()方法使用類似，一般用來請求多條數據。
save(params, payload, successFn, errorFn);
save方法會發起一個post請求，params參數用來填充url中變量，對象payload會作為請求體進行發送
delete(params, payload, successFn,errorFn)
delete方法一個DELETE請求，payload作為消息體進行發送
remove(params, payload, successFn, errorFn)
同delete類似，不同的是remove用來移除多條數據
通過$resource生成的對象來同服務器進行交互的時候，我們看可以定義處理成功以及處理失敗的函數，這些函數接受的參數不僅僅是簡單的對象，而是經過包裝之后的對象，會被添加$save(), $remove(), $delete三個方法，可以直接調用這三個方法來后服務端進行交互。
User.get({id:'123'}, function(user){
user.name = 'changeAnotherName';
user.$save();
//這里等價於User.save({id:'123'},{name:'changeAnotherName'})
});
擴展$resource
$resource對常見的五種請求進行封裝，我們還可以對$resource進行擴展。
這里要擴展$resource我們需要傳入第三個參數，該參數是一個對象。
$resource('/api/users',{},{
sendEmail:{
method:'',
url:'',
params:{},
isArray:boolean,
transformRequest:函數或者函數數組
transformResponse:函數或者函數數組
cache:布爾型或緩存對象
timeout:數值或promise對象
withCredentials:布爾類型
responseType:字符串，用來設置XMLHttpRequestResponseType屬性
}
})
我們也可以將$resource服務當做自定義服務的基礎。
angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
return $resource(url,{},{});
}]);