AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了。
REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式
1)我们首先需要引入ng-Resource 模块,在angular之后
<script src="js/vendor/angular.js"></script>
<script src="js/vendor/angular-resource.js"></script>
2) 在我们的应用中需要将其当做依赖进行引用
angular.module('myApp', ['ngResource']);
3)如何使用?
$resource服务本身是一个创建资源对象的工厂,返回的$resource对象中包含了同后端服务器进行的交互的高层API.
var User=$resource('/api/users/:userId',{userId:'@id'});
可以把User对象理解成同RESTful的后端服务进行交互的接口。
【HTTP GET类型的方法】
①GET请求: get(params,successFn,errrorFn)
不定义具体的参数,get()请求通常被用来获取单个资源。
//GET /api/users
User.get(function(resp){
//处理成功
},function(err){
//处理错误
});
如果参数中传入了具名参数(我们例子中的参数是id),那么get()方法会向包含id的URL发送请求:
//发起一个请求:GET-->/api/users/123
User.get({id:'1234'},function(resp){
//success
},function(error){
//fail
});
②QUERY 请求:query向指定URL发送一个GET请求,并期望返回一个JSON格式的资源对象集合。
//发起一个请求
User.query(function(users){
//读取集合中的第一个用户
var user=users[0];
});
query()和get()方法之间唯一的区别是AngularJS期望query()方法返回数组。
【非HTTP GET类型的方法】
1. save(params, payload, successFn, errorFn)
save方法向指定URL发送一个POST请求,并用数据体来生成请求体。save()方法用来在服务器上生成一个新的资源。 payload:代表请求发送的数据体
//发送一个请求 with the body {name: 'Ari'}
User.save({},{name:'Ari'},function(resp){
},function(error){
});
2. delete(params, payload, successFn, errorFn)
delete方法会向指定URL发送一个DELETE请求,并用数据体来生成请求体。它被用来在服务器上删除一个实例:
// DELETE /api/users
User.delete({}, {
id: '123'
}, function(response) {
// 处理成功的删除响应
}, function(response) {
// 处理非成功的删除响应
});
3. remove(params, payload, successFn, errorFn)
remove方法和delete()方法的作用是完全相同的,它存在的意义是因为delete是JavaScript的保留字,在IE浏览器中会导致额外的问题。
// 发起一个请求:
// DELETE /api/users
User.remove({}, {
id: '123'
}, function(response) {
// 处理成功的删除响应
}, function(response) {
// 处理非成功的删除响应
});
AngularJS中使用$resource的更多相关文章
- 黄聪:AngularJS中的$resource使用与Restful资源交互(转)
原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...
- 浅谈AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational ...
- AngularJS 中的 Promise 和 设计模式(转)
原文地址:http://my.oschina.net/ilivebox/blog/293771 目录[-] Promise 简单例子 链式 Promise Parallel Promises And ...
- AngularJS 中的 Promise 和 设计模式
解决 Javascript 异步事件的传统方式是回调函数:调用一个方法,然后给它一个函数引用,当这个方法完结的时候执行这个函数引用. <!-- lang: js --> $.get('ap ...
- AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法
简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的 ...
- AngularJS中get请求URL出现跨域问题
今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="m ...
- 解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题
解决Android中No resource found that matches android:TextAppearance.Material.Widget.Button.Inverse问题http ...
- AngularJS 中的Promise --- $q服务详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- AngularJS中的表单验证
AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...
随机推荐
- 【转】NGUI研究院之三种方式监听NGUI的事件方法(七)
NGUI事件的种类很多,比如点击.双击.拖动.滑动等等,他们处理事件的原理几乎万全一样,本文只用按钮来举例. 1.直接监听事件 把下面脚本直接绑定在按钮上,当按钮点击时就可以监听到,这种方法不太好很不 ...
- rabbitmq之back queue草稿
申请队列rabbit_reader在收到消息后处理数据帧时,如果channel id不是0(0代表连接),则认为是channel相关方法. handle_frame(Type, Channel, Pa ...
- lnmp配置Yii2规则
nginx配置: 参考地址:http://www.cnblogs.com/grimm/p/5389970.html location / { try_files $uri $uri/ /index.p ...
- 自动化服务安装部署工具-Ansible
自动化运维工具Ansible详细部署 ================================================================================= ...
- 【Html 学习笔记】第二节——文本格式
上一节基本已经了解了一些html的基础,这一节主要学习html处理文本相关内容,直接看内容吧. 字体: 预格式文本:<pre> 地址:<address> 缩写:<abbr ...
- Sql Server中暂停命令
Sql Server中暂停几秒再执行后面的命令! -- 语法WAITFOR { DELAY 'time_to_pass' | TIME 'time_to_execute' | [ ( r ...
- 就publish/subscribe功能看redis集群模式下的队列技术(一)
Redis 简介 Redis 是完全开源免费的,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久化,可以将内存中 ...
- Centos下ACL(访问控制列表)介绍(转)
我们知道,在Linux操作系统中,传统的权限管理分是以三种身份(属主.属組以及其它人)搭配三种权限(可读.可写以及可执行),并且搭配三种特殊权限(SUID,SGID,SBIT),来实现对系统的安全保护 ...
- SublimeText教程
1安装插件 1.請先確認已經安裝好Package Control 未安裝的話請看:安裝第一個Sublime Text套件 2.按下CTRL + SHIFT + P並且輸入Package Control ...
- Nodejs websocket入门
websocket 2011年技术文档 http://www.ibm.com/developerworks/cn/web/1112_huangxa_websocket/index.html 浏览器端接 ...