Angular app initialization with asynchronous data

Question

I need to initialize my Angular with some User data that the whole app depends on. Therefore I need the initialization to be resolved before the router kicks in and controllers are initialized.

Currently, I wrote the initialization code in a run() block of the angular module. The initialization involves an asynchronous http request to get user data and the rest of the application relies upon the user data. How can I ensure that the http request is resolved before the router kicks-in initializing the controllers?

I am using the ui-router.

The initialization consists in the following: 1) get cookie 'userId' 2) get User from server (asynchronous http request, the whole app depends upon the User) 3) set authService.currentUser

this is a sample of the code

.run(['$cookies', 'userApiService', 'authService', 
  function($cookies, userApiService, authService){

    var userId = $cookies.get('userId');
    userId = parseCookieValue(userId);

    userApiService.getOne(userId).then(function(user){
      authService.currentUser = user;
    });
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
  function($stateProvider, $urlRouterProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $urlRouterProvider.when('/', '/main');

    $stateProvider
      .state('login', {
        url: '/login',
        views: {
          'header': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content': {
            templateUrl: 'views/login.html',
            controller: 'LoginCtrl'
          },
          'footer': {
            templateUrl: 'views/footer.html',
          }
        }
      })
      .state('main', {
        url: '/main',
        views: {
          'content@': {
            template: '',
            controller: function($state, authService) {
              if(!authService.isAuthenticated()) {
                $state.go('login');
              }
              if(authService.isStudent()) {
                $state.go('student');
              }
              if(authService.isAdmin()) {
                $state.go('admin');
              }
            }
          }
        }
      })
      .state('student', {
        url: '/student',
        views: {
          'header@': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content@': {
            templateUrl: 'views/student.html',
            controller: 'StudentCtrl'
          },
          'footer@': {
            templateUrl: 'views/footer.html',
          }
        }
      })
      .state('admin', {
        url: '/admin',
        views: {
          'header@': {
            templateUrl: 'views/header.html',
            controller: 'HeaderCtrl'
          },
          'content@': {
            templateUrl: 'views/admin.html',
            controller: 'AdminCtrl'
          },
          'footer@': {
            templateUrl: 'views/footer.html',
          }
        }
      })
}])

Answer 1

Expanding on someone's comment, you can create a root state that is a parent to all of your other app's states (children to the root). The root state resolves all the user data and then you can inject the user data to any controller or store it in a service.

$stateProvider
  .state('root', {
    url: '',
    abstract: true,
    template: '',     // some template with header, content, footer ui-views
    resolve: {
      // fetch user data
    }
  })
  .state('root.login', {
    url: '/login',
    views: {
      'header': {
        templateUrl: 'views/header.html',
        controller: 'HeaderCtrl'
      },
      'content': {
        templateUrl: 'views/login.html',
        controller: 'LoginCtrl'
      },
      'footer': {
        templateUrl: 'views/footer.html',
      }
    }
  })
  .state('root.main', {
    url: '/main',
    views: {
      'content@': {
        template: '',
        controller: function($state, authService) {
          if(!authService.isAuthenticated()) {
            $state.go('login');
          }
          if(authService.isStudent()) {
            $state.go('student');
          }
          if(authService.isAdmin()) {
            $state.go('admin');
          }
        }
      }
    }
  })

  ...  // your other states

The key is that all of your app states must be a child of your root state i.e. root.<name> in your state declaration. This will ensure that no other controller starts until your user data is available. For more information on resolve and how to use it read here. Also, parent and child states.