app.js:
// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);
// ROUTES
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
.when('/forecast/:days', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
// SERVICES
weatherApp.service('cityService', function() {
this.city = "New York, NY";
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', 'cityService', function($scope, cityService) {
$scope.city = cityService.city;
$scope.$watch('city', function() {
cityService.city = $scope.city;
});
}]);
weatherApp.controller('forecastController', ['$scope', '$resource', '$routeParams', 'cityService', function($scope, $resource, $routeParams, cityService) {
$scope.city = cityService.city;
$scope.days = $routeParams.days || '2';
$scope.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", { callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }});
$scope.weatherResult = $scope.weatherAPI.get({ q: $scope.city, cnt: $scope.days });
$scope.convertToFahrenheit = function(degK) {
return Math.round((1.8 * (degK - 273)) + 32);
}
$scope.convertToDate = function(dt) {
return new Date(dt * 1000);
};
}]);
index.htm:
<!DOCTYPE html>
<html lang="en-us" ng-app="weatherApp">
<head>
<title>AngularJS Weather Forecast SPA</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
<!-- load angular via CDN -->
<script src="http://code.angularjs.org/1.3.0-rc.2/angular.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS Weather</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
forecast.htm:
<p>
<a href="#/">Back to Search</a>
</p>
Forecast for {{ city }}
<hr />
Days: <a href="#/forecast/2" ng-class="{ 'bg-primary': days === '2' }">2</a> | <a href="#/forecast/5" ng-class="{ 'bg-primary': days === '5' }">5</a> | <a href="#/forecast/7" ng-class="{ 'bg-primary': days === '7' }">7</a>
<hr />
<div ng-repeat="w in weatherResult.list">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ convertToDate(w.dt) | date: 'MMM d, y' }}</h3>
</div>
<div class="panel-body">
Daytime temperature: {{ convertToFahrenheit(w.temp.day) }}
</div>
</div>
</div>
</div>
</div>
home.htm:
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4>Forecast by City</h4>
<div class="form-group">
<input type="text" ng-model="city" class="form-control" />
</div>
<a href="#/forecast" class="btn btn-primary">Get Forecast</a>
</div>
</div>
No comments:
Post a Comment