ngProgress in concert with Angular ui-router

“If you’re here to learn how to use ngProgress with UI-Router on all your pages navigation, you’re at the right place.”

When you move from one page to another on YouTube.com, do you notice the little red loading bar at the top of the screen, indicating how far your page is done loading, kinda? That is what ngProgress is all about. It is called ngProgress, because, well it allows you to know ‘progress’ of the loading of your templates in your aNGular app.

If you have used AngularJS for your front-end routing, you’ve probably come across the issue of having to provide the user with a feedback indicating whether the page is loading or whatnot.

After reading the documentation on ngProgress, I asked myself how I could use ngProgress with ui-router. I couldn’t find anything online on that note. Maybe my google-fu wasn’t great enough, but I guess, there wasn’t any need for me to search as implementing was straightforward and easy.

By default, angular ui-router provides no way of letting the user know what is going on when changing from one to another page.

Let us use ngProgress to get that lovely effect on our web site. At the moment, you can see the effect in action on code.khophi.co. Since CodeBySide is purely client side app, and pure AngularJS, indicating page load is a priceless gem.

Prep ngProgress

• Install ngprogress: bower install ngprogress --save
• Append the Javascript and CSS of ngprogress to your base file, or wherever you do load yours. Mine is in index.html
  • <script src=”bower_components/ngProgress.js”></script>
  • <link rel=”stylesheet” href=”bower_componets/ngProgress.css”>

With the above in place, we digress a bit from the official documentation, although with stick to the principles involved and how the API of ngProgress is designed to work.

Rock ‘N’ Roll

Append ngProgress to your main app module like so:

angular.module('theApp', ['other-modules-here', 'ngProgress'])

Instead of adding the ngProgressFactory to a single controller as indicated in the official docs, we want the showing or indication of progress and completion to happen sitewide for all navigations. Therefore, where do you think will be the best place to put our ngProgressFactory?

With that in mind, we have to make this ngProgressentire thing available for use during route changes. ui-router has beautiful events that are fired per each page transitions, known as the $stateChangeStart and $stateChangeSuccess

Both events are easy to understand from their names, so no need to hit on them.

angular.module('theApp', ['other-modules-here', 'ngProgress'])
// bla bla bla stuffs here
.run(['$rootScope', 'ngProgressFactory', function($rootScope, ngProgressFactory) {

  // perhaps auth checking here etc
  // THEN ngProgress
  
  // according to the API: https://github.com/VictorBjelkholm/ngProgress#api
  // ngProgressFactory.createInstance()
  // REQUIRED TO USE! Creates a new instance of 
  // ngProgress that you can use the methods below with.

  var progress = ngProgressFactory.createInstance();

  // if routechange starts, start the progress
  $rootScope.$on('$stateChangeStart', function() {
    progress.start();
  });

  // complete progress if statechange successful
  $rootScope.$on('$stateChangeSuccess', function() {
    progress.complete();
  });

  // you could go ahead to implement other responses depending
  // on the $stateChange state e.g, if $stateChangeError etc
}])

So there you have it! Works flawless for me on code.khophi.co.

[wp_ad_camp_1]

If you’re in development mode on your PC and testing this out, you might notice the bar hardly even shows, as the ajax request for the templates are almost at light speed. You can simulate a slow network using Chrome Developer Tools by changing the network throttling too, say, Edge or GPRS.

I hope you found this tutorial useful. If you like it, don’t forget to share!

Thanks for reading, and see you in the next one!