脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJs中$resource和restfu数据交互

详解AngularJs中$resource和restfu服务端数据交互

 更新时间：2016年09月21日 14:30:46   投稿：daisy  
之前小编和大家分享过使用$http同服务器进行通信，但是功能上比较简单，angularjs还提供了另外一个可选的服务$resource,使用它可以非常方便的同支持restful的服务单进行数据交互。下面来一起看看吧。

$resource

创建一个resource对象的工厂函数，可以让你安全的和RESFUL服务端进行数据交互。

安装

ngResource模块是一个可选的angularjs模块，如果需要使用，我们要单独引用js

<script type="text/javascript" src="/javascripts/angular-resource.js">

$resource应用

我们并不是直接通过$resource服务本身同服务器通信，$resource是一个创建资源对象的工厂，用来创建同服务端交互的对象。

var User = $resource('/api/users/:userId', {userId:'@id'});

返回的User对象包含了同后端服务进行交互的方法，我们可以把User对象理解成同RESTFul的后端服务进行交互的接口。

该对象包含两个get类型的方法已经三个非get类型的方法。

User.get({id:'123'}, successFn, errorFn);

该方法向url发送一个get请求，并期望一个json类型的响应。这里会向/api/users/123发送一个请求，successFn处理请求成功响应，errorFn处理错误。

User.query(params, successFn, errorFn)

同get()方法使用类似，一般用来请求多条数据。

save(params, payload, successFn, errorFn);

save方法会发起一个post请求，params参数用来填充url中变量，对象payload会作为请求体进行发送

delete(params, payload, successFn,errorFn)

delete方法一个DELETE请求，payload作为消息体进行发送

remove(params, payload, successFn, errorFn)

同delete类似，不同的是remove用来移除多条数据

通过$resource生成的对象来同服务器进行交互的时候，我们看可以定义处理成功以及处理失败的函数，这些函数接受的参数不仅仅是简单的对象，而是经过包装之后的对象，会被添加$save() , $remove() , $delete三个方法，可以直接调用这三个方法来后服务端进行交互。

User.get({id:'123'}, function(user){
 user.name = 'changeAnotherName';
 user.$save();
//这里等价于User.save({id:'123'},{name:'changeAnotherName'})
});

$resource扩展

$resource对常见的五种请求进行封装，我们还可以对$resource进行扩展。

这里要扩展$resource我们需要传入第三个参数，该参数是一个对象。

$resource('/api/users',{},{
 sendEmail:{
  method:'',
  url:'',
  params:{},
  isArray:boolean,
  transformRequest:函数或者函数数组
  transformResponse:函数或者函数数组
  cache:布尔型或缓存对象
  timeout:数值或promise对象
  withCredentials:布尔类型
  responseType:字符串，用来设置XMLHttpRequestResponseType属性
 }
})

我们也可以将$resource服务当做自定义服务的基础。

angular.module('testApp', ['ngResource']),factory('UserService',['$resource', function($resource){
  return $resource(url,{},{});
}]);

总结

以上就是关于AngularJs中$resource和restfu服务端数据交互的全部内容，希望这篇文章对大家学习或者使用AngularJS能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

相关文章

  • AngularJS实践之使用NgModelController进行数据绑定

    AngularJS实践之使用NgModelController进行数据绑定

    大家都知道AngularJS中的指令是其尤为复杂的一个部分，但是这也是其比较好玩的地方。这篇文章我们就来说一说如何在我们自定义的指令中，利用ngModel的controller来做双向数据绑定，本文对大家学习AngularJS具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴。
    2016-10-10
  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件，接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程，对angularjs相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • AngularJS ng-table插件设置排序

    AngularJS ng-table插件设置排序

    这篇文章主要介绍了AngularJS ng-table插件设置排序的相关资料,需要的朋友可以参考下
    2016-09-09
  • 详解使用路由延迟加载 Angular 模块

    详解使用路由延迟加载 Angular 模块

    这篇文章主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 浅谈angular.js跨域post解决方案

    浅谈angular.js跨域post解决方案

    本篇文章主要介绍了浅谈angular.js跨域post解决方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • angularjs 实现带查找筛选功能的select下拉框实例

    angularjs 实现带查找筛选功能的select下拉框实例

    本篇文章主要介绍了angularjs 实现带查找筛选功能的select下拉框实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • 浅谈Angular HttpClient简单入门

    浅谈Angular HttpClient简单入门

    本篇文章主要介绍了浅谈Angular HttpClient 简单入门，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • AngularJS ng-bind 指令简单实现

    AngularJS ng-bind 指令简单实现

    本文主要介绍AngularJS ng-bind 指令,在这里对ng-bind 指令做了详细资料整理并讲解，提供了实例代码以便大家参考，有需要的小伙伴可以参考下
    2016-07-07
  • 详细介绍RxJS在Angular中的应用

    详细介绍RxJS在Angular中的应用

    本篇文章主要介绍了详细介绍RxJS在Angular中的应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 使用AngularJS和PHP的Laravel实现单页评论的方法

    使用AngularJS和PHP的Laravel实现单页评论的方法

    这篇文章主要介绍了使用AngularJS和PHP的Laravel实现单页评论的方法,本文的示例是前端JavaScript和后端PHP联合编程的典范,需要的朋友可以参考下
    2015-06-06

最新评论