Wyświetlanie spinnera GIF podczas $http request w AngularJS

To naprawdę zależy od konkretnego przypadku użycia, ale prosty sposób podążałby za wzorcem takim jak ten:

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});

A następnie reaguj na to w szablonie:

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

Oto wersja z directive i ng-hide.

Spowoduje to wyświetlenie loadera podczas wszystkich wywołań za pośrednictwem usługi angular $http.

W szablonie:

<div class="loader" data-loading></div>

Dyrektywa:

angular.module('app')
  .directive('loading', ['$http', function ($http) {
    return {
      restrict: 'A',
      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');
          }
        });
      }
    };
}]);

Używając klasy ng-hide na elemencie, możesz uniknąć jquery.

Dostosuj: Dodaj interceptor

Jeśli utworzysz loading-interceptor, możesz pokazać/ukryć loader na podstawie warunek.

Dyrektywa:

var loadingDirective = function ($rootScope) {
  return function ($scope, element, attrs) {
      $scope.$on("loader_show", function () {
          return element.removeClass('ng-hide');
      });
      return $scope.$on("loader_hide", function () {
          return element.addClass('ng-hide');
      });
  };
};

Interceptor:

• na przykład: nie pokazuj spinner Kiedy response.background === true;
• przechwycić request i/lub response ustawić $rootScope.$broadcast("loader_show"); lub $rootScope.$broadcast("loader_hide");

Więcej informacji na temat pisania interceptor

Jeśli używasz ngResource, atrybut $ resolved obiektu jest przydatny dla loaderów:

Dla zasobu w następujący sposób:

var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})

Możesz połączyć loader z atrybutem $ resolved obiektu resource:

<div ng-hide="user.$resolved">Loading ...</div>

Https://github.com/wongatech/angular-http-loader to dobry projekt na to.

Przykład tutaj http://wongatech.github.io/angular-http-loader/

Poniższy kod pokazuje przykład szablonu / loader.tpl.html, gdy odbywa się żądanie.

<div ng-http-loader template="example/loader.tpl.html"></div>

Właśnie odkryłem dyrektywę angular-busy, która pokazuje mały loader w zależności od jakiegoś wywołania asynchronicznego.

Na przykład, jeśli musisz złożyć GET, odwołaj się do obietnicy w swoim $scope,

$scope.req = $http.get('http://google.fr');

I nazwij to tak:

<div cg-busy="req"></div>

Oto GitHub.

Możesz go również zainstalować używając bower (nie zapomnij zaktualizować zależności projektu):

bower install angular-busy --save

Jeśli owijasz wywołania api w usłudze / fabryce, możesz śledzić tam licznik ładowania (zgodnie z odpowiedź i doskonała sugestia jednoczesna przez @JMaylin) i odwoływać się do licznika ładowania za pomocą dyrektywy. Lub dowolnej ich kombinacji.

API WRAPPER

