How can I bring up an "in progress" loading bar in between ui-router state transitions?

Question

I have an AngularJS application that uses ui-router. There are times when the application waits while moving from one state to another and while the resolves are still in progress.

Does anyone have (or have they seen) any examples of how I can present an "in-progress" loading bar on the screen just during the time of the resolve from the one state to another?

Answer 1

You can use the events emitted by ui-router (as well as the native routeProvider).

Plunker

Something like this:

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    $rootScope.stateIsLoading = true;
})

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){
    $rootScope.stateIsLoading = false;
})

Then in HTML:

<section ui-view ng-hide="stateIsLoading"></section>
<div class="loader" ng-show="stateIsLoading"></div>

docs

You can use resolve to provide your controller with content or data that is custom to the state. resolve is an optional map of dependencies which should be injected into the controller.

If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $stateChangeSuccess event is fired.