這個服務可以創建一個資源對象,我們可以用它非常方便地同支持RESTful的服務端數據源進行交互,當同支持RESTful的數據模型一起工作時,它就派上用場了。
REST是Representational State Transfer(表徵狀態轉移)的縮寫,是服務器用來智能化地提供數據服務的一種方式
1)我們首先需要引入ng-Resource 模塊,在angular之後
1 2 | <script src= "js/vendor/angular.js" ></script> <script src= "js/vendor/angular-resource.js" ></script> |
2) 在我們的應用中需要將其當做依賴進行引用
1 | angular.module( 'myApp' , [ 'ngResource' ]); |
3)如何使用?
$resource服務本身是一個創建資源對象的工廠,返回的$resource對象中包含了同後端服務器進行的交互的高層API.
var
User=$resource(
'/api/users/:userId'
,{userId:
'@id'
});
可以把User對象理解成同RESTful的後端服務進行交互的接口。
一、HTTP GET類型的方法
①GET請求: get(params,successFn,errrorFn)
不定義具體的參數,get()請求通常被用來獲取單個資源。
1 2 3 4 5 6 7 8 | //GET /api/users User.get( function (resp){ //處理成功 }, function (err){ //處理錯誤 }); |
如果參數中傳入了具名參數(我們例子中的參數是id),那麼get()方法會向包含id的URL發送請求:
1 2 3 4 5 6 | //發起一個請求:GET-->/api/users/123 User.get({id: '1234' }, function (resp){ //success }, function (error){ //fail }); |
②QUERY 請求:query向指定URL發送一個GET請求,並期望返回一個JSON格式的資源對象集合。
1 2 3 4 5 | //發起一個請求 User.query( function (users){ //讀取集合中的第一個用戶 var user=users[0]; }); |
query()和get()方法之間唯一的區別是AngularJS期望query()方法返回數組。
二、非HTTP GET類型的方法
1. save(params, payload, successFn, errorFn)
save方法向指定URL發送一個POST請求,並用數據體來生成請求體。save()方法用來在服務器上生成一個新的資源。 payload:代表請求發送的數據體
1 2 3 4 5 6 | //發送一個請求 with the body {name: 'Ari'} User.save({},{name: 'Ari' }, function (resp){ }, function (error){ }); |
2. delete(params, payload, successFn, errorFn)
delete方法會向指定URL發送一個DELETE請求,並用數據體來生成請求體。它被用來在服務器上刪除一個實例:
1 2 3 4 5 6 7 8 | // DELETE /api/users User. delete ({}, { id: '123' }, function (response) { // 處理成功的刪除響應 }, function (response) { // 處理非成功的刪除響應 }); |
3. remove(params, payload, successFn, errorFn)
remove方法和delete()方法的作用是完全相同的,它存在的意義是因爲delete是JavaScript的保留字,在IE瀏覽器中會導致額外的問題。
1 2 3 4 5 6 7 8 9 | // 發起一個請求: // DELETE /api/users User.remove({}, { id: '123' }, function (response) { // 處理成功的刪除響應 }, function (response) { // 處理非成功的刪除響應 }); |
三、$resource設置對象
$resource對常見的五種請求進行封裝,我們還可以對$resource進行擴展,這裏要擴展$resource我們需要傳入第三個參數,該參數是一個對象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $resource( '/api/users' ,{},{ sendEmail:{ method: '' , url: '' , params:{}, isArray:boolean, transformRequest:函數或者函數數組 transformResponse:函數或者函數數組 cache:布爾型或緩存對象 timeout:數值或promise對象 withCredentials:布爾類型 responseType:字符串,用來設置XMLHttpRequestResponseType屬性 } }) |
四、$resource實例
示例1:簡單的CRUD --摘自點擊打開鏈接 這哥們總結的很全面
1 2 3 4 5 | var User = $resource( '/user/:userId' , {userId: '@id' }); var user = User.get({userId:123}, function () { user.abc = true ; user.$save(); }); |
注意上面代碼中的”@id”和”$save()”,使用了@後,當執行$save時,user.id就會被當做userId的值來發送請求。
以這種方式封裝Ajax,不僅僅使得代碼更加優雅,而且還能配合ng的視圖渲染:當數據沒有返回之前,模板引擎不會渲染,一旦異步數據獲取完成,會自動觸發模板引擎的渲染機制把數據呈現到視圖中。
怎麼理解呢?
簡單來說,上述方法在返回數據時,響應會被一個原型類包裝,並在實例中添加一些有用的方法。
有以下三個實例方法:
- $save()
- $remove()
- $delete()
這三個方法可以在資源實例上被調用,如上所示。需要格外注意,這三個方法在調用時$resource對象會立即返回一個空的數據引用。由於所有方法都是異步執行的,所以這個數據是一個空的引用,並不是真實的數據。
因此,雖然獲取實例的調用看起來是同步的,但實際上不是。事實上,它只是數據的引用,當數據從服務器返回後AngularJS會自動將數據填充進去。
比如:
1 2 3 | // $scope.user將爲空 $scope.user = User.get({id: '123' }); |
這些方法也提供了回調函數,在數據返回時按預期的方式調用:
1 2 3 4 5 | User.get({id: '123' }, function (user) { $scope.user = user; }); |
五、$resource服務
服務配置方法:$resource(url,[paramDefaults],[ actions]);
我們也可以將$resource服務當做自定義服務的基礎。
1 2 3 | angular.module( 'testApp' , [ 'ngResource' ]),factory( 'UserService' ,[ '$resource' , function ($resource){ return $resource(url,{},{}); }]); |
舉例:參考自AngularJS中的RESTful資源
1 2 3 4 5 6 7 8 9 10 11 | app.factory( 'CreditCard' , [ '$resource' , function ($resource) { return $resource( '/usr/:userId/card/:cardId' , {userId: 123, cardId: '@id' }, { charge: { //自定義的方法 method: 'POST' , params: {charge: true }, //表示需要作爲請求的一部分來傳遞的參數 isArray: false } }) }]); |
在這裏我們指定了一個charge方法,可以通過傳遞一個對象來配置這個方法,對象中的key就是需要暴露的方法名稱。配置項中需要指定的內容有:請求的類型(GET、POST等)、需要作爲請求的一部分來傳遞的參數(在這個例子中就是charge=true),以及返回的結果是否是一個數組(在這個例子中不是)。一旦做完這些事情之後,你就可以自由地調用CreditCard.charge()了。
說明:這是一種非常靈活的編碼風格,根據上面的代碼,對於配置對象{charge: {method: 'POST', params: {charge: true}, isArray: false},Angular會將其解析成一個方法,然後把這個方法綁定到返回的Restful對象上,上面的配置對象解釋之後的方法爲:
1 2 3 | CreditCard.charge = function (charge, isArray) { //這裏是方法體 } |
對於AngularJS應用來說,最常見的處理流程是:到服務器上獲取數據,然後把數據賦值給變量,再把數據顯示到模板中。這種快捷方式是非常好用的。在控制器代碼中,你唯一要做的事情就是發起對服務端的調用,把返回值賦給正確的作用域變量,然後讓模板自動負責渲染它。由於card變量是使用{{}}這種數據綁定技術綁定到視圖上的,所以一開始給它一個空值並沒有問題,等異步響應返回之後再把結果賦給它。這時候Angular的數據綁定機制會立即發現數據發生了變化,然後會自動通知視圖進行刷新。從這裏可以看到,使用Angular框架時,對異步調用的很多處理方式已經發生了細微的變化。
五、本人在項目中應用實例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | define([ '{angular}/angular' , '{angular-sanitize}/angular-sanitize' , '{w20-ui}/modules/select' ], function (angular) { 'use strict' ; var hubComponentImport = angular.module( 'hubComponentImport' , [ 'ui.select' , 'ngSanitize' ]); hubComponentImport.controller( 'hubImportComponentCtrl' , [ '$scope' , '$routeParams' , '$timeout' , '$resource' , '$location' , function ($scope, $routeParams, $timeout,$resource,$location) { $scope.editComponent = function () { //初始化參數 $scope.component= {tags:[]}; //利用$resource自定義post方法 var Components= $resource( 'rest/components/url' ,{},{ getComponent: {method: 'POST' } }); //接收頁面輸入數據,併發送請求 var component= Components.getComponent({},{url:$scope.componentUrl}, function (data){ $scope.component = data; }); //轉向edit.html頁面 $scope.searchComponent = 'manage/views/edit.html' ; }; }]); return { angularModules: [ 'hubComponentImport' ] }; }); |
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。