<!DOCTYPE html>
<html lang="en" ng-app="WeatherApp" ng-controller="WeatherController">
<head>
<title>{{title}}</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=yes">
<meta http-equiv="X-UA-Compatible" content="IE-Edge">
<script src="../../angular/angular.min.js"></script>
<script src="../../angular/angular-route.min.js"></script>
<script src="../../angular/angular-resource.min.js"></script>
<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<nav class="navbar navbar-default">
<!-- <div class="container-fluid">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Weather Forcast</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search" ng-submit="search()">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" ng-model="city">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h1>{{title}}</h1>
<div ng-view></div>
</div>
</div>
</div>
</body>
</html>
var api_key = 'a452877e758e5881d0d9ab3fcc406fbe';
angular.module('WeatherFilters', [])
.filter('kelvin2celsius', function($filter) {
return function(kelvin) {
var celsius = kelvin - 273.15;
return $filter('number')(celsius, 1);
};
})
.filter('kelvin2fahrenheit', function() {
return function(kelvin) {
var fahrenheit = kelvin * 9/5 - 459.67;
return $filter('number')(fahrenheit, 1);
};
})
.filter('convert_temp', function($filter) {
return function(kelvin, scale) {
if (scale === 'C') {
var celsius = kelvin - 273.15;
return $filter('number')(celsius, 1);
}
if (scale === 'F') {
var fahrenheit = kelvin * 9/5 - 459.67;
return $filter('number')(fahrenheit, 1);
}
return kelvin;
};
})
.filter('ts2date', function() {
return function(ts) {
return new Date(ts * 1000 );
}
});
angular.module('WeatherApp', ['ngRoute', 'ngResource', 'WeatherFilters'])
.controller('WeatherController', ['$scope', '$location', function($scope, $location) {
$scope.title = "Weather Forecast";
$scope.search = function() {
console.log($scope.scale);
console.log('search', $scope.city);
$location.path("/city/" + $scope.city);
};
}])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'main.html',
controller: 'mainController'
}).
when('/city/:name', {
templateUrl: 'city.html',
controller: 'cityController'
}).
otherwise({
redirectTo: '/'
});
}]);
angular.module('WeatherApp')
.controller('mainController', [function () {}])
.controller('cityController', ['$scope', '$routeParams', '$resource', function ($scope, $routeParams, $resource) {
//console.log('city', $routeParams.name);
$scope.city = $routeParams.name;
//<span ng-init="scale = 'K'"></span>
$scope.scale = 'K';
$scope.days = '1';
$scope.$watch('days', function(new_value, old_value) {
console.log('new value', new_value);
$scope.update(new_value);
});
$scope.update = function(days) {
$scope.weatherAPI = $resource('/openweathermap/data/2.5/forecast/daily', {
}, { });
// $scope.weatherAPI = $resource('http://api.openweathermap.org/data/2.5/forecast/daily', {
// callback: "JSON_CALLBACK" }, { get: { method: "JSONP" } });
$scope.weatherResults = $scope.weatherAPI.get( {
q: $scope.city,
mode: 'json',
cnt: days,
appid: api_key
} );
console.log($scope.weatherResults);
};
}]);
City: {{city}}
<div>
Scale:
<button class="btn btn-default" ng-class="{'disabled btn-primary': scale === 'K'}" ng-click="scale = 'K'">K</button>
<button class="btn btn-default" ng-class="{'disabled btn-primary': scale === 'C'}" ng-click="scale = 'C'">C</button>
<button class="btn btn-default" ng-class="{'disabled btn-primary': scale === 'F'}" ng-click="scale = 'F'">F</button>
</div>
<div>
Days:
<button class="btn btn-default" ng-class="{'disabled btn-primary': days === '1'}" ng-click="days = '1'">1</button>
<button class="btn btn-default" ng-class="{'disabled btn-primary': days === '3'}" ng-click="days = '3'">3</button>
<button class="btn btn-default" ng-class="{'disabled btn-primary': days === '7'}" ng-click="days = '7'">7</button>
<button class="btn btn-default" ng-class="{'disabled btn-primary': days === '10'}" ng-click="days = '10'">10</button>
</div>
<table class="table table-striped">
<tr>
<th>Date</th>
<th>Temprature</th>
<th>Weather</th>
</tr>
<tr ng-repeat="d in weatherResults.list">
<td>{{d.dt | ts2date | date:'yyyy-MM-dd' }}</td>
<td>{{d.temp.day | convert_temp:scale }} {{ scale }} </td>
<td>{{d.weather[0].description}}</td>
</tr>
</table>
main page