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 检测浏览器类型和版本的代码
Sep 15 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JS 退出系统并跳转到登录界面的实现代码
Jun 29 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
JQuery教学之性能优化
May 14 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
js与applet相互调用的方法
Jun 22 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
jQuery弹框插件使用方法详解
2020/05/26 jQuery
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
django-csrf使用和禁用方式
2020/03/13 Python
python 监控logcat关键字功能
2020/09/04 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
廉洁使者实施方案
2014/03/29 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
房贷收入证明范本
2015/06/12 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Python正则表达式中flags参数的实例详解
2022/04/01 Python
python创建字典及相关管理操作
2022/04/13 Python