Page 427 - AngularJS权威教程

31.8 构建主页 407

目前，浏览器中的这个日期还非常丑陋。我们可以利用Angular内置的过滤器以更优雅的方 19
式来格式化这个日期。
让我们在主屏幕上以类似于普通日期格式的方式格式化这个日期。更新视图时，需要将这个 20
日期移到它嵌套的div中，然后添加显示日期的格式：

<div class="container"> 21
<div ng-controller="MainController">
<div id="datetime">
<h1>{{ date.raw | date:'hh mm ss' }}</h1>
</div> 22
</div>
</div>
23
然后借鉴Bootstrap的帮助使用一点CSS，这个日期就会以更人性化的格式显示在屏幕上，如
图31-5所示。
24

25

26

27

28

图31-5 第一个界面 29
这里我们还使用了一点点CSS规则让日期和时间居中显示在屏幕上，同时放大了字体大小以
让它突出显示在屏幕上。 30

#datetime {
text-align: center; 31
}
#datetime h1 {
font-size: 6.1em; 32
}
你可以在视图中添加另一个日期，以人性化的方式来显示当前日期。只要再添加一个格式化
的日期就可以了： 33

<!-- ... -->
<div id="datetime"> 34
<h1>{{ date.raw | date: 'hh mm ss' }}</h1>
<h2>{{ date.raw | date: 'EEEE, MMMM yyyy' }}</h2>
</div> 35
<!-- ... -->

下面的CSS用于给#datatime h2简单地增大<h2>标签的字体大小，效果如图31-6所示。
36