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中的缓动效果实现程序
Dec 29 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
纯JS实现本地图片预览的方法
Jul 31 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
原生js编写焦点图效果
Dec 08 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 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
深入了解php4(1)--回到未来
2006/10/09 PHP
php桌面中心(三) 修改数据库
2007/03/11 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
比较完整的微信开发php代码
2016/08/02 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python下的twisted框架入门指引
2015/04/15 Python
深入浅析Python字符编码
2015/11/12 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
工程测量与监理专业应届生求职信
2013/11/27 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
公司合并协议书范本
2014/09/30 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
房屋所有权证明
2015/06/19 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery