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 have struggled with same issue. Here is what working on my side where i am showing multiple loading image for each different section based on promise. For this purpose i have created a directive.

My html looks something like below.

Angularjs directive.

(function () {

    var module = angular.module('mi-loading', []);

    module.directive('miLoading', function () {
        return {
            restrict: 'E',
            scope: {
                promise: '='
            },

            link: function ($scope, $element, $attrs) {

                $scope.IsLoading = true;

                $scope.$watch('promise', function (prom) {
                    if (!prom) {
                        $scope.IsLoading = false;
                        return;
                    }
                    prom.success(function () { $scope.IsLoading = false; });
                });
            },
            template: '
'
        };
    });

})();

and finally the usage,

 var getData = function ()
           {
               var Promise = myservice.getMyData($scope);

               $scope.Loading = Promise;
           };

CSS

.spinner {
    min-width: 30px;
    min-height: 30px;
}

    .spinner:before {
        content: 'Loading…';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -13px;
        margin-left: -13px;
    }

    .spinner:not(:required):before {
        content: '';
        border-radius: 50%;
        border: 3px solid #ccc;
        /*border-top-color: #03ade0;*/
        border-top-color: #4187b5;
        animation: spinner .6s linear infinite;
        -webkit-animation: spinner .6s linear infinite;
    }