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请求是

回答

相关问题