詳解AngularJs中$resource和restfu服務端數(shù)據(jù)交互

更新時間：2016年09月21日 14:30:46 投稿：daisy

之前小編和大家分享過使用$http同服務器進行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務$resource,使用它可以非常方便的同支持restful的服務單進行數(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三個方法，可以直接調用這三個方法來后服務端進行交互。

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能有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章:

AngularJS實踐之使用NgModelController進行數(shù)據(jù)綁定
大家都知道AngularJS中的指令是其尤為復雜的一個部分，但是這也是其比較好玩的地方。這篇文章我們就來說一說如何在我們自定義的指令中，利用ngModel的controller來做雙向數(shù)據(jù)綁定，本文對大家學習AngularJS具有一定的參考借鑒價值，有需要的朋友們可以參考借鑒。
2016-10-10
AngularJS入門心得之directive和controller通信過程
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件，接下來通過本文給大家介紹AngularJS入門心得之directive和controller通信過程，對angularjs相關知識感興趣的朋友一起學習吧
2016-01-01
AngularJS ng-table插件設置排序
這篇文章主要介紹了AngularJS ng-table插件設置排序的相關資料,需要的朋友可以參考下
2016-09-09
詳解使用路由延遲加載 Angular 模塊
這篇文章主要介紹了詳解使用路由延遲加載 Angular 模塊,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
淺談angular.js跨域post解決方案
本篇文章主要介紹了淺談angular.js跨域post解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
angularjs 實現(xiàn)帶查找篩選功能的select下拉框實例
本篇文章主要介紹了angularjs 實現(xiàn)帶查找篩選功能的select下拉框實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-01-01
淺談Angular HttpClient簡單入門
本篇文章主要介紹了淺談Angular HttpClient 簡單入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
AngularJS ng-bind 指令簡單實現(xiàn)
本文主要介紹AngularJS ng-bind 指令,在這里對ng-bind 指令做了詳細資料整理并講解，提供了實例代碼以便大家參考，有需要的小伙伴可以參考下
2016-07-07
詳細介紹RxJS在Angular中的應用
本篇文章主要介紹了詳細介紹RxJS在Angular中的應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
使用AngularJS和PHP的Laravel實現(xiàn)單頁評論的方法
這篇文章主要介紹了使用AngularJS和PHP的Laravel實現(xiàn)單頁評論的方法,本文的示例是前端JavaScript和后端PHP聯(lián)合編程的典范,需要的朋友可以參考下
2015-06-06