详解AngularJs中$resource和restfu服务端数据交互


Posted in Javascript onSeptember 21, 2016

$resource

创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互。

安装

ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js

<script type="text/javascript" src="/javascripts/angular-resource.js">

$resource应用

我们并不是直接通过$resource服务本身同服务器通信,$resource是一个创建资源对象的工厂,用来创建同服务端交互的对象。

var User = $resource('/api/users/:userId', {userId:'@id'});

返回的User对象包含了同后端服务进行交互的方法,我们可以把User对象理解成同RESTFul的后端服务进行交互的接口。

该对象包含两个get类型的方法已经三个非get类型的方法。

User.get({id:'123'}, successFn, errorFn);

该方法向url发送一个get请求,并期望一个json类型的响应。这里会向/api/users/123发送一个请求,successFn处理请求成功响应,errorFn处理错误。

User.query(params, successFn, errorFn)

get()方法使用类似,一般用来请求多条数据。

save(params, payload, successFn, errorFn);

save方法会发起一个post请求,params参数用来填充url中变量,对象payload会作为请求体进行发送

delete(params, payload, successFn,errorFn)

delete方法一个DELETE请求,payload作为消息体进行发送

remove(params, payload, successFn, errorFn)

同delete类似,不同的是remove用来移除多条数据

通过$resource生成的对象来同服务器进行交互的时候,我们看可以定义处理成功以及处理失败的函数,这些函数接受的参数不仅仅是简单的对象,而是经过包装之后的对象,会被添加$save() , $remove() , $delete三个方法,可以直接调用这三个方法来后服务端进行交互。

User.get({id:'123'}, function(user){
 user.name = 'changeAnotherName';
 user.$save();
//这里等价于User.save({id:'123'},{name:'changeAnotherName'})
});

$resource扩展

$resource对常见的五种请求进行封装,我们还可以对$resource进行扩展。

这里要扩展$resource我们需要传入第三个参数,该参数是一个对象。

$resource('/api/users',{},{
 sendEmail:{
  method:'',
  url:'',
  params:{},
  isArray:boolean,
  transformRequest:函数或者函数数组
  transformResponse:函数或者函数数组
  cache:布尔型或缓存对象
  timeout:数值或promise对象
  withCredentials:布尔类型
  responseType:字符串,用来设置XMLHttpRequestResponseType属性
 }
})

我们也可以将$resource服务当做自定义服务的基础。

angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
  return $resource(url,{},{});
}]);

总结

以上就是关于AngularJs中$resource和restfu服务端数据交互的全部内容,希望这篇文章对大家学习或者使用AngularJS能有所帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 #Javascript
JavaScript 拖拽实例代码
Sep 21 #Javascript
Angularjs中controller的三种写法分享
Sep 21 #Javascript
jQuery中Find选择器用法示例
Sep 21 #Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 #Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 #Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #Javascript
You might like
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP 无限级分类
2017/05/04 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
JavaScript中“+=”的应用
2007/02/02 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
jquery replace方法去空格
2017/05/08 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python友情链接检查方法
2015/07/08 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python实现数据库跨服务器迁移
2018/04/12 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
基于python模拟bfs和dfs代码实例
2020/11/19 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
陕西导游词
2015/02/04 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书