深究AngularJS(3)——$resource詳解

安裝

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的視圖渲染:當數據沒有返回之前,模板引擎不會渲染,一旦異步數據獲取完成,會自動觸發模板引擎的渲染機制把數據呈現到視圖中。

最後,看一個簡單的例子:

AngularJS的$resource

<!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,{},{});
}]);


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章