AngularJS Route Resolver for JSONP

by andreas_karz

HTML

<div ng-controller="RootController">

    <a href="#/">Index</a> | <a href="#/details/zurich,ch">Details 1</a> | <a href="#/details/oberurnen,ch">Details 2</a>
    <select ng-change="changeWeather(selectedCountry)" ng-model="selectedCountry" ng-options="country.code as country.city for country in locations  | orderBy:'city'" ></select>
    
    <div ng-view></div>
    <div ng-show="showLoader!=0" class="waiter">Daten werden geladen...</div>
</div>

<script type="text/ng-template" id="index.html">
    <input type="text" ng-model="gugus.test" /> <br />
    <button ng-click="funky()">test</button>
</script>

<script type="text/ng-template" id="details.html">
    {{ user }}
    <pre ng-cloak style="font-size:0.7em;">{{id | json}}</pre>
</script>

CSS

div.waiter{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    text-align: center;
    padding-top:50%;
    background-color:rgba(0,0,0,0.7);
    color:#FFF;
}

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('RootController', ['$scope', '$rootScope', '$location', function($scope, $rootScope, $location){
    $rootScope.showLoader = 0;
    $rootScope.locations = [
        {'country':'ch', 'city':'Oberurnen', 'code':'oberurnen,ch'},
        {'country':'ch', 'city':'ZĂĽrich', 'code':'zurich,ch'},
        {'country':'de', 'city':'Hamburg', 'code':'hamburg,de'},
        {'country':'ch', 'city':'Oberurnen', 'code':'oberurnen,ch'},
        {'country':'ma', 'city':'Marrakesh', 'code':'marrakesh,ma'}
    ];
    $rootScope.selectedCountry = 'zurich,ch';
    $rootScope.changeWeather = function(countryCode){
                          $location.path('/details/' + countryCode);
                      }
}]);

myApp.controller('IndexCntl', ['$scope', 'wheaterService', function($scope, wheaterService){
    $scope.gugus = wheaterService.dynData;
    $scope.funky = function(){
        wheaterService.getCheck();
    };
}]);
    
myApp.controller('DetailsCntl', ['$scope', 'wheaterService', function($scope, wheaterService){
    $scope.id = wheaterService.data;
    $scope.user = wheaterService.getPrivateProperty();
}]);


myApp.config(['$routeProvider', function($routeProvider){             
    $routeProvider.when('/', {
        templateUrl: 'index.html',
        controller: 'IndexCntl'
    });
    $routeProvider.when('/details/:id', {
        templateUrl: 'details.html',
        controller: 'DetailsCntl',
        resolve: {resolveData: function(wheaterService){
            return wheaterService.getWeather();
        }}
    });                
}]);

myApp.factory('wheaterService', ['$http', '$route', '$rootScope', '$timeout', function($http, $route, $rootScope, $timeout) {

    /* private properties */
        var _URL = 'http://api.openweathermap.org/data/2.5/weather?callback=JSON_CALLBACK&units=metric&lang=de&q=';
    
        var _test = {
            id : 'xyz',
            user: ''
        };
    
        var _timeout = null;
   ...