深入理解Angularjs中的$resource服務(wù)
一、$resource服務(wù)介紹
$http服務(wù)提供的實現(xiàn)極為簡單和低級，可以用來發(fā)送XHR請求，同時它還為你提供了很大的可控性和靈活性。但是，在大多數(shù)情況下，我們需要處理對象，以及封裝了特定屬性和方法的對象模型，例如一個person對象（帶有詳細(xì)信息），或者一個信用卡對象。
$resource就是為這一功能而設(shè)計的。AngularJS中的resource(資源)允許我們用描述性的方式來定義對象模型，它可以描述以下內(nèi)容：
- 資源在服務(wù)端的URL。
- 常用的請求參數(shù)類型。
- 一些附加的方法（你可以自動獲得get、save、query、remove和delete方法），這些方法為對象模型包裝了特定的功能和業(yè)務(wù)邏輯（例如信用卡對象的charge()方法）。
- 期望獲得的響應(yīng)類型（一個數(shù)組或者一個對象）。
- 協(xié)議頭。
使用Angular所提供的$resource對象，你可以根據(jù)各種需求查詢服務(wù)器；除此之外，你還可以把服務(wù)端返回的對象當(dāng)成已經(jīng)持久好的數(shù)據(jù)模型，你可以修改它們，并且可以把它們持久化。
ngResource是一個獨立的、可選的模塊，因此，并沒有默認(rèn)包含在Angular中， 為了使用它，需要：
1、在加載的腳本文件中包含angular-resource.js.
例如： <script src="http://cdn.bootcss.com/angular-resource/1.5.8/angular-resource.min.js"></script>
2、在模塊依賴聲明中包含ngResource
例如: angular.module(‘myapp', [‘ngResource'])
3、在需要的地方使用注入的$resource服務(wù)。
格式： var obj=$resource(url,[,paramsDefaults],[,actions])
obj表示請求服務(wù)器指定url地址后返回的`$resource`對象，該對象中就包含了**與服務(wù)端進行數(shù)據(jù)交互的全部API**。
參數(shù)url表示請求服務(wù)器的地址，其中允許占位符變量，該變量必須以`:`為前綴
例如：
`var obj=$resource('url?action=:act');`
`obj.$save{act:'save'}`
那么，在執(zhí)行save動作時，向服務(wù)端發(fā)送的實際地址就為`url?action=save`。
此外，可選參數(shù)`paramsDefaults`是一個對象，用于設(shè)置請求時的默認(rèn)參數(shù)值，在發(fā)送請求時，該對象中的全部值將自動進行序列化，如遇占位符變量自動替換，并將結(jié)果添加到url請求之后
代碼如下：
var obj=`$resource`('url?action=:act',{
act:'save',
a:'1',
b:'2'
});
執(zhí)行上述代碼后，向服務(wù)器發(fā)送的實際地址是`url?action=save&a=1&b=2`。
另外一個可選參數(shù)`actions`的功能是擴展默認(rèn)資源動作，例如，可以在該對象中自定義新的方法：
var boj=$resource('url?action=:act',{
...
},{
a:{
method:'get'
}
});
然后就可以在$resource對象中直接調(diào)用在可選參數(shù)actions中自定義的方法a，即obj.$a()
二、 $resource服務(wù)所返回娿對象中所包含的5個與服務(wù)端交互常用API
1、$resource服務(wù)返回對象中的GET類型請求
包含兩個api，分別為get query，調(diào)用格式如下：
var obj=$resource('url');
//get()方法
obj.get(params,successFn,errorFn);
//query方法
obj.query(params,successFn,errorFn);
這兩個api的請求參數(shù)相同，區(qū)別在于，**get返回值可以是單個資源，但是query必須返回一個數(shù)組或集合類的資源。**
2、$resource服務(wù)返回對象中的非GET類型請求
包含3個api，分別為save delete remove，調(diào)用格式如下：
var obj=$resource('url');
//save()方法
obj.save(params,postData,successFn,errorFn);
//delete方法
obj.save(params,postData,successFn,errorFn);
//remove方法
obj.save(params,postData,successFn,errorFn);
其中，delete方法和remove方法作用享用，區(qū)別在于remove可以解決IE瀏覽器中delete是Javascript保留字而導(dǎo)致的錯誤問題。
<div ng-controller='myController'>
<ul>
<li ng-repeat='item in items'>
<span>{{item.Code}}</span>
<span>{{item.Name}}</span>
<span>{{item.Gender}}</span>
</li>
</ul>
<div>
Key: <input type="text" ng-model='key' />
<button ng-click='save()'>保存</button>
<div>{{result}}</div>
</div>
</div>
<script type="text/javascript">
angular.module('myapp',['ngResource'])
.config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(obj){
var arrStr=[];
for(var p in obj){
arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
}
return arrStr.join("&");
};
$httpProvider.defaults.headers.post={
'Content-Type':'application/x-www-form-urlencoded'
}
})
.controller('myController',['$scope','$resource',function($scope,$resource){
var stus=$resource('/info');
///info?action=search
stus.query({action:'search'},function(resp){
$scope.items=resp;
});
$scope.save=function(){
var data={
key:$scope.key
};
stus.save({action:'save'},data,function(resp){
$scope.result=(resp[0]=='1')?'保存成功':"保存失敗";
});
}
}])
</script>
對應(yīng)的服務(wù)器端文件，使用了Express架構(gòu)，核心代碼如下：
//對于query請求
app.get('/info',function(req,res){
var info=[
{Code:'1001',Name:'zhangsan',Gender:'female'},
{Code:'1002',Name:'lisi',Gender:'male'}
];
res.status(200).json(info);
});
//對于save請求
app.post('/info',function(req,res){
if(req.body.key=='1001'){
res.send('1');
}else{
res.send('0')
}
});
三、在$resource服務(wù)中自定義請求方法
var obj=$resource(url,[,paramsDefaults],[,actions])
在第三個可選參數(shù)中，通過key/value的方式自定義。
<div ng-controller='myController'>
<div>
<div>{{r0}}</div>
<div>{{r1}}</div>
<div>{{r2}}</div>
<button ng-click='click()'>開始</button>
</div>
</div>
<script type="text/javascript">
var url='/self?action=:act';
angular.module('myapp',['ngResource'])
.config(function($httpProvider){
$httpProvider.defaults.transformRequest=function(obj){
var arrStr=[];
for(var p in obj){
arrStr.push(encodeURIComponent(p)+"="+encodeURIComponent(obj[p]));
}
return arrStr.join("&");
};
$httpProvider.defaults.headers.post={
'Content-Type':'application/x-www-form-urlencoded'
}
})
.factory('custom',['$resource',function($resource){
return $resource(url,{act:'search'},
{
update:{
method:'POST',//使用POST方式請求服務(wù)器
params:{
update:true
},
isArray:false //表示調(diào)用該方法后，服務(wù)器返回的數(shù)據(jù)可以不是一個數(shù)組
}
});
}])
.controller('myController',['$scope','custom',function($scope,custom){
$scope.click=function(){
//這里的id是放在url后面的，/self?action=search&id=1001
custom.get({id:'1001'},function(resp0){
$scope.r0=(resp0[0]=='1')?'查找成功':'查找失敗';
resp0.key='1001';
// /self?action=update&update=true
resp0.$update({act:'update'},function(resp1){
$scope.r1=(resp0[0]=='1')?'更新成功':'更新失敗';
//這里的key是放在數(shù)據(jù)body體里面的
resp1.key='1002';
//self?action=save
resp1.$save({act:'save'},function(resp2){
$scope.r2=(resp0[0]=='1')?'保存成功':'保存失敗';
})
})
})
}
}])
</script>
對應(yīng)的服務(wù)器端文件，使用了Express架構(gòu)，核心代碼如下：
// /self?action=search&id=1001
app.get('/self',function(req,res){
if(req.query.action=='search'){
console.log('req.params.id:'+req.params.id);
if(req.query.id=='1001'){
res.send('1');
}else{
res.send('0');
}
}
});
// /self?action=update&update=true /self?action=save
app.post('/self',function(req,res){
if(req.query.action=='update'){
if(req.body.key=='1001' && req.query.update=='true'){
res.send('1');
}else{
res.send('0');
}
}else if(req.query.action=='save'){
if(req.body.key=='1002'){
res.send('1');
}else{
res.send('0');
}
}
})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Angular CLI發(fā)布路徑的配置項的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
angular中實現(xiàn)控制器之間傳遞參數(shù)的方式
本篇文章主要介紹了angular中實現(xiàn)控制器之間傳遞參數(shù)的方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-04-04
swiper在angularjs中使用循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在angularjs中使用循環(huán)輪播失效的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS中ngAnimate模塊支持動畫效果，但是ngAnimate模塊并未包含在AngularJS核心庫中，因此需要使用ngAnimate需要在定義Module時聲明對其的引用。下面通過本文我們來看看AngularJS動畫的詳細(xì)介紹。2016-07-07
AngularJS基礎(chǔ) ng-mouseenter 指令示例代碼
本文主要介紹AngularJS ng-mouseenter 指令,這里對ng-mouseenter 指令基礎(chǔ)資料做了詳細(xì)整理,并附代碼實例,有需要的小伙伴可以參考下2016-08-08
angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)
今天小編就為大家分享一篇angularJs中跳轉(zhuǎn)到指定的錨點實例($anchorScroll)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本文主要講解AngularJs directive的知識，這里整理了相關(guān)資料及示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開發(fā)經(jīng)驗的開發(fā)者，了解本文中的12個經(jīng)典面試問題，都將會是一個深入了解和學(xué)習(xí)Angular2的知識概念的絕佳途徑。2021-05-05
詳解angularjs實現(xiàn)echart圖表效果最簡潔教程
本篇文章主要介紹了詳解angularjs實現(xiàn)echart圖表效果最簡潔教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
AngularJS 購物車全選/取消全選功能的實現(xiàn)方法
下面小編就為大家?guī)硪黄狝ngularJS 購物車全選/取消全選功能的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08