CODEWITHSUNDEEP
angularjs
user7397787
user7397787

Reputation: 1470

Display loader in angularjs

I am just submitting one form.Its taking some time to return the response,on that time I need to show the loader.
This is my code

<div id="page-loading">
            <img style="display:none; margin:0 auto;"  src="~/images/loader.gif" />
        </div>

Script:

$scope.myFunc = function (leave) {
                            $scope.leaveDetails=leave;
                            console.log($scope.leaveDetails)
                            var requestHeaders = {
                                "content-type": 'application/json'
                            }
                            var httpRequest = {
                                method: 'POST',
                                url: '/Admin/sendRequest',
                                headers: requestHeaders,
                                data: $scope.leaveDetails
                            }
                            $http(httpRequest).then(function (response) {
                                $timeout(function () {
                                   $('#page-loading').fadeOut('slow');
                                }, 1000);

                                alert("successfully applied")
                                window.location= "/admin/Home";
                            })
                        }

But its not displaying the loader But taking more time to return the response.

If I give display:block here, <img style="display:none; margin:0 auto;" src="~/images/loader.gif" /> by default loader is coming but I need to show it only on submit of form.
Any suggestion?

Upvotes: 1

Views: 6391

Answers (3)

Rahi.Shah
Rahi.Shah

Reputation: 1313

You can use angular-busy below is link,

https://github.com/cgross/angular-busy

It's very simple to use no need of this all and if loader you not like then you can change loader CSS als

Upvotes: 1

xReeQz
xReeQz

Reputation: 320

Set a variable to scope like $scope.loading = true at the top of your method, and then in finally handler of http promise set it to false. 

$http(httpRequest).then(...).finally(function() { $scope.loading = false; })

Based on that flag you can hide and show your loader.

<div id="page-loading" ng-if="loading">
    <img style="margin:0 auto;"  src="~/images/loader.gif" />
</div>

Upvotes: 3

stzoannos
stzoannos

Reputation: 938

I would use ng-if to show and hide the loader:

<div ng-if="loaderVisible">
     <img margin:0 auto;"  src="~/images/loader.gif" />
</div>

Then you can make loaderVisible = true in the beginning of your function and hide it again by making it false during the callback success.

Upvotes: 2

Related Questions