AngularJS: показывать изображение загрузчика, пока данные не загружены

Есть лучший способ, который запрещает показывать две иконки, например:

(ПЛОХОЙ СПОСОБ)

Когда angular манипулирует DOM, он может показать значок поиска, прежде чем скрыть значок загрузки. Вот почему плохо иметь два элемента.

<i class="fa fa-search" ng-hide="loadingData" ></i>
<i class="fa fa-circle-o-notch fa-spin" ng-show="loadingData"></i>

(ХОРОШИЙ СПОСОБ)

Этот способ предотвращает отображение загрузки и значка поиска, когда Angular скрывает и показывает элементы.

<i class="fa" ng-class="loadingData ?  'fa-circle-o-notch fa-spin' : 'fa-search' " ></i>

И сценарий будет примерно таким.

$scope.clickEventThatDoSomething = function () {
    $scope.loadingData = true;
    http.get('http://YourAPIUrl').then(function (data) {
        $scope.loadingData = false;
        $scope.data = data.data;
    }).catch(function (err) {
        $scope.loadingData = false;
    })
}

Вы можете сделать одну вещь:

• По умолчанию скрывайте html-контент
• Покажите это, когда получите ответ

Любить:

<div class="content" ng-show="!showLoader">
   .....
</div>

Таким образом, использование только этого загрузчика покажет, пока вы не получите свои данные с сервера.

Дополнение к ответу @ Venugopal. Чтобы отобразить это изображение загрузки в HTML

<div ng-show="showLoader"><!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
  <img src="source"> <!-- or any other spinner -->
</div>

Всякий раз, когда мы используем HTTP-вызов в AngularJS, мы хотим показать загрузочное изображение по умолчанию. Итак, здесь мы собираемся достичь этого с помощью пользовательской директивы.

JS CODE

var app = angular.module('appMyCustomModule',[]);
app.directive('dirCustomLoader', ['$http', function ($http) {
    return {
        restrict: 'E',
        template: '<div class="loading-icon"></div>',
        link: function (scope, element, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function (value) {
                if (value) 
                    element.removeClass('ng-hide');
                else 
                    element.addClass('ng-hide');
            });
        }
    };
}]);

CSS:

.loading-icon {
    background: url(static image url) no-repeat scroll center #fff;
    display: inline-block;
    font-size: 0;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999999999999999999 !important;
    opacity: .5;
}

КОД HTML:

<dir-custom-loader class="ng-hide"></dir-custom-loader>

Вам нужно показать образ загрузчика перед вызовом ajax и удалить его после его завершения как в успешном, так и в обработчике ошибок.

Вы найдете множество загрузочных изображений онлайн, которые вы можете использовать для своего приложения.

JS CODE

 //show the loader image in center of screen & prevent any user interactions
 $scope.imLoading = true;
 $http.get('http://www.testurl.com/index.php/site/getprofileLocations').then(
   function(data){
       //hide the loader image & process successful data. 
       $scope.imLoading = false;    
   }, function (errorData) {
       //hide the loader image & show error message to user
       $scope.imLoading = false;
 });

CSS:

.im_loading{
 display:none;
 position:fixed;
 top:50%;
 left:50%;
 margin:-35px 0px 0px -35px;
 background:#fff url(../images/loader.gif) no-repeat center center;
 width:70px;
 height:70px;
 z-index:9999;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 border-radius:10px;
 -moz-box-shadow:1px 1px 3px #000;
 -webkit-box-shadow:1px 1px 3px #000;
 box-shadow:1px 1px 3px #000;
 opacity:0.7;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

КОД HTML:

<div class="im_loading" ng-show:"imLoading"></div>

Примечание. Ваш код обрабатывает только успешный вызов ajax, а не ошибочный вызов, что нехорошо, поскольку ваш код перестает отвечать, когда возвращается ошибка, поэтому вам также необходимо обрабатывать случай ошибки.