AngularJs $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),希望有人交流相关问题。关于RESTFUL的,详情请戳大神阮一峰的文章:http://www.ruanyifeng.com/blog/2011/09/restful
转载于:https://www.cnblogs.com/ys-ys/p/5016601.html
AngularJs $resource 高大上的数据交互相关推荐
- 也谈跨域数据交互解决方案
也谈跨域数据交互解决方案 先来句题外话,最开始Ajax应该是用来特指用XMLHttpRequest传输数据这门技术,但就像最近大家把一切web新技术都归到html5名下一样,现在一切异步获取数据的手段 ...
- ajax连接前后端原理,前后端数据交互方法和原理
前后端数据交互方法和原理 发布时间:2018-10-28 11:25, 浏览次数:742 对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前 ...
- JSON数据交互和RESTful支持
JSON数据交互和RESTful支持 SpringMVC在数据绑定的过程中,需要对传递数据的格式和类型进行转换,它既可以转换String类型的数据,也你能够转换JSON等其他类型的数据. JSON数据 ...
- 基于WMS/WCS与PLC数据交互的立体仓库控制系统案例分析
写在面前 上次分享了文章: TIA Portal实现动态加密的高阶玩法-分级催款密钥授权管理 然后很快就有朋友根据里面的思路实现了,很赞,不过提醒大家的是,我们分享的只是一些思路,不是让大家跟做某件事 ...
- 第5章 uin-app本地主机数据跨域(Cors)数据交互实现
开发前端App最先需要被实现的功能是:与本地主机上已经布置在IIS服务上的后端数据实现跨域(Cores)交互操作,这也是前端App作为前端工程性项目存在的根本意义和需求,因此需要首先对上一章中示例:2 ...
- 软件测试的交互,软件测试--前后端数据交互
作为一个合格的软件测试人员, 能够熟练定位bug的位置是属于前端还是后端,是必备技能之一.所以就需要明白前后端数据是怎么进行交互的. 一.网站数据处理主要分为三层 第一层,表示层,这部分可以用HTML ...
- 前后端数据交互方法和原理
对于想要搞web的新手而言,会用html+css+javascript实现一个页面没什么太大的困难,但是想要前后端实现数据交互,在没有指导的情况下,可能大多数人都会一头雾水,往往都会有以下的疑问. 目 ...
- 前端vue和django后端数据交互,跨域问题的解决
一:前言 再前后端的数据交互问题上,经常会遇到跨域问题.即这个错误 Access to XMLHttpRequest at 'http://127.0.0.1:8000/api/test/' from ...
- 骑士智能科技M5310模块连接中移OneNet平台实现数据交互
一.实验目的 使用骑士智能科技M5310模块加USB转串口,连接到中移OneNet平台上,并实现温湿度数据交互 二.准备工作 硬件:骑士智能科技M5310模块 + 移动NB卡.USB转串口.天线 软件 ...
最新文章
- 布尔(bool)值需注意事项
- Swift Web 开发之 Vapor - 路由(二)
- struct.error: 'h' format requires -32768 number 32767
- 深入Java中文编码乱码问题及最优解决方法
- 如何将ListT转换相应的Html(xsl动态转换)(一)
- Android OpenGL ES 开发教程(16):Viewing和Modeling(MODELVIEW) 变换
- Postgis使用工具osm2pgsql导入OpenStreetMap数据
- luogu1378 油滴扩展 (深搜)
- Pycharm社区版运行Django的三种方法(Pycharm添加配置参数快捷启动Django、Pycharm社区版Django项目创建)
- 使用pytorch模型学习框架easyocr模块识别行程码图片文字并使用Flask Web返回指定信息json字符串
- 一键推荐螺旋排气集污阀 螺旋除污器 螺旋脱气除污设备厂家供应
- 关于星环TDH产品的Java通过Kerberos安全认证连接hyperbase
- 102-并发编程详解(中篇)
- mulesoft MCIA 破釜沉舟备考 2023.04.29.27 (易错题)
- 搞懂Linux内存屏障(值得收藏)
- 华为手机如何设置主页面_华为手机怎么返回主界面
- sda、sdb、sda1、sda2的意思
- 大数据环境中的系统磁盘的常见问题
- iOS 视频转码处理
- 一群中国芯片技术小球的奋斗故事系列: “中科融合“AI-3D”芯片追赶美国TI的DLP技术之产业和技术初探-part I”
热门文章
- 配置文件app.config
- 如何在Windows Server 2008 Core里面添加Role~~~
- devops和docker_通过免费的2小时Docker课程学习DevOps基础知识
- babel6 babel7_当您已经准备好Babel时设置Flow
- 往往存储与计算机硬盘或其他,硬盘是计算机系统中信息资源最重要的存储设备其所存放信息-Read.DOC...
- 如何创建和获取正则对象?
- leetcode--盛最多水的容器--python
- 10个Java 8 Lambda表达式经典示例
- poj 1681 Painter#39;s Problem(高斯消元)
- 目前流行的源程序版本管理软件和项目管理软件都有哪些?各有什么优缺点?...