詳解AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互
$resource
創(chuàng)建一個(gè)resource對象的工廠函數(shù),可以讓你安全的和RESFUL服務(wù)端進(jìn)行數(shù)據(jù)交互。
安裝
ngResource模塊是一個(gè)可選的angularjs模塊,如果需要使用,我們要單獨(dú)引用js
<script type="text/javascript" src="/javascripts/angular-resource.js">
$resource應(yīng)用
我們并不是直接通過$resource服務(wù)本身同服務(wù)器通信,$resource是一個(gè)創(chuàng)建資源對象的工廠,用來創(chuàng)建同服務(wù)端交互的對象。
var User = $resource('/api/users/:userId', {userId:'@id'});
返回的User對象包含了同后端服務(wù)進(jìn)行交互的方法,我們可以把User對象理解成同RESTFul的后端服務(wù)進(jìn)行交互的接口。
該對象包含兩個(gè)get類型的方法已經(jīng)三個(gè)非get類型的方法。
User.get({id:'123'}, successFn, errorFn);
該方法向url發(fā)送一個(gè)get請求,并期望一個(gè)json類型的響應(yīng)。這里會(huì)向/api/users/123發(fā)送一個(gè)請求,successFn處理請求成功響應(yīng),errorFn處理錯(cuò)誤。
User.query(params, successFn, errorFn)
同get()方法使用類似,一般用來請求多條數(shù)據(jù)。
save(params, payload, successFn, errorFn);
save方法會(huì)發(fā)起一個(gè)post請求,params參數(shù)用來填充url中變量,對象payload會(huì)作為請求體進(jìn)行發(fā)送
delete(params, payload, successFn,errorFn)
delete方法一個(gè)DELETE請求,payload作為消息體進(jìn)行發(fā)送
remove(params, payload, successFn, errorFn)
同delete類似,不同的是remove用來移除多條數(shù)據(jù)
通過$resource生成的對象來同服務(wù)器進(jìn)行交互的時(shí)候,我們看可以定義處理成功以及處理失敗的函數(shù),這些函數(shù)接受的參數(shù)不僅僅是簡單的對象,而是經(jīng)過包裝之后的對象,會(huì)被添加$save() , $remove() , $delete三個(gè)方法,可以直接調(diào)用這三個(gè)方法來后服務(wù)端進(jìn)行交互。
User.get({id:'123'}, function(user){
user.name = 'changeAnotherName';
user.$save();
//這里等價(jià)于User.save({id:'123'},{name:'changeAnotherName'})
});
$resource擴(kuò)展
$resource對常見的五種請求進(jìn)行封裝,我們還可以對$resource進(jìn)行擴(kuò)展。
這里要擴(kuò)展$resource我們需要傳入第三個(gè)參數(shù),該參數(shù)是一個(gè)對象。
$resource('/api/users',{},{
sendEmail:{
method:'',
url:'',
params:{},
isArray:boolean,
transformRequest:函數(shù)或者函數(shù)數(shù)組
transformResponse:函數(shù)或者函數(shù)數(shù)組
cache:布爾型或緩存對象
timeout:數(shù)值或promise對象
withCredentials:布爾類型
responseType:字符串,用來設(shè)置XMLHttpRequestResponseType屬性
}
})
我們也可以將$resource服務(wù)當(dāng)做自定義服務(wù)的基礎(chǔ)。
angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
return $resource(url,{},{});
}]);
總結(jié)
以上就是關(guān)于AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互的全部內(nèi)容,希望這篇文章對大家學(xué)習(xí)或者使用AngularJS能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
AngularJS實(shí)踐之使用NgModelController進(jìn)行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復(fù)雜的一個(gè)部分,但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中,利用ngModel的controller來做雙向數(shù)據(jù)綁定,本文對大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,有需要的朋友們可以參考借鑒。2016-10-10
AngularJS入門心得之directive和controller通信過程
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件,接下來通過本文給大家介紹AngularJS入門心得之directive和controller通信過程,對angularjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
AngularJS ng-bind 指令簡單實(shí)現(xiàn)
詳細(xì)介紹RxJS在Angular中的應(yīng)用
使用AngularJS和PHP的Laravel實(shí)現(xiàn)單頁評(píng)論的方法

