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
AngularJs $resource 高大上的数据交互的更多相关文章
- Angular - - $resource 更高端的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- vue前后台数据交互vue-resource文档
地址:https://segmentfault.com/a/1190000007087934 Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通 ...
- (二)Mybatis总结之通过Dao层与数据交互
Mybatis概述 定义: Mybatis是一个支持普通sql查询,存储过程和高级映射的优秀持久层框架. Mybatis是(半自动的)跟数据库打交道的orm(object relationship m ...
- vue---axios实现数据交互与跨域问题
1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是java ...
- Android客户端和服务器端数据交互
网上有很多例子来演示Android客户端和服务器端数据如何实现交互不过这些例子大多比较繁杂,对于初学者来说这是不利的,现在介绍几种代码简单.逻辑清晰的交互例子,本篇博客介绍第四种: 一.服务器端: 代 ...
- 使用Jquery.AJAX方法和PHP后台数据交互小结
使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
- View与Control间的数据交互
View与Control间的数据交互 1.ViewBag.Name ="Name1" 2.ViewData["VD"] = "view data&qu ...
- .net实现与excel的数据交互、导入导出
应该说,一套成熟的基于web的管理系统,与用户做好的excel表格进行数据交互是一个不可或缺的功能,毕竟,一切以方便客(jin)户(qian)为宗旨. 本人之前从事PHP的开发工作,熟悉PHP的都应该 ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
随机推荐
- MFC 调试方法
AfxDebugBreak MFC 提供特殊的 AfxDebugBreak 函数,以供在源代码中对断点进行硬编码: AfxDebugBreak( ); 在 Intel 平台上,AfxD ...
- 更便捷的Android多渠道打包方式
本文先回顾了以往流行的多渠道打包方式,随后引入的mcxiaoke的packer-ng-plugin项目,介绍该项目在实际应用(配合友盟统计)中如何解决更方便的Android多渠道打包问题 多渠道打包方 ...
- 关于安装Visual Studio 2015 RC版卡主不动的解决方案
在官方网站下载了vs_community.exe自动下载安装的软件进行安装,安装到github时候 卡了1个小时 一直显示正在获取,遂感觉不大对劲,使用了FQ程序,过了2分钟果然正常获取安装,进入了下 ...
- [BZOJ1407][NOI2002]Savage(扩展欧几里德)
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1407 分析: m,n范围都不大,所以可以考虑枚举 先枚举m,然后判定某个m行不行 某个 ...
- 半平面交模板(BZOJ1007)
#include<cstdio> #include<algorithm> #define LDB long double using namespace std; ]; str ...
- Ubuntu backlight
我们可以通过键盘来调节亮度,但是那样亮度无法微调,每次变亮变得太多. 在 /sys/class/backlight/nv_backlight 这个目录下,brightness 是最主要的.backli ...
- android开发------编写用户界面之相对布局
今天要说的是RelativeLayout.RelativeLayout相对于LinearLayout的主要不同点在于它需要一个参照物. 我们先来看一下官方对这个布局的解释: RelativeLayou ...
- android Baseadapter 和 ViewHolder的使用
昨晚学习了徐大神的关于BaseAdapter的讲解,让我受益匪浅特来博客留下印记 说到baseadapter大家一定都不陌生,下面这张图就展示了数据.listview.baseadapter 之间的关 ...
- HTML5存储
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...
- mysql explain知道