yourModule
    .factory('yourApi', ['$http', function ($http) {
        var api = {}

        //#region ------------ spinner -------------

        // ajax loading counter
        api._loading = 0;

        /**
         * Toggle check
         */
        api.isOn = function () { return api._loading > 0; }

        /**
         * Based on a configuration setting to ignore the loading spinner, update the loading counter
         * (for multiple ajax calls at one time)
         */
        api.spinner = function(delta, config) {
            // if we haven't been told to ignore the spinner, change the loading counter
            // so we can show/hide the spinner

            if (NG.isUndefined(config.spin) || config.spin) api._loading += delta;

            // don't let runaway triggers break stuff...
            if (api._loading < 0) api._loading = 0;

            console.log('spinner:', api._loading, delta);
        }
        /**
         * Track an ajax load begin, if not specifically disallowed by request configuration
         */
        api.loadBegin = function(config) {
            api.spinner(1, config);
        }
        /**
         * Track an ajax load end, if not specifically disallowed by request configuration
         */
        api.loadEnd = function (config) {
            api.spinner(-1, config);
        }

        //#endregion ------------ spinner -------------

        var baseConfig = {
            method: 'post'
            // don't need to declare `spin` here
        }

        /**
         * $http wrapper to standardize all api calls
         * @param args stuff sent to request
         * @param config $http configuration, such as url, methods, etc
         */
        var callWrapper = function(args, config) {
            var p = angular.extend(baseConfig, config); // override defaults

            // fix for 'get' vs 'post' param attachment
            if (!angular.isUndefined(args)) p[p.method == 'get' ? 'params' : 'data'] = args;

            // trigger the spinner
            api.loadBegin(p);

            // make the call, and turn of the spinner on completion
            // note: may want to use `then`/`catch` instead since `finally` has delayed completion if down-chain returns more promises
            return $http(p)['finally'](function(response) {
                api.loadEnd(response.config);
                return response;
            });
        }

        api.DoSomething = function(args) {
            // yes spinner
            return callWrapper(args, { cache: true });
        }
        api.DoSomethingInBackground = function(args) {
            // no spinner
            return callWrapper(args, { cache: true, spin: false });
        }

        // expose
        return api;
    });

DYREKTYWA SPINNER

(function (NG) {
    var loaderTemplate = '<div class="ui active dimmer" data-ng-show="hasSpinner()"><div class="ui large loader"></div></div>';

    /**
     * Show/Hide spinner with ajax
     */
    function spinnerDirective($compile, api) {
        return {
            restrict: 'EA',
            link: function (scope, element) {
                // listen for api trigger
                scope.hasSpinner = api.isOn;

                // attach spinner html
                var spin = NG.element(loaderTemplate);
                $compile(spin)(scope); // bind+parse
                element.append(spin);
            }
        }
    }

    NG.module('yourModule')
        .directive('yourApiSpinner', ['$compile', 'yourApi', spinnerDirective]);
})(angular);

Użycie

<div ng-controller="myCtrl" your-api-spinner> ... </div>

Do ładowania stron i modali najprostszym sposobem jest użycie ng-show direcive i użycie jednej ze zmiennych scope data. Coś jak ng-show= " angular.isUndefined(scope.data.someobject)". Gdy dane są niezdefiniowane, wyświetlony zostanie spinner. Gdy usługa powróci z danymi i zakres zostanie wypełniony, spinner zostanie ukryty.

Jest to najprostszy sposób, aby dodać spinner, jak sądzę:-

Możesz użyć ng-show z tagiem div dowolnego z tych pięknych spinnerów http://tobiasahlin.com/spinkit/ {{to nie jest moja strona}}

I wtedy możesz użyć tego rodzaju logiki

//ajax start
    $scope.finderloader=true;
    
          $http({
    method :"POST",
    url : "your URL",
  data: { //your data
     
     }
  }).then(function mySucces(response) {
    $scope.finderloader=false;
      $scope.search=false;          
    $scope.myData =response.data.records;
  });
     
    //ajax end 
    

<div ng-show="finderloader" class=spinner></div>
//add this in your HTML at right place

Based on Josh David Miller response:

  <body>
  <header>
  </header>
<div class="spinner" ng-show="loading">
  <div class="loader" ></div>
</div>

<div ng-view=""></div>

<footer>
</footer>

</body>

Dodaj ten css:

    .loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  border-bottom : 16px solid black;
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 45%;
  left: 45%;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.spinner{
  width: 100%;
height: 100%;
z-index: 10000;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
text-align: center;
vertical-align: middle;
background: white;
opacity: 0.6;
}

I po prostu w Twoim kanciastym add:

$rootScope.loading = false; $rootScope.loading = true; - > when $http.zdobądź końcówki.

Dzielenie się moją wersją świetnej odpowiedzi od @bulltorious, zaktualizowanej dla nowszych kompilacji angular (użyłem wersji 1.5.8 z tym kodem), a także włączyłem pomysł @JMaylin na użycie licznika, aby być odpornym na wiele jednoczesnych żądań i opcję pominięcia pokazywania animacji dla żądań trwających mniej niż minimalna liczba milisekund:

var app = angular.module('myApp');
var BUSY_DELAY = 1000; // Will not show loading graphic until 1000ms have passed and we are still waiting for responses.

app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('busyHttpInterceptor');
})
  .factory('busyHttpInterceptor', ['$q', '$timeout', function ($q, $timeout) {
    var counter = 0;
    return {
      request: function (config) {
        counter += 1;
        $timeout(
          function () {
            if (counter !== 0) {
              angular.element('#busy-overlay').show();
            }
          },
          BUSY_DELAY);
        return config;
      },
      response: function (response) {
        counter -= 1;
        if (counter === 0) {
          angular.element('#busy-overlay').hide();
        }
        return response;
      },
      requestError: function (rejection) {
        counter -= 1;
        if (counter === 0) {
          angular.element('#busy-overlay').hide();
        }
        return rejection;
      },
      responseError: function (rejection) {
        counter -= 1;
        if (counter === 0) {
          angular.element('#busy-overlay').hide();
        }
        return rejection;
      }
    }
  }]);

