认识angualrJS的resource服务
这段时间公司有个项目要用到angularJS,于是就在网上开始各种找学习资料。
一开始下了一本《angularJS权威教程》,看了10章,实在看不下去了,只能说这本书对于才接触javascript和nodejs的新手来说,写的太难了(例子太少)
然后又在网上找了一些视频教程,我看的是慕课网的,反正新手看视频比看书要容易接受的多。
看完视频以后,我就找了一个小项目来练练手了,项目地址
我对$resource的理解也是根据这个项目来的
angularJS据说是javascript框架中最难的最难的一个,我才接触JS,其实也不是很了解,但之前也看过一点jquery,只能说angularJS的确比jquery要难很多,下面来介绍下angularJS的编程习惯:
- angularJS的程序分为控制器和服务,通常所有控制器放在一个文件夹下比如controller,服务放在server文件下;
- 当有多个控制器,且有些控制器有共同部分时,可以将共同部分成一个程服务;
本文主要讲解$resource服务:
使用场合:$resource服务可以创建一个资源对象,我们可以用它非常方便的同支持RESTFUL服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,这个服务就派上用场了。
安装:要使用这个服务,当然要先有支持这个服务,这里说安装,不如说是引入,想要使用需要去官网下载相应的库文件,并加入到引导界面文档文件里面,如下(下面是以jade模版举例):
script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js')
script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js')
使用方法:$resource本身包含有5种常用的方法(实际上是4种方法),4种方法的作用都不一样。
例如我们创建一个下面的服务,该服务可以在上面的项目地址找到:
angular.module('pollServices', ['ngResource']).
factory('Poll', function($resource) {
return $resource('polls/:pollId', {}, {
query: { method: 'GET', params: { pollId: 'polls' }, isArray: true }
})
});
上面定定义了一个名为pollServices的服务,该服务的url为polls/:pollId(其中pollId为参数,必要时可以省略这个参数),这个服务重定义了方法query,该方法是向服务器发送get请求,相当于GET /polls/polls HTTP/1.1(注意,在query方法中,将polls复制给了pollId),该方法返回一个数组。
下面来分别接收这几种方法,由于我改写的项目代码不在这台电脑上面,所以路由的处理函数没办法上传,大家可以去看我上传到github上的代码:
1.get方法:发送一个get请求,并期望返回一个JSON类型的响应。例如:
function PollItemCtrl($scope, $routeParams, Poll) {
$scope.poll = Poll.get({pollId: $routeParams.pollId});
$scope.vote = function() {};
}
这里相当于向服务器发送get的请求:GET /polls/具体的pollId HTTP/1.1,我们只需要使用get的方法,$resource会为我们做get请求需要的所有工作。是不是很方便,很好用。当然,后端接收到这个请求之后,需要做出响应,这个就要写/polls/具体的pollId路由的处理函数了,项目中有。
2.query方法:该方法被重定义。
function PollListCtrl($scope, Poll) {
$scope.polls = Poll.query();
}
相当于向服务器发送 GET /polls/polls HTTP/1.1 请求,后端需要有针对 /polls/polls的处理函数。
3.save方法:向指定的url发送一个post请求,并用数据体来生成请求体。
$scope.createPoll = function() {
var poll = $scope.poll;
if(poll.question.length > 0) {
var choiceCount = 0;
for(var i = 0, ln = poll.choices.length; i < ln; i++) {
var choice = poll.choices[i];
if(choice.text.length > 0) {
choiceCount++
}
}
if(choiceCount > 1) {
var newPoll = new Poll(poll);
newPoll.$save(function(p, resp) {
if(!p.error) {
$location.path('polls');
} else {
alert('Could not create poll');
}
});
} else {
alert('You must enter at least two choices');
}
} else {
alert('You must enter a question');
}
};
这里重新生成了一个实例(var newPoll = new Poll(poll)),所以使用$resource的方式时要加上$符号,如:newPoll.$save(function(p, resp)
这里的save方法相当于:POST /polls HTTP/1.1,后端需要有针对 /polls的处理函数。
4.delete方法和remove方法,这两个方法的作用完全一样,只是早起浏览器的不兼容造成的,现在应该没有这个问题了,所以用哪个都可以,这两个方法的作用就是向服务器发送一个delete请求。这里就不举例了。
认识angualrJS的resource服务的更多相关文章
- AngularJs的resource服务与Rest服务交互
前言以后补: * 在使用resource服务返回的资源对象后具有与后台数据交互的五大接口:save query delete remove get 五种默认行为: { "get": ...
- AngularJS入门讲解4:多视图,事件绑定,$resource服务讲解
上一课,大家知道,手机详细模板我们没有写出来,使用的是一个占位模板. 这一课,我们先实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 为了实现手机详细信息视图,我们将会使用 ...
- AngularJS的 $resource服务 关于CRUD操作
AngularJs 的CRUD 操作 是指对数据库的操作: CRUD其实是数据库基本操作中的Create(创建).ReadRetrieve(读取).Update(更新).Delete(删除).而这里的 ...
- AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representat ...
- [译]了解AngularJS $resource
原文: https://learnable.com/books/angularjs-novice-to-ninja/preview/understanding-angularjs-resource-e ...
- angular $resource模块
目录(?)[-] 安装 应用resource 扩展resource 上一篇中讲到使用$http同服务器进行通信,但是功能上比较简单,angularjs还提供了另外一个可选的服务$resource, ...
- AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11
1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现 ...
- [转]AngularJS的$resource
转自:http://blog.csdn.net/violet_day/article/details/17403207 $http $http服务是基于$q服务的,提供了promise封装,它接受一个 ...
- BeanDefinition的Resource定位——2
1.FileSystemXmlApplicationContext的实现 public class FileSystemXmlApplicationContext extends AbstractXm ...
随机推荐
- html5 video标签兼容性与自定义控件
Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...
- OC面向对象—继承
OC面向对象—继承 一.基本概念 程序的世界和人类的“对象”世界在思想上是没有设么区别的,富二代继承了父母,自然就拥有了父母拥有的所有资源,子类继承了父类同样就拥有了父类所有的方法和属性(成员变量). ...
- 为什么上传文件的表单里要加个属性enctype
为什么上传文件的表单里要加个属性enctype 上传文件的表单中<form>要加属性enctype="multipart/form-data",很多人只是死记硬背知道上 ...
- webix源码阅读
最近在用webix,需要一个类似九宫格的监控界面.自带的控件里没有,于是萌生出做一个Custom Component的需求.不过webix关于自定义控件的文档比较少,官方只有一篇<Creatin ...
- Linux Shell 脚本入门
linux shell 脚本格式 #!/bin/sh#..... (注释)命令...命令... 使用vi 创建完成之后需设置权限 chmod +x filename.sh 执行命令: ./filena ...
- 跑马灯标记marquee
常见属性: direction:滚动方向(left默)/right/up/down; behavior:滚动方式(scroll默)/slide/alternate来回弹动: width.height. ...
- spark0.9.1 assembly build-RedHat6.4 YARN 2.2.0
1. Install git on RedHat6.4: 1.1. setup your local yum repo 1.2. yum install git 2. Install JDK and ...
- 递归问题==优化 还有数据库sqlreader
reader尽量不要用获取列名方式 用索引比较好. int i= reader.GetOrdinal("<#=c.ColumnName#>"); reader[i ...
- python 的 *args 和 **kwargs
Python支持可变参数,通过*args和**kwargs来指定,示例如下: def test_kwargs(first, *args, **kwargs): print 'Required a ...
- 你会用Python做出装逼的东西吗
如果我回答:“用Python很牛逼,但不能做出装逼的东西”,那大家来学习“小白的Python入门教程 ”,还有多少意义? 所以,为了让装逼的小船升级为牛逼的巨轮,让大家学完“小白的Python入门教程 ...