WeatherOrNot

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html'
  })

  .state('app.weather', {
    url: '/weather',
    views: {
      'menuContent': {
        templateUrl: 'templates/weather.html',
        controller: 'WeatherCtrl'
      }
    }
  })

  .state('app.about', {
      url: '/about',
      views: {
        'menuContent': {
          templateUrl: 'templates/about.html'
        }
      }
    });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/weather');
});

controllers.js

angular.module('starter.controllers', ['openWeatherMap'])

.controller('WeatherCtrl', ['$scope', '$window', 'weather', function($scope, $window, weather) {

  $scope.cities = [];
  $scope.input = {};

  function onZipCodeData(zipCode, callBack){

    var prom = weather.getWeatherByZipCode(zipCode);

    prom.then(function(data){
      data.zipCode = zipCode;
      callBack(data);
    }).catch(function(msg){
      $window.alert(msg);
    }).finally(function(){
      $scope.input.zipCode = "";
    });

  }

  $scope.addZipCode = function(){

    var zipCode = $scope.input.zipCode;

    onZipCodeData(zipCode, function(data){
      $scope.cities.push(data);
    });

  };

  $scope.refresh = function(zipCode, index){
    onZipCodeData(zipCode, function(data){
      $scope.cities[index] = data;
    });
  }
  
}]);

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">Menu</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item menu-close href="#/app/weather">
          Weather
        </ion-item>
        <ion-item menu-close href="#/app/about">
          About
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

weather.html

<ion-view view-title="Weather">
  <ion-content>
    <label class="item item-input">
      <input type="text" placeholder="Zip Code" ng-model="input.zipCode">
    </label>
    <button class="button button-full button-positive" ng-click="addZipCode()">
      Add Zip Code
    </button>
    <ion-list>
      <ion-item ng-repeat="weather in cities">
        <div style="float: left;">
          {{weather.name}}
        </div>
        <div style="float: right;">
          {{weather.main.temp}} °F
        </div>
        <ion-option-button class="button-balanced" ng-click="refresh(weather.zipCode, $index)">Refresh</ion-option-button>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>

weather.js

angular.module('openWeatherMap',[])
.factory('weather', ['$http', '$q', function($http, $q){

  var weather = {};

  weather.getWeatherByZipCode = function(zipCode){
    var defered = $q.defer();
    $http.get('http://api.openweathermap.org/data/2.5/weather?zip=' + zipCode + ',us&units=imperial')
    .success(function(data, status, headers, config){
      if(data.cod !=  200){
        defered.reject(data.message);
      } else {
        defered.resolve(data);
      }
    })
    .error(function(data, status, headers, config){
      defered.reject('Error in API');
    });
    return defered.promise;
  };

  return weather;
}]);