Handle state routing before displaying the template in angularjs

Question

I have a simple system for password recovery.

After a user requested to recover his account, he will receive an email contains the link to the page where he can set his new password, this link contains a verification key in its parameters.

This link will call a state in my application which I called core.recover, this state will then show a template to the user where he can set his new password, in some cases a user can accidently access to this url, so I've created a service which check if the link contains a valid verification key, if not I want him to be redirected to some other state.

So I created my state as following :

.state('core.recover', {
        url: '/recover',
        controller: 'RecoverPasswordCtrl',
        resolve: function(recoverAccountService, $location, $state, $q) {
          var deferred = $q.defer();
          deferred.resolve();
          recoverAccountService.get({email:$location.search().email, verificationKey:$location.search().verificationKey})
            .$promise.then(function (result) {}).catch(function (err) {
            $state.go("candidature.pre");
          });
          return deferred.promise;
        },
        templateUrl: 'views/tmpl/recoverAccount/recover-password.html'
      })

So what this code is doing, when the user opens the link in his email he will call the core.recover state, in this state I have a promise which is returned from a service which checks if the given email and activation key are valid, if not, the user will be redirected to the candidature.pre state before displaying the recover-password template.

But the problem is when the promise returns some error I always see the recover-password template for a short time before I get redirected to the other sate.

How can I solve that ?

Edit :

My question is not similar to this one :

Change state of angular app from resolve method of state provider

As you can see I have the same code provided in that post, and my code works, the only problem is that I dont want the template to be displayed for that short moment before I get redirected to the other state.

Did you read the second answer, using a timeout? I think that will do the job. I will remove my comment btw. — Michelangelo, May 10 '16 at 13:09

score 0 · Answer 1 · answered May 10 '16 at 10:00

You should resolve your promise after your service returns it response and should reject the promise if it returns the error

resolve:  function($q, recoverAccountService) {


    var deferred = $q.defer();

recoverAccountService.get({email:$location.search().email,verificationKey:$location.search().verificationKey}).$promise.then(function (result) {
                    deferred.resolve();
                  }).catch(function (err) {
                    deferred.reject();
                    $state.go("candidature.pre");
                  });

    return deferred.promise;
}

I tried that but I got an error saying : `Error: 'invocables' must be an object — Renaud is Not Bill Gates, May 10 '16 at 11:19

score 0 · Answer 2 · answered May 10 '16 at 17:31

Resolve part of the state should always return an object, so update your resolve part as:

resolve: {
    recoverAccounts: function ($q, recoverAccountService) {

      var deferred = $q.defer();
      recoverAccountService.get({
        email: $location.search().email,
        verificationKey: $location.search().verificationKey
      }).$promise.then(function (result) {
        deferred.resolve();
      }).catch(function (err) {
        deferred.reject();
        $state.go("candidature.pre");
      });
      return deferred.promise;
    }

  }

Also you should always resolve the promise then you receive the data

Handle state routing before displaying the template in angularjs

Edit :

2 Answers2