Angularjs: How to display loading-icon when using 'resolve' in $routeProvider?

Question

The following code reads via a service and shows on the web page a list of \'page\' objects for a specific \'page category\' (string). Using the resolve object property in $

Answer 1

You can create a directive that will show based on a broadcast that you send before and after a service call, which you could put on $rootScope. So if you're calling a factory to handle dishing out generic POST/GET calls then right before the call you can call a function on $rootScope, such as "$rootScope.startLoading()" and when it finishes call "$rootScope.doneLoading()", where each of these methods broadcast an event for you to pick up on your directive. Then you just handle on your directive to catch the events, "scope.$on("startLoading", func(..." and have it insert/show a loading div template into the DOM and run, then also have a catch for done loading to remove/hide it.

That way you can have a nice general loading overlay.

Answer 2

Not exactly sure whether this would work in your code as you have $resource integration. But it may be worth to look into angular events: $routeChangeStart and $routeChangeSuccess.

in html:

<span ng-show="isViewLoading"> loading the view... </span>

in controller (which defines the scope of the html above):

$scope.isViewLoading = false;
$scope.$on('$routeChangeStart', function() {
  $scope.isViewLoading = true;
});
$scope.$on('$routeChangeSuccess', function() {
  $scope.isViewLoading = false;
});
$scope.$on('$routeChangeError', function() {
  $scope.isViewLoading = false;
});

Answer 3

I like the 'ng-show'... But the 'ui-if' of the Angular UI project is better IMHO.. Since remove the HTML code from the DOM...

<span ui-if = "isViewLoading"> loading the view... </span>

_e

Answer 4

You will want to use the $rootScope because monitoring a controller's $scope is limited to the controller, and as it happens you're switching from one view (one controller) to another view (another controller). So it would make sense to have one-code-fit-all.

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ ... })

In that function set the $rootScope.isLoadingState which will display your loading indicator.

Then use

$rootScope.$on('$stateChangeSuccess', 
function(event, toState, toParams, fromState, fromParams){ ... })

To unset that variable.

Complete reference here

Answer 5

The routing system for angular seems to be a bit limited..

This solved it for me:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

Also, about the events triggering twice: if you setup a route do map to "a/b/c" angular automatically sets up another route, "a/b/c/" (with trailing slash) to redirect to the first (and vice versa), and both trigger events. I just test for a presence of route parameters.

Regarding the limited condition of the routing sistem: there is this pull from angular, to extend it's capabilities.

Answer 6

You can also use the ng-show directive. Simply check whether you model is empty and display a DOM subset like so:

    <!-- model not ready -->
    <div style="width: 200" ng-show="lines == ''">
      <div class="progress progress-striped active">
         <div class="bar" style="width: 0%;"></div>
      </div>
    </div>

    <!-- your model code -->
    <ul class="nav nav-tabs nav-stacked">
      <li ng-repeat="line in lines">
        {{line.Id}}
      </li>
    </ul>