AngularJS Tips / Progress bar on route change

If you need an effect of progressbar-like between different states of an application. Here is quick and dirty solution.

Dependencies

• ui-router - of course you can use ngRoute, but I don't recommend so.
• ngprogress-lite github official page - to get filling how it's works follow to the official page and look on the top of the page;

Ideal

Use something like that between states:

$rootScope.$on('$stateChangeStart', function(){
  ngProgressLite. start ();
});

$rootScope.$on('$stateChangeSuccess', function(){
  ngProgressLite.done();
});

$rootScope.$on('$stateChangeError',  function(){
  ngProgressLite.done();
});

and fetch all needed dependencies in the resolve section of the states.

Good luck.

Follow the blog to get quick tips for software development.