zoukankan      html  css  js  c++  java
  • 认识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请求。这里就不举例了。

      

  • 相关阅读:
    使用TransactionScope实现事务
    CYQ.Data 框架系列
    MVP
    DYCOM用于开发网络应用程序的通信部分功能的快速开发
    架构师要了解
    Entity Framework资源
    Sina Blogs
    关于TransactionScope出错:“与基础事务管理器的通信失败”的解决方法总结
    在西方的程序员眼里,东方的程序员是什么样的?
    net2.0事务学习
  • 原文地址:https://www.cnblogs.com/y-yxh/p/5739017.html
Copyright © 2011-2022 走看看