Promises and bad redirection behaviour in AngularJS

Question

In AngularJS, I'd like to create a particular behaviour. Let me explain.

I have a promises chain that redirects to page A or to page B in the end.

I'd like that when this promises chain is called (and not resolved yet), another template is displayed (a kind of "please wait" page).

To say it another way, the expected workflow is:

• The user clicks the button in the page, the promise is called
• During the time of promise resolution, user sees a waiting page.
• When the promise (chain of promises actually) is resolved, user is redirected on page A or page B.

Currently, during the time of promise resolution, the page remains the same, which is normal, but I don't want this.

Disclaimer: I'm beginner with Javascript concepts so maybe I use things I should not use.

Thanks for help.

Answer 1

You can do something like this

HTML

<div ng-show="isLoading" class="loading">Please wait ...</div>

<div ng-show="isLoading == true">
 Normal content of your page ... 

 <a ng-click="doSomePromiseChain()">click me</a>
</div>

and then in the angular controller

$scope.isLoading = false;
$scope.doSomePromiseChain = function() {
 $scope.isLoading = true;
 //call your promise chain
}

Thus when user click the button, angular sets isLoading to true, and show "Please wait..." message. When promise is resolved, you continue with redirect to A or B