<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<!-- Use the name of module to load-->
<body ng-app="WeatherApp">
<div ng-controller="WeatherController">
<div id="input">
<h1 ng-bind="title"></h1>
<label for="Name">Name of the Place :</label>
<input required="" name="Name" type="text" ng-model="place" />
<input type="submit" ng-click="getWeatherData()" value="Get Weather Info" />
<div>
<h3>{{info}}</h3>
</div>
</div>
<!-- Binding to show weather data -->
<div id="output" ng-show="weatherData" ng-include="'weatherinfo.html'">
</div>
</div>
</body>
</html>
//IIFE - Immediately invoked function expression
(function(){
//Define module
app= angular.module("WeatherApp",[]);
var WeatherController = function($scope,$http) {
$scope.title = "Weather Information";
$http.get("http://jsonplaceholder.typicode.com/users")
.then(onSuccess, onError);
$scope.getWeatherData = function() {
+ $scope.place + "...";
//getting current weather information
$http.get("http://jsonplaceholder.typicode.com/users")
.then(onSuccess, onError);
//getting historical weather information
var milliseconds = new Date().valueOf()/1000 | 0;
$http.get("http://api.openweathermap.org/data/2.5/history/city?type=day&start=1356998400&q="+ $scope.place)
.then(onHistorySuccess,onHistoryError);
};
var onSuccess = function(response) {
console.log("onSuccess");
$scope.message = "Weather Information for " + $scope.place;
$scope.weatherData = response.data;
};
var onError = function(response) {
$scope.info = "Could not retrieve data";
};
var onHistorySuccess=function(response){
$scope.historicalInfo = response.data.list;
};
var onHistoryError = function(response){
$scope.info = "Could not retrieve historical data";
};
};
//Register controller with module
app.controller("WeatherController",WeatherController);
}());
table, td, th {
border: 1px solid gray;
}
th {
background-color: gray;
color: white;
}
<div>
<h3>Name : {{weatherData.name}}</h3>
<h3>Temperature : {{weatherData.main.temp}} K</h3>
<h3>Pressure : {{weatherData.main.pressure}} mBar</h3>
<h3>Humidity : {{weatherData.main.humidity}} %</h3>
</div>
<div>
<table ng-show="historicalInfo">
<caption>
<h3>Historical Data</h3>
</caption>
<tr>
<th>Time</th>
<th>Temperature (K)</th>
<th>Pressure (mBar)</th>
<th>Humidity (%)</th>
</tr>
<tr>
</tr>
<tr ng-repeat="info in historicalInfo">
<td>{{info.dt*1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td>{{info.main.temp}}</td>
<td>{{info.main.pressure}}</td>
<td>{{info.main.humidity}}</td>
</tr>
</table>
</div>