1

During the js and html load. I have to put loader. so can I implement that any idea.

How do I have AngularJS show a loading spinner until the data has finished loading?

Currently data is come from local array.

piet.t
  • 11,718
  • 21
  • 43
  • 52
Sagar Jethi
  • 2,313
  • 20
  • 20
  • Possible duplicate of [AngularJS: How to show preload or loading until page is loaded completely?](http://stackoverflow.com/questions/33030360/angularjs-how-to-show-preload-or-loading-until-page-is-loaded-completely) – J-D Dec 25 '15 at 07:15

2 Answers2

2

You can make a directive, inject there http service and watch on its request pending:

(function() {
    'use strict';
    angular
        .module('yourApp')
        .directive('loader', loader);

    /**
     * Defines loading spinner behaviour
     *
     * @param {obj} $http
     * @returns {{restrict: string, link: Function}}
     */
    function loader($http) {
        return {
            restrict: 'A',
            link: function(scope, element, attributes) {
                scope.$watch(function() {
                    return $http.pendingRequests.length;
                }, function(isLoading) {
                    if (isLoading) {
                        $(element).show();
                    } else {
                        $(element).hide();
                    }
                });
            }
        };
    }
})();

And use it:

<span class="spinner" data-loader></span>
Alexandr Lazarev
  • 12,554
  • 4
  • 38
  • 47
0

You can simply add a "hide" class on loading image by default and on ng-click remove that "hide". After getting successful you can again add "hide" class. I think its not a big deal.