Angular, ui-router: show loading when change state

Question

Is there a way in angular that when I want switch to another state (ui-sref) that i can show some load icon until the second state is loaded?

Pankaj Parkar · Accepted Answer · 2015-07-10 11:35:16Z

4

yes angular ui.router has events which you can listen:

$stateChangeStart - fired when the transition begins.

$stateChangeSuccess - fired once the state transition is complete.

following this you can write preloader functionality

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

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

and write some <div> in your body element and show/hide it with this variable

eg.

<body> 
    <div ng-show="preloader"></div>
</body>

edited Jul 10, 2015 at 11:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

answered Jul 10, 2015 at 11:29

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Angular, ui-router: show loading when change state

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related