Show spinner GIF during an $http request in AngularJS?

angularjs ajax busyindicator
Ajay Beniwal picture Ajay Beniwal · Feb 22, 2013 · Viewed 289.9k times · Source

I am using the $http service of AngularJS to make an Ajax request.

How can a spinner GIF (or another type of busy indicator) be shown while the Ajax request is executing?

I don't see anything like an ajaxstartevent in the AngularJS documentation.

Answer

Josh David Miller picture Josh David Miller · Feb 22, 2013

This really depends on your specific use case, but a simple way would follow a pattern like this:

.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;
  });
});

And then react to it in your template:

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

Related questions

How can I post data as form data instead of a request payload?

In the code below, the AngularJS $http method calls the URL, and submits the xsrf object as a "Request Payload" (as described in the Chrome debugger network tab). The jQuery $.ajax method does the same call, but submits xsrf as "…

Read More
How do I POST urlencoded form data with $http without jQuery?

I am new to AngularJS, and for a start, I thought to develop a new application using only AngularJS. I am trying to make an AJAX call to the server side, using $http from my Angular App. For sending the …

Read More
How to load json into my angular.js ng-model?

I have what I think is probably a very obvious question, but I couldn't find an answer anywhere. I am just trying to load some JSON data from my server into the client. Right now, I am using JQuery to …

Read More