<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">
<h3>Name : {{weatherData.name}}</h3>
<h3>Temperature : {{weatherData.main.temp}}</h3>
<h3>Pressure : {{weatherData.main.pressure}}</h3>
<h3>Humidity : {{weatherData.main.humidity}}</h3>
</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";
$scope.getWeatherData = function() {
+ $scope.place + "...";
$http.get("http://api.openweathermap.org/data/2.5/weather?q=" + $scope.place)
.then(onSuccess, onError);
};
var onSuccess = function(response) {
$scope.message = "Weather Information for " + $scope.place;
$scope.weatherData = response.data;
};
var onError = function(response) {
$scope.info = "Could not retrieve data";
};
};
//Register controller with module
app.controller("WeatherController",WeatherController);
}());
/* Styles go here */
AngularJS : Developing your first application – Part 1