使用 Node.js、Express、AngularJS 和 MongoDB 构建一个实时问卷调查应用程序-1

look_w

第 1 步. 构建一个基础 Express 后台在 Eclipse 中，切换到 Node 透视图，并创建一个新的 Node Express 项目。如果您创建了一个 JazzHub 项目，请像我所做的那样，使用相同的名称为您的 Node Express 项目命名。选择使用 Jade 作为模板引擎。Eclipse 会自动下载所需的 npm 模块，以便创建一个简单 Express 应用程序。
运行这个 Express 应用程序在 Project Explorer 中，找到位于您项目的根目录中的 app.js，右键单击并选择 Run As > Node Application。这将启动一个 Web 服务器并将应用程序部署到该服务器。接下来，打开浏览器并导航到 。
图 1. Starter Express 应用程序配置基础前端这个问卷调查应用程序对常见用户界面和布局使用了 Bootstrap 框架。现在，让我们对 Express 应用程序做一些改动来反映这一点。首先，打开 routes/index.js，将标题属性更改为 Polls：
清单 1. routes/index.js

1 2 3

exports.index = function(req, res){      res.render('index', { title: 'Polls' }); };

接着，更改 views/index.jade 模板以包含 Bootstrap。Jade 是一种速记模板语言，可编译成 HTML。它使用缩进消除了对结束标签的需求，极大地缩小了模板的大小。您只需要使用 Jade 作为主页面布局即可。在下一步中，还可以使用 Angular 局部模板向这个页面添加功能。
清单 2. views/index.jade

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

doctype 5     html(lang='en')       head         meta(charset='utf-8')         meta(name='viewport', content='width=device-width, initial-scale=1, user-scalable=no')         title= title         link(rel='stylesheet', href='//netdna.bootstrapcdn.com/bootstrap/3.0.1/ css/bootstrap.min.css')         link(rel='stylesheet', href='/stylesheets/style.css')                      body         nav.navbar.navbar-inverse.navbar-fixed-top(role='navigation')           div.navbar-header             a.navbar-brand(href='#/polls')= title         div.container           div

想要查看对您的应用程序所做的更改，请结束 Eclipse 中的 Web 服务器进程，再次运行 app.js 文件：
图 2. 问卷调查应用程序样板文件注意：在使用 Jade 模板时，注意适当缩进您的代码，否则您会遇到麻烦。另外，还要避免使用混合缩进样式，如果您尝试这样做，Jade 将会报错。
第 2 步. 使用 AngularJS    提供前端用户体验如果要使用 Angular，首先需要在您的 HTML 页面中包含它，还需要在 HTML 页面中添加一些指令。在 views/index.jade 模板中，对 html 元素进行如下更改：
html(lang='en', ng-app='polls')。
在该文件的标头中添加以下脚本元素：    :
清单 3. 将脚本元素加载到 Angular 和 Angular Resource 模板

1 2 3

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')

接下来，更改模板中的 body 元素，添加一个 ng-controller 属性（稍后使用该属性将用户界面绑定到控制器逻辑代码中）：
body(ng-controller='PollListCtrl')。
最后，更改模板中的最后一个 div 元素，以便包含一个 ng-view 属性： div(ng-view)。
构建 Angular 模块
Angular 中令人影响较为深刻的特性就是数据绑定，在后台模型发生改变时，该功能会自动更新您的视图。这极大地减少了需要编写的 JavaScript 的数量，因为它对凌乱的 DOM 操作任务进行了抽象。

在默认情况下，Express 发布了静态资源，比如 JavaScript 源文件、CSS 样式表以及位于您项目的公共目录中的图像。在公共目录中，创建一个名为 javascripts 的新的子目录。在这个子目录中，创建一个名为 app.js 的文件。该文件将包含用于应用程序的 Angular 模块，而且还定义了用于用户界面的路由和模板：
清单 4. public/javascripts/app.js

1 2 3 4 5 6 7 8 9 10 11

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

Angular 控制器定义了应用程序的范围，为要绑定的视图提供数据和方法。
清单 5. public/javascript/controllers.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// Managing the poll list function PollListCtrl($scope) {   $scope.polls = []; } // Voting / viewing poll results function PollItemCtrl($scope, $routeParams) {   $scope.poll = {};   $scope.vote = function() {}; } // Creating a new poll function PollNewCtrl($scope) {   $scope.poll = {     question: '',     choices: [{ text: '' }, { text: '' }, { text: '' }]   };   $scope.addChoice = function() {     $scope.poll.choices.push({ text: '' });   };   $scope.createPoll = function() {}; }