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.
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.
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}}°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}} °F</span>
26 <label class="weatherInfo">Max Temp:</label>
27 <span class="weatherInfo">{{weather.tempMax}} °F</span>
28 </div>
29 </div>