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 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
node上的redis调用优化示例详解
Oct 30 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
提高php编程效率技巧
2015/08/13 PHP
Windows下wamp php单元测试工具PHPUnit安装及生成日志文件配置方法
2018/05/28 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
python实现的文件夹清理程序分享
2014/11/22 Python
python中使用序列的方法
2015/08/03 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python requests.get带header
2020/05/05 Python
Python 如何对文件目录操作
2020/07/10 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
人工作失职检讨书
2015/05/05 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server