$state.go doesn't work when destination state or it's parent resolves with promise

[igormisha]

I tried to load some data on parent state with resolve and to redirect user to default state when the app runs like so:

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('home', {
    url: '/',
    template: '<div><a ui-sref="home">Start App</a> <a ui-sref="home.main">Home</a> <a ui-sref="home.other">Other state</a><div ui-view>Loading...</div></div>',
    resolve: {
      user: ['$timeout', '$q', 
        function($timeout, $q) {
          var deferred = $q.defer();
          var promise = deferred.promise;
          var resolvedVal = promise.then(function() {
            console.log('$timeout executed');
            return {Id: 12, email: 'some@email.com', name: 'some name'};
          }, function() {
            console.log('Error happend');
          });
          $timeout(function() {
            deferred.resolve();
          }, 2000);
          return resolvedVal;
        }]
      //user: function() {return {id: 222, name: 'testname', email: 'test@em.ail'}; }
    },
    controller: ['$scope', 'user', function($scope, user) {
      $scope.user = user;
    }]
  });

  $stateProvider.state('home.other', {
    url: 'other',
    template: '<div>Your name is {{user.name}}, and email is {{user.email}}</div><div>This is other state of application, I try to make it open as default when application starts, by calling to $state.transitionTo() function in app.run() method</div>',
    resolve: {
      someObj: function() {
        console.log('hello');
        return {someProp: 'someValue'};
      }  
    },
    controller: ['$scope', 'user', function($scope, user) {
      $scope.user = user;
    }]    
  });

}]);  

app.run(['$state', '$rootScope', function ($state, $rootScope) {
  $state.go('home.other');   
}]);

And this does not change url in address bar and does not show template of home.other state (though the resolve function of home.state is executed and there is 'hello' in console).
But when I comment promise function in resolve and instead put there simple function returning object application redirects as expected.

Also instead of $timeout tried to do $http request which will actually be there, but no luck too.

[igormisha]

It appears that if I replace $state.go('home.other'); to the 'home' state controller everything works properly. And that seems that I can solve the problem by creating one root state (parent for all other states) where I can load necessary data and redirect user to proper url from there. But anyway why this doesn't work from app.run()?

[christopherthielen]

You're using deferred wrong.
Try this:

    resolve: {
      user: ['$timeout', '$q', 
        function($timeout, $q) {
          var deferred = $q.defer();
          $timeout(function() {
            deferred.resolve({Id: 12, email: 'some@email.com', name: 'some name'});
          }, 2000);
          return deferred.promise;
        }]
    },

http://plnkr.co/edit/ZaEpy77Bu54mZ6kOJ8vz?p=preview

[igormisha]

Big thanks for your answer, Christopher!
Your way of using $timeout is more clean, of course, and example is working in Plunker, but if we add one more state, for example:

  $stateProvider.state('home.another', {
    url: 'another',
    template: '<div>This is yet one state of application</div>',
    resolve: {
      someObj: function() {
        console.log('hello');
        return {someProp: 'someValue'};
      }  
    },
    controller: ['$scope', 'user', function($scope, user) {
      $scope.user = user;
    }]    
  });

then, if we go right to http://my-domain.com/app.html#/another typing the address in address bar we will be not redirected to http://my-domain.com/app.html#/other and I don't get why.

[igormisha]

I made a plunk from yours: http://plnkr.co/edit/a9RmLbq8qMP4oj0uToUA
To see what I mean you need to go straight to http://run.plnkr.co/iPMafZYqMPkHUeQ7/#/another
and you will not be redirected to 'other' route.

[christopherthielen]

Oh, I see what you mean. The problem is that module load happens first, $state.go is executed and the transition begins. Your resolve causes the transition to be deferred until the resolve comes back. Next, a digest cycle occurs and the URL is processed. Due to the URL "changing" (from empty string to #/another) another state transition begins to home.another.

To avoid this initial digest cycle overriding your deferred transition, just do the transition request AFTER the digest cycle is done.
Updated plunk: http://plnkr.co/edit/ZaEpy77Bu54mZ6kOJ8vz?p=preview

app.run(['$state', '$rootScope', '$timeout', function ($state, $rootScope, $timeout) {
  $timeout(function() { $state.go('home.other'); });   
}]);

[igormisha]

Great tip and explanation, it really helps, Christopher, thanks a lot!
Anyway I have yet one more question. If 'another' route resolve function containes some $http requests, loading some data, then even though user is redirected from that url to '/#other' these http requests were already made. Is there a way to avoid this behavior, I mean to discard execution of resolve function, another words is there a hook to execute before any resolve function was called and that function has access to $state variable?

[igormisha]

And to answer my own question - there is such possibility. If you need to discard execution of requested url's state resolvation in certain curcumstances when the application startes, you can use $stateChangeStart event, like this:

app.run(['$state', '$rootScope', '$timeout', function ($state, $rootScope, $timeout) {
  var appStarted = 0; // flag to redirect only once when app is started
  $rootScope.$on('$stateChangeStart', 
  function(event, toState, toParams, fromState, fromParams) { 
    if(appStarted) return;
    appStarted = 1;   
    event.preventDefault(); //prevents from resolving requested url
    $state.go('home.other'); //redirects to 'home.other' state url
  });  
}]);

Christopher, thanks one more time for pushing me in right direction.

[timkindberg]

Is this still valid or can it be closed?

[Raguvarthan]

No sir.......Let me try the suggestions

[Raguvarthan]

After the error is cleared ill let know....