詳解AngularJs中$resource和restfu服務端資料互動_AngularJS

$resource

建立一個resource對象的工廠函數，可以讓你安全的和RESFUL服務端進行資料互動。

安裝

ngResource模組是一個可選的angularjs模組，如果需要使用，我們要單獨引用js

<script type="text/javascript" src="/javascripts/angular-resource.js">

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

總結

以上就是關於AngularJs中$resource和restfu服務端資料互動的全部內容，希望這篇文章對大家學習或者使用AngularJS能有所協助，如果有疑問大家可以留言交流。