一、$resource服务介绍
$http服务提供的实现极为简单和低级,可以用来发送XHR请求,同时它还为你提供了很大的可控性和灵活性。但是,在大多数情况下,我们需要处理对象,以及封装了特定属性和方法的对象模型,例如一个person对象(带有详细信息),或者一个信用卡对象。
$resource就是为这一功能而设计的。AngularJS中的resource(资源)允许我们用描述性的方式来定义对象模型,它可以描述以下内容:
使用Angular所提供的$resource对象,你可以根据各种需求查询服务器;除此之外,你还可以把服务端返回的对象当成已经持久好的数据模型,你可以修改它们,并且可以把它们持久化。
ngResource是一个独立的、可选的模块,因此,并没有默认包含在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服务。
格式: var obj=$resource(url,[,paramsDefaults],[,actions])
obj表示请求服务器指定url地址后返回的`$resource`对象,该对象中就包含了**与服务端进行数据交互的全部API**。
参数url表示请求服务器的地址,其中允许占位符变量,该变量必须以`:`为前缀
例如:
`var obj=$resource('url?action=:act');`
`obj.$save{act:'save'}`
那么,在执行save动作时,向服务端发送的实际地址就为`url?action=save`。
此外,可选参数`paramsDefaults`是一个对象,用于设置请求时的默认参数值,在发送请求时,该对象中的全部值将自动进行序列化,如遇占位符变量自动替换,并将结果添加到url请求之后
代码如下:
var obj=`$resource`('url?action=:act',{
act:'save',
a:'1',
b:'2'
});
执行上述代码后,向服务器发送的实际地址是`url?action=save&a=1&b=2`。
另外一个可选参数`actions`的功能是扩展默认资源动作,例如,可以在该对象中自定义新的方法:
var boj=$resource('url?action=:act',{
...
},{
a:{
method:'get'
}
});
然后就可以在$resource对象中直接调用在可选参数actions中自定义的方法a,即obj.$a()
二、 $resource服务所返回娿对象中所包含的5个与服务端交互常用API
1、$resource服务返回对象中的GET类型请求
包含两个api,分别为get query,调用格式如下:
var obj=$resource('url');
//get()方法
obj.get(params,successFn,errorFn);
//query方法
obj.query(params,successFn,errorFn);
这两个api的请求参数相同,区别在于,**get返回值可以是单个资源,但是query必须返回一个数组或集合类的资源。**
2、$resource服务返回对象中的非GET类型请求
包含3个api,分别为save delete remove,调用格式如下:
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方法作用享用,区别在于remove可以解决IE浏览器中delete是Javascript保留字而导致的错误问题。
<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>
对应的服务器端文件,使用了Express架构,核心代码如下:
//对于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服务中自定义请求方法
var obj=$resource(url,[,paramsDefaults],[,actions])
在第三个可选参数中,通过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方式请求服务器
params:{
update:true
},
isArray:false //表示调用该方法后,服务器返回的数据可以不是一个数组
}
});
}])
.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是放在数据body体里面的
resp1.key='1002';
//self?action=save
resp1.$save({act:'save'},function(resp2){
$scope.r2=(resp0[0]=='1')?'保存成功':'保存失败';
})
})
})
}
}])
</script>
对应的服务器端文件,使用了Express架构,核心代码如下:
// /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');
}
}
})
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
问题内容: 我正在向我的API发出请求,并且正在使用AngularJS $ resource模块。它与$ http不同,因此我不知道如何处理错误。 我的服务: 我的控制器: 我想要类似这样的东西..如果我的API无法正常工作,我不知道如何处理错误。 问题答案: 您可以将错误处理程序作为第二个参数传递给。 编辑: 为了使事情更清楚一些,例如:
问题内容: 我正在尝试开始为我的角度应用程序编写单元测试,并且由于无法确定如何以一种可测试的方式模拟服务而非常快地遇到了一个障碍。 有没有一种方法可以模拟REST调用,否则好像我需要在测试中镜像服务中的所有内容,这对我来说似乎不对,但是我对测试写作相当陌生,所以也许应该这样有待完成。任何帮助将不胜感激。 我的服务如下: 到目前为止,我的测试包括: 问题答案: 您可以像这样模拟ngResource发
本文向大家介绍深入理解Java基础之try-with-resource语法糖,包括了深入理解Java基础之try-with-resource语法糖的使用技巧和注意事项,需要的朋友参考一下 背景 众所周知,所有被打开的系统资源,比如流、文件或者Socket连接等,都需要被开发者手动关闭,否则随着程序的不断运行,资源泄露将会累积成重大的生产事故。 在Java的江湖中,存在着一种名为finally的功夫
本文向大家介绍详解AngularJs中$resource和restfu服务端数据交互,包括了详解AngularJs中$resource和restfu服务端数据交互的使用技巧和注意事项,需要的朋友参考一下 $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互。 安装 ngResource模块是一个可选的angularjs模块,如果需要使用,我们要
本文向大家介绍深入理解vue中的$set,包括了深入理解vue中的$set的使用技巧和注意事项,需要的朋友参考一下 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去; 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。如下代码: 运行结果: 为什么会这样呢?当去查对
本文向大家介绍深入理解(function(){... })();,包括了深入理解(function(){... })();的使用技巧和注意事项,需要的朋友参考一下 1.他叫做立即运行的匿名函数(也叫立即调用函数) 2.当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!有木有很神奇哦~ 3.要使用一个函数,我们就得首先声明它的存在。而我们最常用的方式就是使用functio