CODEWITHSUNDEEP
angularjsloadingangularjs-http
Sasa
Sasa

Reputation: 563

AngularJS How to show spinner during $http request

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

Upvotes: 1

Views: 1808

Answers (1)

georgeawg
georgeawg

Reputation: 48968

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.

Upvotes: 1

Related Questions