Defining the Weather AngularJS View

With the controller in place, you can define the view to consume the weather data. Listing 29.11 shows the basic template that consumes the weather data from the scope and renders it as shown in Figure 29.2.

Figure 29.2 The weather view allows you to quickly see the weather in a list of cities and add additional cities.

A text input at the top accepts the new city name and binds it to locationIn and a button that calls addCity() in the controller when clicked. Notice that all the weather data comes from the $scope.weather variable and is rendered using AngularJS expressions.

Listing 29.11 weather.html: Implementing AngularJS template for the weather view

Click here to view code image

01 <div ng-controller="weatherController"><hr>
02   <br><label class="weatherInfo">City:</label>
03   <input class="weatherInput" type="text" ng-model="locationIn" />
04   <input class="weatherButton" type="button"
05          ng-click="addCity()" value="Add City"/><hr>
06   <div class="cities">
07       <div class="city" ng-repeat="city in cities"
08            ng-click="setLocation(city)">
09         {{city}}
10       </div>
11   </div>
12   <div class="weatherData">
13     <p class="weatherCity">{{weather.name}}</p>
14     <img
15     ng-src="http://openweathermap.org/img/w/{{weather.icon}}.png" />
16     <span class="weatherTemp">{{weather.temp}}&deg;F</span>
17     <p class="weatherDesc">{{weather.description}}</p>
18     <label class="weatherInfo">Clouds:</label>
19     <span class="weatherInfo">{{weather.clouds}}%</span>
20     <label class="weatherInfo">Humidity:</label>
21     <span class="weatherInfo">{{weather.humidity}}%</span>
22     <label class="weatherInfo">Wind Speed:</label>
23     <span class="weatherInfo">{{weather.wind}} mph</span>
24     <label class="weatherInfo">Min Temp:</label>
25     <span class="weatherInfo">{{weather.tempMin}} &deg;F</span>
26     <label class="weatherInfo">Max Temp:</label>
27     <span class="weatherInfo">{{weather.tempMax}} &deg;F</span>
28   </div>
29 </div>