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 相关文章推荐
js资料prototype 属性
Mar 13 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
javascript对浅拷贝和深拷贝的详解
Oct 14 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
vue全局使用axios的操作
Sep 08 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桌面中心(一) 创建数据库
2007/03/11 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
js tab 选项卡
2009/04/26 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
JS 实现完美include载入实现代码
2010/08/05 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python生成随机图形验证码详解
2017/11/08 Python
python如何使用unittest测试接口
2018/04/04 Python
linux环境下Django的安装配置详解
2019/07/22 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
教学大赛获奖感言
2014/01/15 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
大学生找工作求职信
2014/07/09 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
电力安全学习心得体会
2016/01/18 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书