To działa dobrze dla mnie:

HTML:

  <div id="loader" class="ng-hide" ng-show="req.$$state.pending">
    <img class="ajax-loader" 
         width="200" 
         height="200" 
         src="/images/spinner.gif" />
  </div>

Kątowy:

  $scope.req = $http.get("/admin/view/"+id).success(function(data) {          
      $scope.data = data;
  });

Podczas gdy obietnica zwrócona z $http jest oczekująca, ng-show oceni ją jako "prawdziwość". Jest to automatycznie aktualizowane po rozwiązaniu obietnicy... tego właśnie chcemy.

Służy do wyświetlania paska ładowania w żądaniu http

'use strict';
appServices.factory('authInterceptorService', ['$q', '$location', 'localStorage','$injector','$timeout', function ($q, $location, localStorage, $injector,$timeout) {

var authInterceptorServiceFactory = {};
var requestInitiated;

//start loading bar
var _startLoading = function () {
   console.log("error start loading");
   $injector.get("$ionicLoading").show();

}

//stop loading bar
var _stopLoading = function () {
    $injector.get("$ionicLoading").hide();
}

//request initiated
var _request = function (config) {
     requestInitiated = true;
    _startLoading();
    config.headers = config.headers || {};
    var authDataInitial = localStorage.get('authorizationData');
    if (authDataInitial && authDataInitial.length > 2) {
        var authData = JSON.parse(authDataInitial);
        if (authData) {
            config.headers.Authorization = 'Bearer ' + authData.token;
        }
    }
    return config;
}

//request responce error
var _responseError = function (rejection) {
   _stopLoading();
    if (rejection.status === 401) {
        $location.path('/login');
    }
    return $q.reject(rejection);
}

//request error
var _requestError = function (err) {
   _stopLoading();
   console.log('Request Error logging via interceptor');
   return err;
}

//request responce
var _response = function(response) {
    requestInitiated = false;

   // Show delay of 300ms so the popup will not appear for multiple http request
   $timeout(function() {

        if(requestInitiated) return;
        _stopLoading();
        console.log('Response received with interceptor');

    },300);

return response;
}



authInterceptorServiceFactory.request = _request;
authInterceptorServiceFactory.responseError = _responseError;
authInterceptorServiceFactory.requestError = _requestError;
authInterceptorServiceFactory.response = _response;

return authInterceptorServiceFactory;
}]);

.factory('authHttpResponseInterceptor', ['$q', function ($q) {
        return {
            request: function(config) {
                angular.element('#spinner').show();
                return config;
            },
            response : function(response) {
                angular.element('#spinner').fadeOut(3000);
                return response || $q.when(response);
            },
            responseError: function(reason) {
                angular.element('#spinner').fadeOut(3000);
                return $q.reject(reason);
            }
        };
    }]);



 .config(['$routeProvider', '$locationProvider', '$translateProvider', '$httpProvider',
            function ($routeProvider, $locationProvider, $translateProvider, $httpProvider) {
                $httpProvider.interceptors.push('authHttpResponseInterceptor');
    }
]);

in your Template
<div id="spinner"></div>


css   

#spinner,
#spinner:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  background-color: #A9A9A9;
  z-index: 10000;
  position: absolute;
  left: 50%;
  bottom: 100px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Utwórz dyrektywę o tym kodzie:

$scope.$watch($http.pendingRequests, toggleLoader);

function toggleLoader(status){
  if(status.length){
    element.addClass('active');
  } else {
    element.removeClass('active');
  }
}

Innym rozwiązaniem pokazującym Ładowanie między różnymi zmianami adresów url jest:

$rootScope.$on('$locationChangeStart', function() {
  $scope.loading++;
});

$rootScope.$on('$locationChangeSuccess', function() {
  $timeout(function() {
    $scope.loading--;
  }, 300);
});

A następnie w znacznikach po prostu przełącz spinner z ng-show="loading".

Jeśli chcesz go wyświetlić w żądaniach ajax wystarczy dodać $scope.loading++ Kiedy żądanie się zaczyna i kiedy się kończy dodaj $scope.loading--.

Możesz też spróbować czegoś takiego:

Utwórz dyrektywę:

