AngularJs裝載機，而HTTP請求是

頁

對正在進行的我已經開發了一個應用程序，我想添加裝載機在我的系統，我看找BlockUI，使一個演示，但我必須保持它在每一個頁面。AngularJs裝載機，而HTTP請求是

那麼，有沒有選擇那裏的角度，我可以將其包含在一個頁面，從一個地方管理標誌的所有HTTP調用？

只有在完成所有api調用後，它纔會被刪除。

2017-04-06 Nitin

分享您的代碼讓別人幫你 – tanmay

你可以創建自己的攔截器/加載器。你可以簡單地使用CSS和一些角碼來做到這一點。 –

[而Ajax調用加載圖標]的可能的複製（http://stackoverflow.com/questions/42700582/trying-to-add-loading-wheel-using-angular-when-i-make-ajax-call） –

只需創建一個工廠$http電話和在工廠添加的偵聽AJAX負荷和結束事件。在這個監聽器中添加你的加載器顯示和隱藏事件。這是一個示例代碼。在這裏，我使用Google地圖服務來獲取地點和angular broadcast事件以顯示和隱藏加載程序。

<!doctype html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>AngularJS Plunker</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
     var app = angular.module('plunker', []); 
 

 
     app.config(function ($httpProvider) { 
 

 
     }); 
 

 
     app.factory('httpPreConfig', ['$http', '$rootScope', function ($http, $rootScope) { 
 
      $http.defaults.transformRequest.push(function() { 
 
       console.log('Started'); 
 
       //Show your loader here 
 
       $rootScope.$broadcast('AjaxProgress'); 
 
      }); 
 
      $http.defaults.transformResponse.push(function() { 
 
       console.log('Stopped'); 
 
       //Hide your loader here 
 
       $rootScope.$broadcast('AjaxFinished'); 
 
      }) 
 
      return $http; 
 
     }]); 
 

 
     app.controller('MainCtrl', function ($scope, $rootScope, httpPreConfig) { 
 
      $scope.showLoader = false; 
 
      $scope.sendGet = function() { 
 
       httpPreConfig.get('http://maps.googleapis.com/maps/api/geocode/json?address=america'); 
 
      }; 
 
      
 
      $rootScope.$on('AjaxProgress', function(){ 
 
       $scope.showLoader = true; 
 
      }); 
 
      
 
      $rootScope.$on('AjaxFinished', function(){ 
 
       $scope.showLoader = false; 
 
      }); 
 
     }); 
 
    </script> 
 
    
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div ng-if="showLoader">Loader</div> 
 
    <button ng-click="sendGet()">Send Get</button> 
 
</body> 
 

 
</html>

我希望這將是對你有幫助。

來源

2017-04-06 12:10:47 Nitheesh

雅我可以使用，但它的最後一個優先事項，我必須在每個API調用發出消息 – Nitin

我創建了一個指令，併爲我添加了一些CSS和它的作品 – Nitin

不知道這是你想要什麼，而是基於標題 - 如果有人正在尋找裝載機是可笑容易實現我用loading bar

只是包含在你的應用程序，它會自動工作使用攔截器。

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

不阻止用戶界面，但提供加載程序。（從問題不知道這是要求是什麼？）

來源

2017-04-06 12:23:14 SteveL

AngularJs裝載機，而HTTP請求是

回答

相關問題