文档章节

AngularJs $resource 高大上的数据交互

孟飞阳
 孟飞阳
发布于 2018/07/17 19:49
字数 1313
阅读 7
收藏 0

$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/h2zZhou/p/6182576.html

共有 人打赏支持
孟飞阳
粉丝 212
博文 998
码字总数 550537
作品 5
朝阳
个人站长
私信 提问
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
AngularJS - 下一个大框架

AngularJS AngularJS是web应用的下一个巨头。 AngularJS如果为创建web应用而设计,那它就是HTML的套路了。具有数据绑定, MVW, MVVM, MVC, 依赖注入的声明式模板和出色的可测试性都是用纯客户...

oschina
2014/07/29
16.5K
46
为 Web 开发者准备的 15 最棒 AngularJS 工具

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2015/05/08
6.2K
25

没有更多内容

加载失败,请刷新页面

加载更多

zeppelin源码分析(6)——note的执行过程

上图是zeppelin的前后台交互模型,zeppelin采用单独的jvm来启动interpreter进程,该Interpreter进程与zeppelinServer进程之间采用Thrift协议通信,其中RemoteInterpreterProcess是Thrift-Cl...

群星纪元
20分钟前
1
0
promise

Promise是异步里面的一种解决方案,解决了回调嵌套的问题。 语法: new Promise( function(resolve, reject) {...} /* executor */ ); executor是带有 resolve 和 reject 两个参数的函数 。...

东东笔记
21分钟前
0
0
精华集锦 | 阿里如何提升团队的研发效能?

项目管理、交付、托管、测试、运维帮您告别996,追赶“211”,海量资源0元起,尽在开发者分会场, 云效鼓励师:以下是我们整理的云效公众号上【研发效能】相关的爆款文章,这些内容中有许多都...

zhaowei121
26分钟前
2
0
收集一些有用的

1 服务器镜像下载站点: https://msdn.itellyou.cn/ 2 Windows2012 r2 产品id: NB4WH-BBBYV-3MPPC-9RCMV-46XCB 3 软件下载: https://www.filepuma.com/https://www.manageengine.cn/ 4 ......

拜了个拜
32分钟前
0
0
HIVE 常见的内置函数

文章目录 1 关系运算 1.1 1、等值比较: = 1.2 2、不等值比较: 1.3 3、小于比较: < 1.4 4、小于等于比较: <= 1.5 5、大于比较: > 1.6 6、大于等于比较: >= 1.7 7、空值判断: IS NULL 1.8 8、非...

瑞查德-Jack
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部