Page 431 - AngularJS权威教程

31.10 设置界面 411

视图本身会遍历forecast.forecastday集合。对于每个元素，我们会创建一个视图来显示 19
Wunderground API为我们提供的天气图标，以及一个便于阅读的日期和最高温度，如图31-8所示。

<div id="forecast"> 20
<ul class="row list-unstyled">
<li ng-repeat="day in weather.forcast.forcastday" class="col-md-3">
<div ng-class="{{ today: $index == 0 }}">
<img src="{{ day.icon }}" ng-src="{{ day.icon_url }}" /> 21
<h3>{{ day.high.fahrenheit }}</h3>
<h4 ng-if="$index == 0">Now</h4>
<h4 ng-if="$index != 0">{{ day.date.weekday }}</h4> 22
</div>
</li>
</ul> 23
</div>

24

25

26

27

28
图31-8 干净的HTML天气视图
下面是设置给视图的样式： 29

#forcast ul li {
font-size: 4.5em; 30
text-align: center;
}
#forecast ul li h3 {
font-size: 1.4em; 31
}
#forecast ul li .today h3 {
font-size: 1.8em; 32
}

31.10 设置界面 33

目前，这个应用还只有一个视图，它带有一个硬编码的城市，用于为每个浏览者提取天气数 34
据。但是这个设置为所有人提供的都是旧金山的数据，因此它还不能为其他地方的人效力。

为了让用户能够使用Presently自定义体验，还需要添加另一个界面：设置界面。 35
要引进第二个界面（以及多个界面），需要将ngRoute模块作为依赖添加给我们的应用模块。
36
angular.module('myApp', ['ngRoute'])