这段时间公司有个项目要用到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请求。这里就不举例了。