角度，当任何资源处于待处理状态时显示加载 [英] Angular, show loading when any resource is in pending
问题描述
我已经写了一个代码来显示loader div，当任何资源处于待处理状态时，无论它是通过$ http.get还是通过路由\ ng-view获取的. 我只想知道我是否会变坏...
I already write a code to display a loader div, when any resources is in pending, no matter it's getting via $http.get or routing \ ng-view. I wan't only information if i'm going bad...
flowHandler服务:
flowHandler service:
app.service('flowHandler', function(){
var count = 0;
this.init = function() { count++ };
this.end = function() { count-- };
this.take = function() { return count };
});
MainCTRL追加到<body ng-controller="MainCTRL">
The MainCTRL append into <body ng-controller="MainCTRL">
app.controller("MainCTRL", function($scope, flowHandler){
var _this = this;
$scope.pageTitle = "MainCTRL";
$scope.menu = [];
$scope.loader = flowHandler.take();
$scope.$on("$routeChangeStart", function (event, next, current) {
flowHandler.init();
});
$scope.$on("$routeChangeSuccess", function (event, next, current) {
flowHandler.end();
});
updateLoader = function () {
$scope.$apply(function(){
$scope.loader = flowHandler.take();
});
};
setInterval(updateLoader, 100);
});
还有一些通过$ http.get获取数据的测试控制器:
And some test controller when getting a data via $http.get:
app.controller("BodyCTRL", function($scope, $routeParams, $http, flowHandler){
var _this = this;
$scope.test = "git";
flowHandler.init();
$http.get('api/menu.php').then(function(data) {
flowHandler.end();
$scope.$parent.menu = data.data;
},function(error){flowHandler.end();});
});
现在，我已经将flowHandler服务注入到任何控制器，并初始化或结束流.
now, I already inject flowHandler service to any controller, and init or end a flow.
这是个好主意还是那么糟糕?
It's good idea or its so freak bad ?
有什么建议吗?你是怎么做到的?
Any advice ? How you do it ?
推荐答案
我建议您看看$ http的未决请求属性
I suggest you to take a look at $http's pendingRequest propertie
https://docs.angularjs.org/api/ng/service/$http
顾名思义，其一系列请求仍在等待处理中.因此，您可以迭代此数组以监视特定的URL，如果它仍在等待处理，则返回true. 然后，您可以让一个div显示带有ng-show属性的加载栏，并监视该功能
As the name says, its an array of requests still pending. So you can iterate this array watching for an specific URL and return true if it is still pending. Then you could have a div showing a loading bar with a ng-show attribute that watches this function
我还将这个请求封装在Factory或Service中，这样我的代码将如下所示:
I would also encapsulate this requests in a Factory or Service so my code would look like this:
//Service that handles requests
angular.module('myApp')
.factory('MyService', ['$http', function($http){
var Service = {};
Service.requestingSomeURL = function(){
for (var i = http.pendingRequests.length - 1; i >= 0; i--) {
if($http.pendingRequests[i].url === ('/someURL')) return true;
}
return false;
}
return Service;
}]);
//Controller
angular.module('myApp')
.controller('MainCtrl', ['$scope', 'MyService', function($scope, MyService){
$scope.pendingRequests = function(){
return MyService.requestingSomeURL();
}
}]);
HTML就像
<div ng-show="pendingRequests()">
<div ng-include="'views/includes/loading.html'"></div>
</div>
这篇关于角度，当任何资源处于待处理状态时显示加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
