AngularJS loading progress bar

Question

When using AngularJS and doing a redirect using $location.path(\'/path\') the new page takes a while to load, especially on mobile.

Is there a way to ad

Answer 1

Here is a working solution which I am using in my application. ngProgress is the best library out there for showing load-bars when changing urls.

Remember to inject the ngProgressFactory instead of ngProgress, as opposed to Luc's solution.

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) {
    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar = ngProgressFactory.createInstance();
        $rootScope.progressbar.start();

    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});

Update Nov-2015 - After analyzing this approach with chrome timings, I have observed that this would not be the correct way for adding a loading bar. Sure, the loading bar will be visible to visitors,but it will not be in sync with actual page load timings.