使用 Node.js、Express、AngularJS 和 MongoDB 构建-2
|
- UID
- 1066743
|
使用 Node.js、Express、AngularJS 和 MongoDB 构建-2
创建局部 HTML 和模板为了呈现来自控制器的数据，Angular 使用了局部 HTML 模板，该模板允许您使用占位符和表达式来包含数据和执行操作，比如条件和迭代操作。在公共目录中，创建一个名为 partials 的新的子目录。我们将为我们的应用程序创建 3 个局部模板，第一个局部模板将会展示可用投票的列表，我们将使用 Angular 通过一个搜索字段轻松过滤该列表。
清单 6. public/partials/list.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <div class="page-header">
<h1>Poll List</h1>
</div>
<div class="row">
<div class="col-xs-5">
<a href="#/new" class="btn btn-default"><span class="glyphicon
glyphicon-plus"></span> New Poll</a>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" ng-model="query"
placeholder="Search for a poll">
</div>
</div>
<div class="row"><div class="col-xs-12">
<hr></div></div>
<div class="row" ng-switch on="polls.length">
<ul ng-switch-when="0">
<li><em>No polls in database. Would you like to
<a href="#/new">create one</a>?</li>
</ul>
<ul ng-switch-default>
<li ng-repeat="poll in polls | filter:query">
<a href="#/poll/{{poll._id}}">{{poll.question}}</a>
</li>
</ul>
</div>
<p> </p>
|
第二个局部模板允许用户查看投票。它使用 Angular 切换指令来确定用户是否已投票，并根据这些判断，显示一个就此次问卷调查进行投票的表格，或者一个包含显示问卷调查结果的图表。
清单 7. public/partials/item.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| <div class="page-header">
<h1>View Poll</h1>
</div>
<div class="well well-lg">
<strong>Question</strong><br>{{poll.question}}
</div>
<div ng-hide="poll.userVoted">
<p class="lead">Please select one of the following options.</p>
<form role="form" ng-submit="vote()">
<div ng-repeat="choice in poll.choices" class="radio">
<label>
<input type="radio" name="choice" ng-model="poll.userVote"
value="{{choice._id}}">
{{choice.text}}
</label>
</div>
<p><hr></p>
<div class="row">
<div class="col-xs-6">
<a href="#/polls" class="btn btn-default" role="button"><span
class="glyphicon glyphicon-arrow-left"></span> Back to Poll
</div>
<div class="col-xs-6">
<button class="btn btn-primary pull-right" type="submit">
Vote »</button>
</div>
</div>
</form>
</div>
<div ng-show="poll.userVoted">
<table class="result-table">
<tbody>
<tr ng-repeat="choice in poll.choices">
<td>{{choice.text}}</td>
<td>
<table style="width: {{choice.votes.length
/poll.totalVotes*100}}%;">
<tr><td>{{choice.votes.length}}</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
<p><em>{{poll.totalVotes}} votes counted so far. <span
ng-show="poll.userChoice">You voted for <strong>{{poll.userChoice.text}}
</strong>.</span></em></p>
<p><hr></p>
<p><a href="#/polls" class="btn btn-default" role="button">
<span class="glyphicon glyphicon-arrow-left"></span> Back to
Poll List</a></p>
</div>
<p> </p>
|
第三个也是最后一个局部模板定义了支持用户创建新的问卷调查的表单。它要求用户输入一个问题和三个选项。提供一个按钮，以便允许用户添加额外的选项。稍后，我们将验证用户至少输入了两个选项 — 因为如果没有几个选项，就不能称之为问卷调查。
清单 8. public/partials/new.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <div class="page-header">
<h1>Create New Poll</h1>
</div>
<form role="form" ng-submit="createPoll()">
<div class="form-group">
<label for="pollQuestion">Question</label>
<input type="text" ng-model="poll.question" class="form-control"
id="pollQuestion" placeholder="Enter poll question">
</div>
<div class="form-group">
<label>Choices</label>
<div ng-repeat="choice in poll.choices">
<input type="text" ng-model="choice.text" class="form-control"
placeholder="Enter choice {{$index+1}} text"><br>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-default" ng-click=
"addChoice()"><span class="glyphicon glyphicon-plus">
</span> Add another</button>
</div>
</div>
<p><hr></p>
<div class="row">
<div class="col-xs-6">
<a href="#/polls" class="btn btn-default" role="button">
<span class="glyphicon glyphicon-arrow-left"></span>
Back to Poll List</a>
</div>
<div class="col-xs-6">
<button class="btn btn-primary pull-right" type="submit">
Create Poll »</button>
</div>
</div>
<p> </p>
</form>
|
最后，为了显示结果，我们需要向 style.css 添加一些 CSS 声明。将该文件的内容替换为以下内容：
清单 9. public/stylesheets/style.css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| body { padding-top: 50px; }
.result-table {
margin: 20px 0;
width: 100%;
border-collapse: collapse;
}
.result-table td { padding: 8px; }
.result-table > tbody > tr > td:first-child {
width: 25%;
max-width: 300px;
text-align: right;
}
.result-table td table {
background-color: lightblue;
text-align: right;
}
|
此时，如果您运行该应用程序，就会看到一个空的问卷调查列表。如果您试着创建一个新的问卷调查，就能看到此表单并添加更多的选项，但您不能保存该问卷调查。我们将在下一步中详细介绍所有这些内容。 |
|
|
|
|
|
