Express+Socket.io实时投票系统（二）

接上一节，这一节，介绍一下Angularjs的安装
这里前端，我们用bower来安装，先安装

npm install -g bower

在工程项目下创建一个.bowerrc文件

{
    "directory": "public/lib"
}

这里以后所有通过bower命令安装的库都会放在public/lib目录下
好了，我们安装Angular吧

bower install angular
bower install angular-route

这里面安装了两个包，一个是angular的主包，一个是angular的路由，因为我们需要跳转，所以这里需要装一个angular-route的包
接下来，我们把bootstrap下的css文件拷贝到public的css文件夹下，什么？public下没有css文件夹？呵呵，因为express-generator创建的工程,public下只创建了stylesheets、javascripts、images三个文件夹，我们为了方便，把stylesheets改成css，javascripts改成js，再创建一个fonts的文件夹，是放bootstrap的fonts的，这里我们就把前端依赖库安装好了，
好，接下来，我们在public/js下创建一个app.js，这是我们angular的主文件

angular.module('pollsApp', ['ngRoute', 'controllers', 'pollServices'])
.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/polls', {
            templateUrl: 'js/views/partials/list.html',
            controller: 'PollListCtrl'
        })
        .when('/poll/:pollId', {
            templateUrl: 'js/views/partials/item.html',
            controller: 'PollItemCtrl'
        })
        .when('/new', {
            templateUrl: 'js/views/partials/new.html',
            controller: 'PollNewCtrl'
        })
        .otherwise({
            redirectTo: '/polls'
        });
}]);

这里代码不多，主要是用了angular的路由功能，对不同的url请求返回不同的页面和控制器。
接下来要写服务
在public/js/services下创建一个services.js

'use strict'

angular.module('pollServices', [])
.factory('Poll', function($http, $q){
    return {
        all: function(){
            var delay = $q.defer();
            $http.get('/polls').success(function(response){
                delay.resolve(response);
            }).error(function(){
                delay.reject("Can't get polls data.");
            })
            return delay.promise;
        },
        get: function(pollId){
            var delay = $q.defer();
            $http.get('/poll/' + pollId).success(function(response){
                delay.resolve(response);
            }).error(function(){
                delay.reject("Can't get pollId " + pollId + " data.");
            })
            return delay.promise;
        },
        save: function(poll){
            var delay = $q.defer();
            $http.post('/pollAdd', poll).success(function(){
                delay.resolve();
            }).error(function(){
                delay.reject("Can't save the data.");
            })
            return delay.promise;
        }
    }
});

这里通过angular的工厂生成一个Poll的服务器，这里主要定义了三个方法，一个是获取全部投票信息的请求，一个是获取单一投票信息的请求，最后一个就是创建投票信息的请求，这三个请求对应的是后台创建的三个处理。
这里用了$q来进行promise的处理，当然你也可以不用$q来处理。
接下来在public/js/controllers下创建controllers.js

'use strict'

angular.module('controllers', [])
//投票列表
.controller('PollListCtrl', function($scope, Poll){
    Poll.all().then(function(data){
        $scope.polls = data;
    });
})
//投票详情
.controller('PollItemCtrl', function($scope, $routeParams, socket, Poll){
    Poll.get($routeParams.pollId).then(function(data){
        $scope.poll = data;
    })
    
    //投票
    $scope.vote = function(){
        
    };
})
//创建新的投票
.controller('PollNewCtrl', function($scope, $location, Poll){
    $scope.poll = {
        question: '',
        choices: [
        { text: '' },
        { text: '' },
        { text: '' }
        ]
    };
    //增加选项
    $scope.addChoice = function(){
        $scope.poll.choices.push({ text: '' });
    };
    //创建投票
    $scope.createPoll = function(){
        var poll = $scope.poll;
        if(poll.question.length > 0){
            var choiceCount = 0;
            poll.choices.forEach(function(choice, index) {
                if(choice.text.length > 0){
                    choiceCount++;
                }
            });
            if(choiceCount > 1){
                var newPoll = $scope.poll;
                Poll.save(newPoll).then(function(){
                    $location.path('polls');
                })
            }else{
                alert('请填写一个以上选项');
            }
        }else{
            alert('请填写详细信息');
        }
    };
});

好了，差不多了，接下来我们在public/js/partials/views下创建三个html页面
list.html

  
投票列表


  

    创建
  
  

    
  


  

    

  


  

    

      没有投票信息， 是否要
      创建?
    

  

  

    

      {{poll.question}}
    
  

 

item.html

  
投票信息


  详细信息
{{poll.question}}


  
请选择以下一个选项
  

    

      
        {{choice.text}}
      
    
    

    

      

         返回
      
      

        投票 »
      
    
  


  

    

      

        
{{choice.text}}
        

          

            
{{choice.votes.length}}
          
        
      
    
  
  
  

    共投了{{poll.totalVotes}}票. 
      你投了
        {{poll.userChoice.text}}.
      
    
  
  

  

   返回列表

 

new.html

  
创建新投票


  

    详细信息
    
  
  

    选项
    

      

    
  
    
  

    

       增加选项
    
  
  

  

    

       返回列表
    
    

      创建 »
    
  
  
 

views/index.jade

html
  head
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')
    title= title
    link(rel='stylesheet', href='/css/bootstrap.min.css')
    link(rel='stylesheet', href='/css/style.css')
    script(src='lib/angular/angular.min.js')
    script(src='lib/angular-route/angular-route.min.js')
    script(src='/socket.io/socket.io.js')
    script(src='js/app.js')   
    script(src='js/controllers/controllers.js') 
    script(src='js/services/services.js')        
  body(ng-app='pollsApp')
    nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
      div.navbar-header
        a.navbar-brand(href='#/polls')= title
    div.container
      div(ng-view)

创建完成后，我们现在运行一下

npm start

访问http://localhost:3000
如果没有报错的话，应该显示如下：

屏幕快照 2016-10-27 下午5.04.55.png

屏幕快照 2016-10-27 下午5.05.52.png

屏幕快照 2016-10-27 下午5.05.05.png

好了，第二节结束了，第三节，我们为投票系统加入socket.io来进行实时操作。