(Angular-ui-router) Show loading animation during resolve process

Question

This is a two part question:

1. I am using the resolve property inside $stateProvider.state() to grab certain server data before loading the controller. How wo

Answer 1

If anyone is using ngRoute, waiting on resolve before loading the next view, and using angular-bootstrap-ui for ui, you can do the following:

app.config([
  "$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
    return $routeProvider.when("/seasons/:seasonId", {
      templateUrl: "season-manage.html",
      controller: "SeasonManageController",
      resolve: {
        season: [
          "$route", "$q", "$http", "$modal", function($route, $q, $http, $modal) {
            var modal, promise, seasonId;
            modal = $modal.open({
              backdrop: "static",
              template: "<div>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title\">\n      Loading...\n    </h3>\n  </div>\n  <div class=\"modal-body\">\n    <progressbar\n      class=\"progress-striped active\"\n      value=\"'100'\">\n    </progressbar>\n  </div>\n</div>",
              keyboard: false,
              size: "lg"
            });
            promise = $q.defer();
            seasonId = $route.current.params.seasonId;
            $http.get("/api/match/seasons/" + seasonId).success(function(data) {
              modal.close();
              promise.resolve(data);
            }).error(function(data) {
              modal.close();
              promise.reject(data);
            });

            return promise.promise;
          }
        ]
      }
    });
  }
]);

Answer 2

The use of $stateChangeStart and the like have since been deprecated and replaced with Transition Hooks. So, for the answer by Stefan Henze, the updated version would be:

$transitions.onStart({}, function(transition) {
  if (transition.to().resolve) {
    $scope.showSpinner();
  }
});

$transitions.onSuccess({}, function(transition) {
  if (transition.to().resolve) {
    $scope.hideSpinner();
  }
});

You can use this in you parent controller. Remember to inject $transitions -

.controller('parentController',['$transitions',function($transitions){...}]);

Also, keep in mind that a resolve that is an empty object will still render transition.to().resolve == true, so don't leave an empty placeholder resolve in the state declaration.

Answer 3

EDIT: Here is an even easier solution, tested and working nicely:

In my main controller I simply have

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.showSpinner();
    }
});
$scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
    if (toState.resolve) {
        $scope.hideSpinner();
    }
});

This shows the spinner whenever we are about to go to a state that has anything to resolve and hides it, when the state change is complete. You might want to add some check up the state hierarchy (i.e. also show the spinner if a parent state that is being loaded resolves something) but this solution works fine for me.

Here is my old suggestion for reference and as an alternative:

1. In your application controller, listen to the stateChangeStart event and check if you are about to switch to a state where you want to show a spinner during resolve (see https://github.com/angular-ui/ui-router/wiki/Quick-Reference#wiki-events-1)

   $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){
       if (toState.name == 'state.with.resolve') {
           $scope.showSpinner();  //this is a function you created to show the loading animation
       }
   })
   

2. When you controller finally gets called, you can hide the spinner

   .controller('StateWithResolveCtrl', function($scope) {
       $scope.hideSpinner();
   })
   

You also might want to check for any errors that may have occurred during resolve by listening to the $stateChangeError event and hiding the animation while you handle the error.

This is not totally clean as you distribute the logic for the spinner between controllers, but it's a way. Hope it helps.

Answer 4

I developed the following solution which works perfectly for me.

1. Add the following app.run

app.run(function($rootScope){

    $rootScope
        .$on('$stateChangeStart', 
            function(event, toState, toParams, fromState, fromParams){ 
                $("#ui-view").html("");
                $(".page-loading").removeClass("hidden");
        });

    $rootScope
        .$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams){ 
                $(".page-loading").addClass("hidden");
        });

});

2. Place the loading indicator just above the ui-view. Add id="ui-view" to ui-view div.

<div class="page-loading">Loading...</div>
<div ui-view id="ui-view"></div>

3. add the following to your css

.hidden {
  display: none !important;
  visibility: hidden !important;
}

NOTE:

A. The above code will display loading indicator in two cases 1) when the angular app is loaded first time 2) when the view is changed.

B. If you don't want the indicator to be shown when the angular app loads first time (before any view is loaded), then add hidden class to the loading div like below

<div class="page-loading hidden">Loading...</div>

Answer 5

I prefer using a directive to match any loading activity, mainly to keep my codebase clean

angular.module('$utilityElements', [])
.directive('loader',['$timeout','$rootScope', function($timeout, $rootScope) {
    return {
      restrict: 'A',
      template: '<div id="oneloader" class="hiddenload">loading...</div>',
      replace: true,
      compile: function (scope, element, attrs) {
        $timeout(function(){
          $rootScope
              .$on('$stateChangeStart',
                  function(event, toState, toParams, fromState, fromParams){
                      $("#oneloader").removeClass("hiddenload");
              });

          $rootScope
              .$on('$stateChangeSuccess',
                  function(event, toState, toParams, fromState, fromParams){
                      //add a little delay
                      $timeout(function(){
                        $("#oneloader").addClass("hiddenload");
                      },500)
              });
        }, 0);
      }
    }
  }]);

Answer 6

I use an animated gif that I show only when $http has pending requests.

In my base page template, I have a navbar and navbar controller. The relevant part of the controller looks like this:

controllers.controller('NavbarCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.hasPendingRequests = function () {
            return $http.pendingRequests.length > 0;
        };
    }]);

The corresponding code in my html is:

<span class="navbar-spinner" ng-show="hasPendingRequests()">
    <img src="/static/img/spinner.gif">
</span>

I hope that helps!