Weather App Skeleton

examples/weather/1/index.html

<!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>

examples/weather/1/app.js

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);
    };

}]);

examples/weather/1/city.html

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>

examples/weather/1/main.html

main page