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

I'm not sure if this is the right approach, but what I usually do is that I have a $scope.loaded variable which has the state of the page. If the page is loaded, the div you want to show is shown... If it's loading, the div with the loader is shown. Have a look at this plunk to get what I'm trying to say.

I'm pasting the Plunkr code here as well.

Javascript

  var app = angular.module('plunker', []);

  app.controller('MainCtrl', function($scope, $timeout) {
    $scope.loaded = true;
    $scope.text = 'Nothing loaded yet.';

    $scope.loadSomething = function () {
      $scope.loaded = false;

      $timeout(function() {
        // Simulates loading
        $scope.text = 'Hello World';
        $scope.loaded = true;
      }, 2000);
    };
  });

HTML

Load Something



  Loading...


  
{{ text }}

Do let me know if you need any further help.