详解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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
javascript实现连续赋值
Aug 10 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
JS实现简单的表格增删
Jan 16 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 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
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
Javascript 继承机制实例
2009/08/12 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Django自定义认证方式用法示例
2017/06/23 Python
python 自定义对象的打印方法
2019/01/12 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
业务部门经理岗位职责
2014/02/23 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
单位委托书
2014/10/15 职场文书
学校党支部承诺书
2015/04/30 职场文书
2016年元旦主持词
2015/07/06 职场文书
2016年教师学习廉政准则心得体会
2016/01/20 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