CODEWITHSUNDEEP
angularjsspinner
Mahesh G
Mahesh G

Reputation: 1276

Spinner Loading with AngularJS

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>

Upvotes: 0

Views: 9242

Answers (1)

NIKHIL RANE
NIKHIL RANE

Reputation: 4092

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

Upvotes: 2

Related Questions