myApp.directive('loader', function () {
    return {
        restrict: 'A',
        scope: {cond: '=loader'},
        template: '<span ng-if="isLoading()" class="soft"><span class="fa fa-refresh fa-spin"></span></span>',
        link: function (scope) {
            scope.isLoading = function() {
                var ret = scope.cond === true || (
                        scope.cond &&
                        scope.cond.$$state &&
                        angular.isDefined(scope.cond.$$state.status) &&
                        scope.cond.$$state.status === 0
                    );
                return ret;
            }
        }
    };
}); 

Następnie dodajesz coś takiego do mainCtrl

    // Return TRUE if some request is LOADING, else return FALSE
    $scope.isLoading = function() {
        return $http.pendingRequests.length > 0;
    };

A HTML może wyglądać tak:

<div class="buttons loader">
    <span class="icon" loader="isLoading()"></span>
</div>

Następujący sposób uwzględni wszystkie żądania i ukryje je tylko po wykonaniu wszystkich żądań:

app.factory('httpRequestInterceptor', function(LoadingService, requestCount) {
    return {
        request: function(config) {
            if (!config.headers.disableLoading) {
                requestCount.increase();
                LoadingService.show();
            }
            return config;
        }
    };
}).factory('httpResponseInterceptor', function(LoadingService, $timeout, error, $q, requestCount) {
    function waitAndHide() {
        $timeout(function() {
            if (requestCount.get() === 0){
                LoadingService.hide();
            }
            else{
                waitAndHide();
            }
        }, 300);
    }

    return {
        response: function(config) {
            requestCount.descrease();
            if (requestCount.get() === 0) {
                waitAndHide();
            }
            return config;
        },
        responseError: function(config) {
            requestCount.descrease();
            if (requestCount.get() === 0) {
                waitAndHide();
            }
            var deferred = $q.defer();
            error.show(config.data, function() {
                deferred.reject(config);
            });
            return deferred.promise;
        }
    };
}).factory('requestCount', function() {
    var count = 0;
    return {
        increase: function() {
            count++;
        },
        descrease: function() {
            if (count === 0) return;
            count--;
        },
        get: function() {
            return count;
        }
    };
})

Ponieważ funkcjonalnośćposition:fixed zmieniła się ostatnio, miałem problemy z pokazaniem gif loadera ponad wszystkimi elementami, więc musiałem użyć wbudowanegojQuery .

Html

<div ng-controller="FetchController">
      <div id="spinner"></div>
</div>

Css

#spinner {display: none}
body.spinnerOn #spinner { /* body tag not necessary actually */
   display: block;
   height: 100%;
   width: 100%;
   background: rgba(207, 13, 48, 0.72) url(img/loader.gif) center center no-repeat;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9999;
}
body.spinnerOn main.content { position: static;} /* and whatever content needs to be moved below your fixed loader div */

Controller

app.controller('FetchController', ['$scope', '$http', '$templateCache', '$location', '$q',
function($scope, $http, $templateCache, $location, $q) {

angular.element('body').addClass('spinnerOn'); // add Class to body to show spinner

$http.post( // or .get(
    // your data here
})
.then(function (response) {
    console.info('success');     
    angular.element('body').removeClass('spinnerOn'); // hide spinner

    return response.data;               
}, function (response) {                   
    console.info('error'); 
    angular.element('body').removeClass('spinnerOn'); // hide spinner
});

})

Mam nadzieję, że to pomoże:)

Wszystkie odpowiedzi są lub są skomplikowane, lub trzeba ustawić pewne zmienne na każde żądanie, co jest bardzo złą praktyką, jeśli znamy suche pojęcie. Tutaj prosty przykład, ustawiłem mysz na wait po uruchomieniu ajax i ustawiłem ją na auto po zakończeniu ajax.

$httpProvider.interceptors.push(function($document) {
    return {
     'request': function(config) {
         // here ajax start
         // here we can for example add some class or show somethin
         $document.find("body").css("cursor","wait");

         return config;
      },

      'response': function(response) {
         // here ajax ends
         //here we should remove classes added on request start

         $document.find("body").css("cursor","auto");

         return response;
      }
    };
  });

Kod należy dodać w konfiguracji aplikacji app.config. Pokazałem jak zmienić mysz na stan ładowania ale tam można pokazać/ukryć dowolną zawartość loadera, lub dodać, usunąć kilka klas css które pokazują ładowacz.

Interceptor będzie działał przy każdym wywołaniu ajax, więc nie ma potrzeby tworzenia specjalnych zmiennych logicznych ($scope.loading = true / false itd. ) przy każdym wywołaniu http.

