AngularJS resolve $http promise in $routeProvider.md

Define and resolve promises before running controller code in AngularJS

Putting $http promise into a service and then resolve it is recommended as it will load json sooner.

http://jsfiddle.net/gh/gist/library/pure/abb04b575636f820d1a3/

fiddle.html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<div ng-app="myapp">
  <script type="text/ng-template" id="/tpl.html">
    Hello {{test}}
  </script>
  <div ng-view></div>
</div>

fiddle.js

var app = angular.module('myapp', ['ngRoute'])
  .config(function ($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/tpl.html',
        controller: 'DomReadyCtrl',
        resolve: {
          'jsonFromResolve': ['$http', function ($http) {
            return $http.get('https://raw.githubusercontent.com/levonlee/jsSandbox/master/sample1.json')
              .success(function (data) {
                console.log('jsonFromResolve is loaded successfully');
                return data;
              })
              .error(function (data, status, headers, config) {
                console.log('json failed to load');
                return config;
              });
          }],
          'json1FromService': function (jsonService) {
            return jsonService.getJson1()
              .then(function (response) {
                console.log('json1FromService in resolve is called');
                return response.data;
              });
          }
        }
      });
  })
  .factory('jsonService', function($http) {
    return {
      getJson1: function() {
        console.log('json1 from service is loaded successfully');
        return $http.get('https://raw.githubusercontent.com/levonlee/jsSandbox/master/sample1.json');
      },
      getJson2: function() {
        // only getJson1 will be called as the controller only requires getJson1
        console.log('json2 from service is loaded successfully');
        return $http.get('https://raw.githubusercontent.com/levonlee/jsSandbox/master/sample2.json');
      }
    }
  })
  .factory('dataService', function($q, jsonService) {
    var deferred = $q.defer();
    var msg = '';

    if (msg) {
      deferred.resolve(msg);
    } else {
      deferred.resolve(jsonService.getJson2().then(function(response) {
        console.log('Call jsonService in dataService');
        return(response.data);
      }));
    }

    return deferred.promise;
  })
  .controller('DomReadyCtrl', ['$scope', 'jsonFromResolve','json1FromService', 'jsonService'
    function ($scope, jsonFromResolve, json1FromService, jsonService) {
      console.log('first line in ng');
      var tempJson = jsonFromResolve.data;
      var tempJsonFromService = json1FromService;
      $scope.test = tempJson.listings[0].id;
      $scope.test = tempJson.listings[1].id;
      jsonService.getJson2().then(function(response) {
        console.log('Call jsonService from controller');
        console.log(response.data);
      });
      console.log('Last line in ng');
    }
  ]);

fiddle.manifest

normalize_css: no
panel_jss: 0
panel_css: 0
wrap: b