Spinner Laden mit AngularJS

Question

Ich wollte Spinner machen sollte angezeigt werden, wenn der Benutzer-Taste auf Senden klickt und Spinner sollte einmal die AJAX POST stoppen und Anforderung GET

abgeschlossen

Können Sie mir bitte helfen, kennen mich, wie ich meine machen unter Angular-Code zu Implementieren Sie das Feature.

Unten finden Sie das Beispiel I für Spinner sah in Angular

Demo

unter meinem 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> 

Answer 1

Try Nach Lösung

Diese gelten für alle HTTP-Anforderung, die den Einsatz in Winkelregler sind. Wenn Sie HTTP-Anforderung dann Spinner und Fortschrittsbalken zeigt Ihnen nennen

Demo

dieses angular-loading-bar finden.

enthalten Sie die Ladeleiste als eine Abhängigkeit für Ihre App. Wenn Sie Animationen möchten, schließen Sie auch ngAnimate ein. Hinweis: ngAnimate optional ist

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

das mitgelieferte JS und CSS-Datei enthalten (oder Ihre eigene CSS erstellen Standardwerte außer Kraft zu setzen).

<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> 

Hoffnung ist dies hilft Ihnen