[译]了解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 应用程序中包含: ...
随机推荐
- Windows XP/Windows 7/Windows 8/Windows 10系统封装的另类教程和思路
如果是早些年,XP时代的Ghost封装,各种的封装工具和驱动只能安装工具满天飞,比如龙帝国,还有很早用C++写的忘了什么名字了,自由天空的,非常的多: 当时为什么要用Ghost和用这些驱动安装工具以及 ...
- hdu5175 gcd 求约数
题意:求满足条件GCD(N,M) = N XOR M的M的个数 sol:和uva那题挺像的.若gcd(a,b)=a xor b=c,则b=a-c 暴力枚举N的所有约数K,令M=NxorK,再判断gcd ...
- phpMyadmin /scripts/setup.php Execute Arbitrary PHP Code Via unserialize Vul Object Injection PMASA-2010-4
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对这个漏洞简单的概括如下 . "/scripts/setup.php&q ...
- static和public的区别
static:静态. 可以设置:静态类.静态变量.静态方法. 没有使用static修饰的成员为实例成员. 静态成员的使用:通过类名. 1.不加static修饰的成员是对象成员,归每个对象所 ...
- scala中集合的交集、并集、差集
scala中有一些api设计的很人性化,集合的这几个操作是个代表: 交集: scala> Set(1,2,3) & Set(2,4) // &方法等同于interset方法 sc ...
- django-redis和redis-py
项目之前使用memcache做缓存,现在转到redis,改写几个语句的事情,然后就这种我把django-redis和py-redis搞混了,记录一下. django默认使用memcache做缓存,这里 ...
- url学习1
URLConnection提交请求 URL 对象代表统一资源定位器,他是指向互联网"资源"的指针. 通过URL读取网络资源 可以使用如下方法: URL url = new URL( ...
- w3m浏览器 for Linux
w3m是个开放源代码的文字式网页浏览器. w3m支持表格.框架.SSL连线.颜色. 如果是在适当的terminal(内核支持framebuffer)上,甚至还能显示图片. 这个软件通常尽量呈现出网页本 ...
- JavaScript中的变量及数据类型
转自:http://blog.csdn.net/mygis2005/article/details/7375419 JavaScript是一种弱类型的语言,变量名.操作符和方法名都区分大小写. 1.变 ...
- IP地址、子网掩码、网关、DNS的关系
什么是IP地址所谓IP地址就是给每个连接在Internet上的主机分配的一个32bit地址.按照TCP/IP协议规定,IP地址用二进制来表示,每个IP地址长32bit,比特换算成字节,就是4个字节 ...