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?

I think promises can solve this. Maybe odetocode.com/blogs/scott/archive/2014/05/20/… could help. — changtung
– changtung, Commented Jan 31, 2015 at 17:58
possible duplicate of (Angular-ui-router) Show loading animation during resolve process — Trevor
– Trevor, Commented Jun 29, 2015 at 16:35

Mosho · Accepted Answer · 2015-01-31 19:17:24Z

10

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.

edited Jan 31, 2015 at 19:17

answered Jan 31, 2015 at 18:55

Mosho

7,0783 gold badges36 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

p0lar_bear Over a year ago

State events have since been deprecated in ui-router 1.0. Check out State Change Events Migration Example 2 of the migration guide for more up-to-date code which uses the Transition Hook API rather than events.

Jugal Thakkar Over a year ago

This is fantastic. Any suggestions on how to avoid $rootScope while doing this?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related