CODEWITHSUNDEEP
angularjsangular-ui-router
Alan2
Alan2

Reputation: 24572

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

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?

Upvotes: 4

Views: 4567

Answers (1)

Mosho
Mosho

Reputation: 7078

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.

Upvotes: 10

Related Questions