Angular.js中$resource高大上的数据交互详解

 更新时间:2017年07月30日 15:22:15   作者:野兽''''''''  
这篇文章主要给大家介绍了关于Angular.js中$resource高大上的数据交互的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angular.js具有一定的参考学习价值,需要的朋友们下面跟着小编来一起看看吧。

本文主要给大家介绍的是关于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),希望有人交流相关问题。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持

相关文章

  • angular 用Observable实现异步调用的方法

    angular 用Observable实现异步调用的方法

    这篇文章主要介绍了angular 用Observable实现异步调用的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Angular8路由守卫原理和使用方法

    Angular8路由守卫原理和使用方法

    这篇文章主要给大家介绍了关于Angular8路由守卫原理和使用方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular8具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Angular实现跨域(搜索框的下拉列表)

    Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表功能,本文思路明确,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-02-02
  • AngularJS入门教程中SQL实例详解

    AngularJS入门教程中SQL实例详解

    本文主要介绍 AngularJS SQL,这里给大家整理了相关资料,并提供了实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • Angular企业级开发——MVC之控制器详解

    Angular企业级开发——MVC之控制器详解

    本篇文章主要介绍了Angular企业级开发——MVC之控制器详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • Angular2开发——组件规划篇

    Angular2开发——组件规划篇

    本文主要介绍了Angular2组件的相关知识。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • Angular.JS中指令ng-if的注意事项小结

    Angular.JS中指令ng-if的注意事项小结

    这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项,分享出来供大家参考学习,文中介绍的还是相对来说比较详细,对大家具有一定的参考借鉴价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • AngularJS ng-bind-template 指令详解

    AngularJS ng-bind-template 指令详解

    本文注意介绍AngularJS ng-bind-template 指令,这里把相关资料整理了一下,并附实例代码,有需要的小伙伴可以参考下
    2016-07-07
  • 详解JavaScript的AngularJS框架中的表达式与指令

    详解JavaScript的AngularJS框架中的表达式与指令

    这篇文章主要介绍了JavaScript的AngularJS框架中的表达式与指令,文中罗列了几个常用的指令属性加以说明,需要的朋友可以参考下
    2016-03-03
  • AngularJS入门知识之MVW类框架的编程思想探讨

    AngularJS入门知识之MVW类框架的编程思想探讨

    这篇文章主要介绍了AngularJS入门知识之MVW类框架的编程思想探讨,本文通过实现两个简单的业务需求,探讨AngularJS和传统的JavaScript控制DOM实现方式的差别,并尝试理解MVW此类框架在流行的Web前端开发中的编程思想,需要的朋友可以参考下
    2014-12-12

最新评论