Bootloader for AngularJS

Question

I want to show the counter when I first load my application, for example: https://devart.withgoogle.com/

I tried to do this through the Services module as follows:

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 is something wrong with this: the first one is that it does not listen to the first download, which it listens to EVERY request. It also doesn't show or hide the download as gracefully as it did on DevArt, and I use jQuery to hide and show the bootloader, instead of using Angular Animation.

Can anyone help? To clarify this, download the INITIAL! And not to show the counter on subsequent requests. I use this for this: https://github.com/chieffancypants/angular-loading-bar , but I want to show a splash to launch the application, which is different.

Answer 1

If you want to hide your application while AngularJS loads, by default your counter will be displayed using regular HTML code and use ng-cloak to hide parts of the angular application.

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

After downloading the application, you can turn off the counter 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/

Answer 2

I would not try to do this with an interceptor. This is fairly easy to do using the 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 view:

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

The rest is just an exercise in CSS.