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 add a progress bar for loading? Maybe something like YouTube has?

Answer 1

use angular-loading-bar

Standalone demo here .. https://github.com/danday74/angular-loading-bar-standalone-demo

Answer 2

if it is the next route that takes time to load e.g. making ajax call before the controller is run (resolve config on route) then make use of $route service's $routeChangeStart, $routeChangeSuccess and $routeChangeError events.

register a top level controller (outside ng-view) that listens to these events and manages a boolean variable in its $scope.

use this variable with ng-show to overlay a "loading, please wait" div.

if the next route loads fast (i.e. its controller runs quickly) but data that are requested by the controller take a long to load then, i'm afraid, you have to manage the visibility state of spinners in your controller and view.

something like:

$scope.data = null;
$http.get("/whatever").success(function(data) {
    $scope.data = data;
});

<div ng-show="data !== null">...</div>
<div ng-show="data === null" class="spinner"></div>