I want to show a spinner on the first load of my application like: /

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: but I want to show a splash for the app start up which is different.

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

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./chieffancypants/angular-loading-bar but I want to show a splash for the app start up which is different.

• javascript
• angularjs

• use controllers, they are good to interact with UI – Zafta Commented Aug 18, 2014 at 12:58
• There are many ways to achieve this. You can search on SO and find out many alternatives (i.e. here, here ). I would avoid using jQuery DOM manipulation and animations, since there is no meaning in using that for this. – pasine Commented Aug 18, 2014 at 13:04
• Well I've used this: github./chieffancypants/angular-loading-bar for multiple AJAX requests... but I want to show a splash screen for the initial load. Hence the code above. – Cameron Commented Aug 18, 2014 at 13:06

2 Answers 2

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/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/kLtzm93x/

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.