Angular.js中$resource高大上的数据交互详解


Posted in Javascript onJuly 30, 2017

本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:

$resource

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

需要注入 ngResource 模块。angular-resource[.min].js

默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离。

这个可以通过$resourceProvider配置:

app.config(["$resourceProvider",function($resourceProvider){
 $resourceProvider.defaults.stripTrailingSlashes = false;
 }])

依赖:$http

使用:$resource(url,[paramDefaults],[actions],options);

url:一个参数化的url模板,带有前缀参数(如:/user/:username)。如果你使用的是带端口号的URL(如:http://example.com:8080/api),则需要慎重考虑。如果带有后缀(如:http://example.com/resource.json 或者 http://example.com/:id.json 或者 http://example.com/resource/:resource_id.:format) 。如果后缀之前的参数是空的,在这情况下:resource_id 比 /.优先执行,如果你需要这个序列出现而不崩溃,那么你可以通过/\.避免。

paramDefaults:url参数的默认值,这些可以在方法重写。如果参数的任何一个值是函数,它将作为每一次请求获取的参数值而被执行(除非该参数被忽略的)。

参数对象中的每个键值对都是先绑定到一个url模板,任何多余的密钥都被附加到url query的“?”后。 /path/:verb +{verb:'greet',salutation:'hello'}  =>  /path/greet?salutation=hello

actions: 用户对于resource行为的默认设置进行扩展的自定义配置的散列,该配置将会以$http.config的格式创建。

action: 字符串,action的名称,这个名称将成为resource对象方法的名称。

method:字符串,http方法(不区分大小写,如GET, POST, PUT, DELETE, JSONP等)。

params:对象,这次行动预先设定的参数。如果任何参数的值是一个函数,当一个参数值每一次需要获得请求时都会被执行(除非该参数被忽略的)。

url:字符串,行为指定的网址。

isArray:boolean,如果为true,那么这个行为返回的对象是个数组。

transformRequest:函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http请求体和请求头,并且返回他们的转换版(通常是序列化)。

transformResponse:函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http响应体和响应头,并且返回他们的转换版(通常是序列化)。

cache:boolean,如果为true,一个默认的$http缓存将被作为请求的缓存,否则如果存在一个用$cacheFactory创建的缓存实例,则将用于缓存。

timeout:数值,毫秒,超时则让请求中止。

withCredentials:boolean,是否设置withcredentials flag的XHR对象。查看更多信息的凭据。

responseType:字符串,响应头类型。

interceptor:对象,拦截对象有两个可选方法-response和responseError。

Options:扩展$resourceProvider行为的自定义设置,唯一支持的选项是stripTrailingSlashes,boolean类型,如果为真,url尾部的斜杠会被移除(默认为true)。

五种默认行为:

{

“get”:{method:“get”},


“save”:{method:“post”}


“query”:{method:“get”,isArray:true}


“remove”:{method:“delete”}


“delete”:{method:“delete”}

}

get([params],[success],[error]);

save([params],postData,[success],[error]);

query([params],[success],[error]);

remove([params],postData,[success],[error]);

delete([params],postData,[success],[error]);

$save([params],[success],[error]);

$remove([params],[success],[error]);

使用代码:

(function () {
 angular.module("Demo", ["ngResource"])
 .controller("testCtrl", ["$resource",testCtrl]);
 function testCtrl($resource) {
  var myResource = $resource("/url/_url", {}, {
  myPost: {
   method: "post",
   url: "/newUrl/_newUrl",
   params: { id: "4" },
   interceptor: {
   response: function (d) {
    console.log(d);
   },
   responseError: function (d) {
    console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
   }
   }
  }
  });
  myResource.get({ id: "1" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  myResource.query({ content: "text" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  myResource.save({ text: "Hello World" }, { text: "Hello World" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  myResource.remove({ text: "Hello World" }, { text: "Hello World" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  myResource.delete({ text: "Hello World" }, { text: "Hello World" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  var newResource = new myResource();
  newResource.$save({ id: "2" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  newResource.$remove({ id: "3" }, function (d) {
  console.log(d);
  }, function (d) {
  console.log(d);//这里的是随便写的地址,所以执行了error里的函数,可打印看参数及结果
  });
  myResource.myPost();
 };
 }());

关于$resource,这里只是简单的介绍和使用,本兽对$resource的理解也不会很深(很少用到restful),希望有人交流相关问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
webpack实现热加载自动刷新的方法
Jul 30 #Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 #Javascript
Angular.js中上传指令ng-upload的基本使用教程
Jul 30 #Javascript
关于前后端json数据的发送与接收详解
Jul 30 #Javascript
jquery easyui如何实现格式化列
Jul 30 #jQuery
微信小程序对接七牛云存储的方法
Jul 30 #Javascript
You might like
聊天室php&mysql(五)
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
三维科技面试题
2013/07/27 面试题
创业计划实施的7大步骤
2014/02/05 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript