Spinner Loading with AngularJS

Question

I wanted to make Spinner should appear when user clicks on Submit Button and Spinner should stop once the AJAX POST and GET request completed

Can you Please help me know How I make my below Angular Code to implement the feature.

Below is the Example I saw for Spinner in Angular

Demo

Below is my AngularJS code .

  var app = angular.module("myApp", ["ngTable"]);

    app.controller("Controller", ["$scope", "$http", "$window",
        function ($scope, $http, $window) {

            $scope.firstFunction = function () {
                $http({
                    method: 'POST',
                    url: 'mainDeviceSite.php',
                    //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                    data: {
                        accountnumber: $scope.accountnumber
                    },
                }).then(function (response) {
                    var data = response.data;
                    $scope.post = response.data;
                    $scope.cellularIPAddressValue = response.data.devices;
                    console.log($scope.cellularIPAddressValue);

                    //$scope.secondFunction(data);
                }, function (error) {
                    var data = error.data;
                    console.log("Error" + data);
                })
            }

       $scope.secondFunction = function () {
            $http({
                method: 'POST',
                url: 'BEPEvents.php',
                //headers : {'Content-Type':'application/x-www-form-urlencoded'},
                data: {
                    accountnumber: $scope.accountnumber
                },
            }).then(function (response) {
                var data = response.data;
                $scope.post = response.data;

                var x2js = new X2JS();
                $scope.aftCnv = x2js.xml_str2json(response.data);
                $scope.bepValues = $scope.aftCnv.EEPEvents.BlobData;
                console.log($scope.bepValues);
            }, function (error) {
                var data = error.data;
                console.log("Error" + data);
            })
        }
    }
]);

HTML Code

 <div class="example">
            <div class="col-md-12">
                <div class="row">
                    <div class="input-group form-search">
                        <input type="text" ng-model="accountnumber" name="accountnumber" class="form-control search-query" placeholder="Enter Account Number">
                        <span class="input-group-btn">
                     <button type="submit" ng-click="firstFunction();secondFunction()" class="btn btn-primary">Submit</button>
                     </span>
                        <span id="message">{{message}}</span>
                    </div>
                </div>
            </div>
        </div>

use a variable and inside then function set it to true and then use $timeout to set it back to false and then within html probably use ng-if or ng-show based on number of calls made..not a good way of handling but will get the job done... — Anirudh Mangalvedhekar
– Anirudh Mangalvedhekar, Commented Nov 19, 2016 at 13:58

NIKHIL RANE · Accepted Answer · 2016-11-19 14:10:48Z

2

Try Following solution

This applicable for all http request that are use in angular controller. When you call http request then spinner and progress bar you shows

Demo

Refer this angular-loading-bar.

include the loading bar as a dependency for your app. If you want animations, include ngAnimate as well. note: ngAnimate is optional

angular.module('myApp', ['angular-loading-bar', 'ngAnimate'])

include the supplied JS and CSS file (or create your own CSS to override defaults).

<link rel='stylesheet' href='build/loading-bar.min.css' type='text/css' media='all' />
<script type='text/javascript' src='build/loading-bar.min.js'></script>

Hope this is help you

edited Nov 19, 2016 at 14:10

answered Nov 19, 2016 at 14:02

NIKHIL RANE

4,1222 gold badges26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mahesh G Over a year ago

I tried the above Solution But I am getting error in the console

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [ng:areq] Argument 'fn' is not a function, got string

Collectives™ on Stack Overflow

Spinner Loading with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related