Oto moja implementacja, tak prosta jak ng-show i licznik zapytań.

Używa nowej usługi dla wszystkich żądań $http:

myApp.service('RqstSrv', [ '$http', '$rootScope', function($http, $rootScope) {
    var rqstService = {};

    rqstService.call = function(conf) {

        $rootScope.currentCalls = !isNaN($rootScope.currentCalls) ?  $rootScope.currentCalls++ : 0;

        $http(conf).then(function APICallSucceed(response) {
            // Handle success
        }, function APICallError(response) {
            // Handle error
        }).then(function() {
            $rootScope.currentCalls--;
        });
    }
} ]);

A następnie możesz użyć bazy loadera na liczbę bieżących połączeń:

<img data-ng-show="currentCalls > 0" src="images/ajax-loader.gif"/>

Jeśli chcesz pokazać loader dla każdego połączenia żądań http, możesz użyć angular interceptor do zarządzania połączeniami żądań http,

Oto przykładowy kod

<body data-ng-app="myApp">
<div class="loader">
    <div id="loader"></div>
</div>

<script>
    var app = angular.module("myApp", []);

    app.factory('httpRequestInterceptor', ['$rootScope', '$location', function ($rootScope, $location) {
        return {
            request: function ($config) {
                $('.loader').show();
                return $config;
            },
            response: function ($config) {
                $('.loader').hide();
                return $config;
            },
            responseError: function (response) {
                return response;
            }
        };
    }]);

    app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
        function ($stateProvider, $urlRouterProvider, $httpProvider) {
            $httpProvider.interceptors.push('httpRequestInterceptor');
        }]);

</script>
</body>

Możesz użyć angular interceptor do zarządzania połączeniami żądań http

  <div class="loader">
    <div id="loader"></div>
  </div>

<script>
    var app = angular.module("myApp", []);

    app.factory('httpRequestInterceptor', ['$rootScope', '$location', function ($rootScope, $location) {
        return {
            request: function ($config) {
                $('.loader').show();
                return $config;
            },
            response: function ($config) {
                $('.loader').hide();
                return $config;
            },
            responseError: function (response) {
                return response;
            }
        };
    }]);

    app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
        function ($stateProvider, $urlRouterProvider, $httpProvider) {
            $httpProvider.interceptors.push('httpRequestInterceptor');
        }]);

</script>

Https://stackoverflow.com/a/49632155/4976786

Jest to prosty sposób na pokazanie spinnera, który nie wymaga biblioteki innej firmy, intercepterów lub jQuery.

W kontrolerze ustaw i zresetuj flagę.

function starting() {
    //ADD SPINNER
    vm.starting = true;
    $http.get(url)
      .then(function onSuccess(response) {
        vm.data = response.data;
    }).catch(function onReject(errorResponse) {
        console.log(errorResponse.status);
    }).finally(function() {
        //REMOVE SPINNER
        vm.starting = false;
    });
};

W HTML Użyj flagi:

<div ng-show="vm.starting">
    <img ng-src="spinnerURL" />
</div>

<div ng-hide="vm.starting">
    <p>{{vm.data}}</p>
</div>

{[2] } jest ustawiane true Po uruchomieniu XHR i czyszczone po zakończeniu XHR.

Oto moje rozwiązanie, które uważam za dużo łatwiejsze niż inne opublikowane tutaj. Nie jestem pewien, jak "ładny" to jest, ale to rozwiązało wszystkie moje problemy

Mam styl css o nazwie "loading"

.loading { display: none; }

Html dla loading div może być cokolwiek, ale użyłem niektórych ikon FontAwesome i metody spin tam:

<div style="text-align:center" ng-class="{ 'loading': !loading }">
    <br />
    <h1><i class="fa fa-refresh fa-spin"></i> Loading data</h1>
</div>

Na elementach, które chcesz ukryć po prostu napisz to:

<something ng-class="{ 'loading': loading }" class="loading"></something>

I w funkcji właśnie ustawiłem to na load.

(function (angular) {
    function MainController($scope) {
        $scope.loading = true

Używam SignalR więc w hubProxy.klient.funkcja allLocks (po jej zakończeniu przechodząc przez zamki) i juts put

 $scope.loading = false
 $scope.$apply();

To również ukrywa {{someField}} podczas ładowania strony, ponieważ ustawiam klasę ładowania na load I AngularJS usuwa ją później.