AngularJS: How to show preload or loading until page is loaded completely?

Question

I\'ve an image gallery site where I\'m getting all images and image related data from the database as json format in my controller and then by using ng-repeat I\'m binding them

Answer 1

To achieve it, i am loading all my scripts at the end of the body. Before my app-wrapper-div i place a postion fixed "loading"-div. It is shown immediately before other scripts are loaded.

At the end of the body, after my scripts are included, i place an angular directive, that fadeOut and remove the loading-div.

The code:

  
  


    

      

        
APP TITLE
        
App is loading!
      
    
    
 
    ... 
    
    
    ...
    
    ...
    
    

And the hideLoadingScreen directive:

(function() {
  var app = angular.module('appModule');
  app.directive('hideLoadingScreen', function($timeout) {
    return {
      restrict: 'E',
      link: function() {
        $timeout(function() {
          $("#appLoadingScreen").fadeOut(600, function(){$(this).remove();});
        }, 400);
      }
    };
  });
})();