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 ...
随机推荐
- 10分钟使用纯css实现完整的响应式导航菜单栏的效果
在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...
- C# 7.0 新特性4: 返回引用
本文参考Roslyn项目中的Issue:#118. 1. C# 7.0 新特性1: 基于Tuple的“多”返回值方法 2. C# 7.0 新特性2: 本地方法 3. C# 7.0 新特性3: 模式匹配 ...
- IIS安装与MVC程序部署
最近在做访客系统,虽然说不是什么多大的项目,但麻雀虽小五脏俱全,使用EF Code First+Mysql+Frozenui响应式布局,感觉通过这个项目学到好多东西,Mysql的使用.EF映射Mysq ...
- 代码重构之 —— 一堆if、esle 逻辑的处理
这几天,接手一个同事的代码,关于微信接口开发的,那一堆的 if,看得哥蛋痛了,这个毛病也是很多新手容易犯的,所以特地把这次重构写出来. 下面来我们看看这个代码的问题所在,if else 里面的代码块逻 ...
- Oracle SQL Developer 添加SQLServer 和Sybase 连接
来源于: http://blog.csdn.net/kk185800961/article/details/8602306 1. 开始只有Oracle 和access 连接 2. 打开Oracle S ...
- navicat cannot create file 文件名、目录名或卷标语法不正确 解决方法
配置了mycat,用navicat连接8066端口,点击“查询”的时候发现出现报错: 开始以为是mycat的配置有问题,找了好久都没发现错误.根据提示信息进入到相应的目录发现每个连接其实就是一个win ...
- safe RGB colors
RGB是面向机器的一种颜色空间. 虽然它表示\(256 \times 256 \times 256\)种不同的颜色, 但在实际中, 大部分机器都只实现了256种颜色. 安全色(Safe RGB col ...
- HTTP 405 错误 – 方法不被允许 (Method not allowed)
HTTP 协议定义一些方法,以指明为获取客户端(如您的浏览器或我们的 CheckUpDown 机器人)所指定的具体网址资源而需要在 Web 服务器上执行的动作.则这些方法如下: 介绍 OPTIONS( ...
- ThreadLocal原理与模拟
首先用一个程序模拟一下ThreadLocal: public class ThreadLocal1 { private static Dictionary<Thread, Integer> ...
- bzoj4358: permu
莫队算法,用线段树维护最长连续1,复杂度O(nsqrt(m)logn) 刚开始TLE了,看了claris大爷的blog说是kd-tree,然而并不会kd-tree…… 然后就打算弃疗了...弃疗之前加 ...