CODEWITHSUNDEEP
javascriptangularjs
Cameron
Cameron

Reputation: 28783

Initial loading spinner for AngularJS

I want to show a spinner on the first load of my application like: https://devart.withgoogle.com/

I've attempted to do this via the Services module like so:

angular.module('InitialLoad', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            $('#loading').fadeIn();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return response;
            }, function (response) {
               $('#loading').fadeOut(function(){
                    $(this).remove();
                });
                return $q.reject(response);
            });
        };
    });

But there are a number of things wrong with this... first of which is that this doesn't listen for the first load it listens to EVERY request. It also doesn't show and hide the loading as elegant as the way it's been done on DevArt, and I'm using jQuery to hide and show the loading spinner instead of using Angular Animate.

Can anyone help? To clarify this is for the INITIAL app load! And not for showing a spinner on subsequent requests. I use this for that: https://github.com/chieffancypants/angular-loading-bar but I want to show a splash for the app start up which is different.

Upvotes: 7

Views: 12647

Answers (2)

chubbsondubs
chubbsondubs

Reputation: 38686

If you want to hide your app while AngularJS loads then default your spinner to being displayed using plain HTML, and use ng-cloak to hide the angular portions of the application.

https://docs.angularjs.org/api/ng/directive/ngCloak

Once your app loads you can turn off the spinner using ng-hide/ng-show.

<div ng-controller="TopController">
  <div class="spinner" ng-hide="appLoaded"/>
  <div ng-cloak ng-view>
     ... All Angular view giblets go here...
  </div>
</div>

Here is a working example:

http://jsfiddle.net/kLtzm93x/

Upvotes: 10

chubbsondubs
chubbsondubs

Reputation: 38686

I wouldn't try to do this with an interceptor. It's easy enough to do this with a Controller:

app.controller("TopController", [ "$scope", "SomeService", function($scope, SomeService) {
    $scope.showAppLoader = false;

    $scope.loadApp = function() {
       $scope.showAppLoader = true;
       SomeService.doSomething().success( function(result) {
          $scope.showAppLoader = false;
       });
    };

    $scope.loadApp();
}]);

Then the view:

<div ng-controller="TopController">
   <div class="spinner" ng-show="showAppLoader"></div>
   <div ng-hide="showAppLoader" ng-view"></div>
</div>

The rest of this is just an exercise in CSS.

Upvotes: 3

Related Questions