CODEWITHSUNDEEP
angularjsangular-ui-routerangularjs-routing
beginner
beginner

Reputation: 85

Angular, ui-router: show loading when change state

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?

Upvotes: 1

Views: 1605

Answers (1)

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

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>

Upvotes: 4

Related Questions