Cash'yu

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

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

  

posted on 2016-08-05 00:30  cmmkj  阅读(877)  评论(0编辑  收藏  举报