[译]了解AngularJS $resource
多数AngularJS应用都需要一些CRUD操作. 你可以使用$resource服务快速的进行一个CRUD.
前提
$resource服务不包含在angular.js中
. 因为不是每个Angular应用都需要CRUD操作, 如果你需要使用$resource服务你必须首先引用angular-resource.js文件.
然后你需要把ngResource注入到你的app中:
angular.module('myApp', ['ngResource']);
我们这样做是因为$resource服务定义在ngResource模块中.
$resource是怎么工作的?
$resource和RESTful API工作. 这意味着你的的URLS应该类似于下面的模式
URL | HTTP Verb | Request Body | Result |
---|---|---|---|
/api/entries |
GET | empty | Returns all entries |
/api/entries |
POST | JSON String | Creates new entry |
/api/entries/:id |
GET | empty | Returns single entry |
/api/entries/:id |
PUT | JSON String | Updates existing entry |
/api/entries/:id |
DELETE | empty | Deletes existing entry |
为了在你的controller或者service中使用 $resource, 你需要声明一个对$resource的依赖
. 下面的代码展示了如何在你的自定义服务中使用$resource:
angular.module('myApp').factory('Entry', fucntion($resource){
return $resource('/api/entries/:id');
});
$resource默认有5个方法:
get()
query()
save()
remove()
delete()
现在来看看怎么使用这些方法:
angular.module('myApp').controller('ResourceController',
function($scope, Entry) {
var entry = Entry.get({ id: $scope.id }, function() {
console.log(entry);
}); // get() 返回单个entry var entries = Entry.query(function() {
console.log(entries);
}); //query() 返回所有的entry $scope.entry = new Entry(); //你可以实例化一个resource类 $scope.entry.data = 'some data'; // $scope.entry= {data:'some data'} Entry.save($scope.entry, function() {
//把$scope.entry序列化成一个JSON作为POST body
}); Entry.delete({ id: $scope.id }, function() {
console.log('Deleted from server');
});
});
get()
函数发起了一个GET请求 /api/entries/:id
. 在发送前我们把:id赋值为$scope.id. 注意了get()函数返回了一个空对象. 当数据从服务器返回的时候会自动填充到这个空对象. get()函数的第二个方法会在数据从服务器返回的时候执行. 你可以在这里把返回值赋值给$scope.
为什么使用空对象?
You might question the wisdom of showing an empty object initially. Actually it's a good thing because you can omit the callback passed toget()
function. 如果你只是想把model赋值给$scope而不关心数据是什么时候从服务器返回的, 你可以使用下面的方法:
$scope.entry = Entry.get({ id: $scope.id });
如果get不返回一个空对象的话, 你需要添加一个callback:
Entry.get({id: $scope.Id}, function(entry){
$scope.entry = entry;
);
query()对
/api/entries
发起了一个get请求(注意了没有:id
) 并返回一个空数组 (不是一个简单的对象). 当数据从服务器返回的时候这个空对象会被填充.
save()
对 /api/entries
发起了一个post请求. 第一个参数是POST body. 第二个参数是callback, 当数据保存完成后触发. You might recall that the return value of the $resource()
function is a resource class. So, in our case, we can call new Entry()
to create an actual resource instance, set various properties to it and finally save the object to the back end.
delete()
和 remove() 都对
/api/entries/:id发起一个delete请求
使用 remove()
兼容IE
有些IE浏览器可能不支持delete()
. 可以使用remove兼容IE.
在resource类中我们只使用get() query() (在我们的例子中resource类是Entry
). 所有非GET的方法, 例如 save()和
delete()在
new Entry()的实例中能用
(在这我们把它称为 $resource
实例). 不同的是这些方法以$开头
$save()
$delete()
$remove()
看看$save()方法是怎么使用的:
$scope.entry = new Entry();//这个对象有个$save()方法
$scope.entry.$save(function(){
console.log('data saved');
}); // $scope.entry 序列化成JSON作为POST body被发送
为了支持update操作, 我们需要修改代码如下
angular.module('myApp').factory('Entry', function($resource){
return $resource('/api/entries/:id', {id:'@_id'},{
update: {
method: 'PUT'
}
});
});
$resource()的第二个指示url的:id参数的值应该是什么. 这里设置为@_id, 当你调用$resource实例的$delete()和$update()的时候, :id的值会被设置为实例的_id属性. 这个是为PUT和DELETE请求使用的. 注意第三个参数. 这是一个map允许我们给resource类添加自定义的方法. 如果方法不是一个get请求的话, $resource实例会有一个以$开头的同名方法. 现在看看怎么使用$update方法:
$scope.entry = Entry.get({id:$scope.id}, function(){
//$scope.entry 是服务器返回来的 是一个Entry的实例
$scope.entry.data = 'something else';
$scope.entry.$update(function(){
console.info('updated');
});
});
当$update被调用, 会发生下面的东西:
AngularJS 知道$update()会触发一个对/api/entries/:id的PUT请求.
读取$scope.entry._id并将赋值给url的:id参数.
将$scope.entry作为一个请求体PUT个URL.
同样, 如果你想删除一个entry你可以这样做:
$scope.entry = Movie.get({id: $scope.id}, function(){
$scope.entry.$delete(function(){
//completed
});
});
使用 MongoDB
如果你使用的是MongoDB, 你从后端获取到的$scope.entry实例通常有一个叫_id的属性. { id: '@_id' }
当调用$update()或者$delete()的时候, url的:id参数会被赋值为实例的_id属性 .
$resource第四个参数是可选的. 它是一个客户自定义的配置. 这里我们只设置 stripTrailingSlashes
. 默认情况下它的值是true, 这意味他会自动去除url的最后一个/. 如果你不想这样可以这样:
angular.module('myApp').factory('Entry', function($resource) {
return $resource('/api/entries/:id', { id: '@_id' }, {
update: {
method: 'PUT' // this method issues a PUT request
}
}, {
stripTrailingSlashes: false
});
});
[译]了解AngularJS $resource的更多相关文章
- [译]ngclass expressions in angularjs
原文: http://blog.xebia.com/2014/01/31/ngclass-expressions-in-angularjs/ ngClass 指令允许你通过databinding一个表 ...
- [译]:Xamarin.Android开发入门——Hello,Android Multiscreen深入理解
原文链接:Hello, Android Multiscreen_DeepDive. 译文链接:Xamarin.Android开发入门--Hello,Android Multiscreen深入理解. 本 ...
- [译]:Xamarin.Android开发入门——Hello,Android Multiscreen快速上手
原文链接:Hello, Android Multiscreen Quickstart. 译文链接:Hello,Android Multiscreen快速上手 本部分介绍利用Xamarin.Androi ...
- [译]:Xamarin.Android开发入门——Hello,Android深入理解
返回索引目录 原文链接:Hello, Android_DeepDive. 译文链接:Xamarin.Android开发入门--Hello,Android深入理解 本部分介绍利用Xamarin开发And ...
- [译]:Xamarin.Android开发入门——Hello,Android快速上手
返回索引目录 原文链接:Hello, Android_Quickstart. 译文链接:Xamarin.Android开发入门--Hello,Android快速上手 本部分介绍利用Xamarin开发A ...
- [译]Asp.net MVC 之 Contorllers(一)
Asp.net MVC contorllers 在Ajax全面开花的时代,ASP.NET Web Forms 开始慢慢变得落后.有人说,Ajax已经给了Asp.net致命一击.Ajax使越来越多的控制 ...
- [译]Asp.net MVC 之 Contorllers(二)
URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...
- Failed to load resource: net::ERR_CACHE_MISS
Failed to load resource: net::ERR_CACHE_MISS 译为开发人员工具载入缓存的时候,说找不到资源. 原因是你先打开页面,然后打开chrome的开发人员工具.而页面 ...
- 【译】ASP.NET MVC 5 教程 - 2:添加控制器
原文:[译]ASP.NET MVC 5 教程 - 2:添加控制器 MVC 表示 模型-视图-控制器.MVC 是一种用于开发应用程序的模式,具备良好架构,可测试和易于维护.基于 MVC 应用程序中包含: ...
随机推荐
- NuGet多个项目依赖的公共组件如何打包
会有这样一种情况:在同一个解决方案下面,类库A是独立的,类库B是依赖于类库A的:类似这样: 所以在使用类库B时必须引入类库A的东西,这时如果作为nuget包打包发布,有如下的解决思路: 1.在整个解决 ...
- tomcat部署web应用的4种方法
在Tomcat中有四种部署Web应用的方式,简要的概括分别是: (1)利用Tomcat自动部署 (2)利用控制台进行部署 (3)增加自定义的Web部署文件(%Tomcat_Home%\conf\Cat ...
- hdu 5229 找规律
假设选择了字符串a和b: 假设两人都按照最聪明的策略,那么观察一下可以找出规律:当a和b的字符串长度之和为奇数的时候zcc会败. 另外当a==b的时候zcc也会败(当时做的时候忘了这个了T^T) 接下 ...
- AngularJs angular.injector、angular.module
angular.injector 创建一个injector对象, 调用injector对象的方法可用于获取服务以及依赖注入. 格式:angular.injector(modules); modules ...
- Beta版本冲刺第六天 12.12
一.站立式会议照片: 二.项目燃尽图: Android端 后台 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 邮箱验证和用户评价的填写 用户评价的查看以 ...
- 【Alpha版本】 第四天 11.10
一.站立式会议照片: 二.项目燃尽图: 三.项目进展: 成 员 昨天完成任务 今天完成任务 明天要做任务 问题困难 心得体会 胡泽善 填写招聘时用户填写各个日期到可以使用工具方便选择日期的修改 完成了 ...
- RBAC权限设计
http://blog.csdn.net/ms_x0828/article/details/7035956 RBAC 模型作为目前最为广泛接受的权限模型 角色访问控制(RBAC)引入了Role的概念, ...
- mybatis 传递参数的方法总结
有三种mybatis传递参数的方式: 第一种 mybatis传入参数是有序号的,可以直接用序号取得参数 User selectUser(String name,String area); 可以在xml ...
- 使用Keil uVision下载hex文件
在uVision3/uVision4/uVision5中,可以创建一个项目用来下载HEX文件到flash里面. 具体步骤如下: 1. 在菜单中,选择 Project - New Project... ...
- socket传数据并记录到文件中
最近在新项目中要通过socket传一些数据,下面是程序: 功能: 将客户端发送的json数据写入到日志文件中,如果数据不是json的,丢弃. 程序如下: #!/usr/bin/env python # ...