Sasa Sasa - 3 months ago 23
HTTP Question

angularjs 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

Answer

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.