title: Angular.js defer AppCtrl and any routing
body: <p>I would like to delay the initialization of the AppCtrl and any route change until the "app settings" have arrived from the server.</p>
  
  <p>I'm using the AngularJS-boilerplate which is including <em>ui-route</em> and <em>ui-state</em>. None of the solutions i found so far did actually defer the AppCtrl launch and the routing.</p>
  
  <p>All the <em>console.log</em> fire right at launch, except for the "at resolve".</p>
  
  <p><strong>Javascript app.js</strong></p>
  
  <pre><code> var app = angular.module( 'ngBoilerplate', [
    'templates-app',
    'templates-common',
    'ngBoilerplate.foo',
    'ui.state',
    'ui.route'
  ]);
  
  
  app.config( function myAppConfig ( $stateProvider, $urlRouterProvider, $translateProvider ) {
      console.log('greetings from config');
      // Routes
      $stateProvider.state('home', {
          controller:"AppCtrl",
          resolve:{
              app: function ($q, $timeout) {
                  var defer = $q.defer();
                  console.log('before resolve');
                  $timeout(function () {
                      console.log('at resolve');
                      defer.resolve();
                  }, 2000);
                  return defer.promise;
              }
          }
      });
  
      $urlRouterProvider.when('/foo','/foo/tile');
      $urlRouterProvider.otherwise( '/foo' );
  });
  
  app.run(function run( $rootScope, $state, $stateParams, titleService, dataFactory ) {
      console.log('greetings from run');
      $state.transitionTo('home');
  });
  
  var AppCtrl = app.controller( 'AppCtrl', function AppCtrl ( $scope, $location ) {
      console.log('greetings from AppCtrl');
  });
  </code></pre>
  
  <p><strong>Javascript foo.js</strong></p>
  
  <pre><code>angular.module( 'ngBoilerplate.foo', [
    'ui.state',
    'placeholders',
    'ui.bootstrap'
  ])
  
  .config(function config( $stateProvider ) {
    $stateProvider
        .state( 'foo', {
          url: '/foo/:type',
         views: {
              "navigation": {
                  templateUrl: "navigation/navigation.tpl.html"
              },
              "footer": {
                  templateUrl: "navigation/footer.tpl.html"
              },
              "main": {
                  controller:'FooCtrl',
                  templateUrl: function(stateParams) {
                      if(stateParams.type == null) {
                          stateParams.type = 'tile';
                      }
                      return "foo/foo."+(stateParams.type == null || stateParams.type == 'tile' ? 'tile' : 'list')+".tpl.html";
                  }
              }
          }
        })
  .controller( 'FooCtrl', function FooCtrl( $scope ) {
    console.log('deferred FooCtrl');
  });
  </code></pre>