詳解AngularJs中$resource和restfu服務端數(shù)據(jù)交互
$resource
創(chuàng)建一個resource對象的工廠函數(shù),可以讓你安全的和RESFUL服務端進行數(shù)據(jù)交互。
安裝
ngResource模塊是一個可選的angularjs模塊,如果需要使用,我們要單獨引用js
<script type="text/javascript" src="/javascripts/angular-resource.js">
$resource應用
我們并不是直接通過$resource服務本身同服務器通信,$resource是一個創(chuàng)建資源對象的工廠,用來創(chuàng)建同服務端交互的對象。
var User = $resource('/api/users/:userId', {userId:'@id'});
返回的User對象包含了同后端服務進行交互的方法,我們可以把User對象理解成同RESTFul的后端服務進行交互的接口。
該對象包含兩個get類型的方法已經(jīng)三個非get類型的方法。
User.get({id:'123'}, successFn, errorFn);
該方法向url發(fā)送一個get請求,并期望一個json類型的響應。這里會向/api/users/123發(fā)送一個請求,successFn處理請求成功響應,errorFn處理錯誤。
User.query(params, successFn, errorFn)
同get()
方法使用類似,一般用來請求多條數(shù)據(jù)。
save(params, payload, successFn, errorFn);
save方法會發(fā)起一個post請求,params參數(shù)用來填充url中變量,對象payload會作為請求體進行發(fā)送
delete(params, payload, successFn,errorFn)
delete方法一個DELETE請求,payload作為消息體進行發(fā)送
remove(params, payload, successFn, errorFn)
同delete類似,不同的是remove用來移除多條數(shù)據(jù)
通過$resource生成的對象來同服務器進行交互的時候,我們看可以定義處理成功以及處理失敗的函數(shù),這些函數(shù)接受的參數(shù)不僅僅是簡單的對象,而是經(jīng)過包裝之后的對象,會被添加$save()
, $remove()
, $delete
三個方法,可以直接調(diào)用這三個方法來后服務端進行交互。
User.get({id:'123'}, function(user){ user.name = 'changeAnotherName'; user.$save(); //這里等價于User.save({id:'123'},{name:'changeAnotherName'}) });
$resource擴展
$resource對常見的五種請求進行封裝,我們還可以對$resource進行擴展。
這里要擴展$resource我們需要傳入第三個參數(shù),該參數(shù)是一個對象。
$resource('/api/users',{},{ sendEmail:{ method:'', url:'', params:{}, isArray:boolean, transformRequest:函數(shù)或者函數(shù)數(shù)組 transformResponse:函數(shù)或者函數(shù)數(shù)組 cache:布爾型或緩存對象 timeout:數(shù)值或promise對象 withCredentials:布爾類型 responseType:字符串,用來設置XMLHttpRequestResponseType屬性 } })
我們也可以將$resource服務當做自定義服務的基礎。
angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){ return $resource(url,{},{}); }]);
總結
以上就是關于AngularJs中$resource和restfu服務端數(shù)據(jù)交互的全部內(nèi)容,希望這篇文章對大家學習或者使用AngularJS能有所幫助,如果有疑問大家可以留言交流。
相關文章
Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能
這篇文章主要介紹了 Bootstrap + AngularJS 實現(xiàn)簡單的數(shù)據(jù)過濾字符查找功能,代碼簡單易懂,非常不錯具有參考借鑒價值,需要的朋友可以參考下2017-07-07ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子
這篇文章主要介紹了ANGULARJS中用NG-BIND指令實現(xiàn)單向綁定的例子,本文簡單介紹AngularJS框架后,用一個實例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以參考下2014-12-12angularjs學習筆記之三大模塊(modal,controller,view)
本文給大家記錄的是angularjs的三大模塊(modal,controller,view)的使用說明,方便初學者能夠順利的學習angularjs.2015-09-09Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
在Angular的原生指令中有這幾個指令用來控制元素的展示與否,ng-show/ng-hide/ng-if和ng-switch。在angular性能優(yōu)化中,我們也常常會用到它。這篇文章主要給大家介紹了在Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程,需要的朋友可以參考。2017-05-05AngularJS ng-controller 指令簡單實例
本文主要介紹AngularJS ng-controller 指令,這里對ng-controller指令資料的整理,并附代碼示例和效果圖,有需要的朋友看下2016-08-08