Controller is loaded before resolve is resolved in AngularJS

Question

My AngularJS resolve doesn't finish before the controller is loaded.

Background: Say I have a "my profile" page that is requested (user loads website.com/user). I would like to have angular intercept the request and ask for the appropriate data from the server.

The server will reply differently depending on whether the user is logged in/active/etc. I would like angular to get the data from the server before it loads the template, and before it initiates the appropriate controller. So far it does not.

App.js code:

.when('/user',
  {
    templateUrl:'/templates/user',
    controller: 'my_profile',
    resolve: {
        some_cute_function_name: function($timeout){
            $timeout(function(){
                console.log('here123');
            },5)
        }
   }

Meanwhile, controller code:

            console.log('about to update scope');

It turns out that the controller is initiated before the resolve is done. I know this because the greater the number of seconds before the $timeout is done, the more likely I am to see this:

about to update scope
here123

as opposed to the other way around.

Is there any way to ensure that the resolve is resolved before the controller is initiated?

Much appreciated!

Answer 1

Your resolver needs to return a promise:

  .when('/user',
  {
    templateUrl:'/templates/user',
    controller: 'my_profile',
    resolve: {
        some_cute_function_name: function($timeout){
            return $timeout(function(){
                console.log('here123');
                return { some: 'data' };
            },5);
        }
   }

Answer 2

AngularJS describes resolve as:

"An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated." (emphasis added)

I take it that unless any of the dependencies are promises, angular won't wait for resolve to finish before instantiating the controller (even if I have operations that take a long time to finish, like a $timeout).

Solution: you have to make sure the resolve involves a promise.