UI Router resolve not waiting for response

Published on 2017-05-30 by Raul

UI-router seems to be the "de-facto" choice as a routing framework for Angular 1.x applications.

One of the most used features are the "resolve", where you can declare a route that depends on the result of an AJAX call.

Sometimes though, especially when using more complicated routes, the resolve doesn't wait for the result before initializing the child resolve or child controller.

$stateProvider.state('root', {
    resolve:{
       resolveRoot:  function(){
          //declare deffered as ajax call, or whatever you need
          return deffered.promise;
       }
    },
    controller: 'rootCtrl'
 })
 .state('root.child', {
    resolve:{
       resolveChild: function(resolveRoot){ //declare the resolveRoot as parameter for this to resolve AFTER the resolveRoot is finished
          return aPromise; //aPromise is a promise that depends on the resolveRoot response
       }
    }
    controller: 'rootCtrl'
  })

 The same system can be applied to a controller, to force it to initialize AFTER the resolve has finished

app.controller('rootCtrl', function(resolveRoot) {
	//this will be initialized AFTER resolveRoot has been resolved!

});

 


Keep in touch


About

Hey there, I'm Raul, owner of CreativeCLR, a small consulting company.

Feel free to drop me any question you might have on this post using the comment section or the contact page.