AngularJS How to show spinner during $http request

Question

When I starting app for the first time, after login I make one http request to server and wait couple second for response while server make things done. While I am waiting I can click on some link and walk trough app. I want to disable this and make some loading gif across all page, but I don't know how to do that.

My Controller:

vm.starting = starting;    
function starting() {
    dataService.restartVersion().then(function (data) {

    });
}

My Service

function restartVersion() {
    return $http.post('http://localhost/organization/restartVer', {
    }).then(function(response) {
        return response.data;
    });
}

How to implement something in my code to show loading gif across all page?

Any helps?

Thanks in advance

Before the call of the service use a `ng-show` set to `true` to display the `div` with the spinner in. When u receive the data or want to display them change the value of the `ng-show` to hide it. For the data use the same var but with ! to not display the spinner is when datas are displayed — V.pique, Aug 11 '16 at 14:56
Possible duplicate of [Showing Spinner GIF during $http request in angular](http://stackoverflow.com/questions/15033195/showing-spinner-gif-during-http-request-in-angular) — Ricardo Pontual, Aug 11 '16 at 14:57
isn't duplicate because I'm new in angular and know to write only in one way, you show link with another approach to coding which I am not familiar. — Sasa, Aug 11 '16 at 15:00

georgeawg · Accepted Answer · 2016-08-12T08:31:32.540

In the controller, set and reset a flag.

function starting() {
    vm.starting = true;
    dataService.restartVersion()
      .then(function onSuccess(data) {
        vm.data = data;
    }).catch(function onReject(errorResponse) {
        console.log(errorResponse.status);
    }).finally(function() {
        vm.starting = false;
    });
};

In the HTML, use the flag:

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

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

The vm.starting is set true when the XHR starts and cleared when the XHR completes.

AngularJS How to show spinner during $http request

1 Answers1