Angular，当任何资源处于挂起状态时显示加载 [英] Angular, show loading when any resource is in pending
问题描述
我已经编写了一个代码来显示加载器 div，当任何资源处于挂起状态时，无论它是通过 $http.get 还是通过路由\ng-view 获取.如果我变坏了，我不仅需要信息...
flowHandler 服务:
app.service('flowHandler', function(){无功计数 = 0;this.init = function() { count++ };this.end = function() { 计数-- };this.take = function() { 返回计数 };});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();});更新加载器 = 函数 () {$scope.$apply(function(){$scope.loader = flowHandler.take();});};setInterval(updateLoader, 100);});通过 $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 服务，并初始化或结束了一个流.
这是个好主意还是太糟糕了?
有什么建议吗?你是怎么做到的?
建议你看看$http的pendingRequest属性
https://docs.angularjs.org/api/ng/service/$http
顾名思义，它是一个仍在等待处理的请求数组.所以你可以迭代这个数组来观察一个特定的 URL，如果它仍然未决，则返回 true.然后你可以有一个 div 显示一个带有 ng-show 属性的加载栏，用于监视这个函数
我还会将此请求封装在工厂或服务中，因此我的代码如下所示:
//处理请求的服务angular.module('myApp').factory('MyService', ['$http', function($http){var 服务 = {};Service.requestingSomeURL = function(){for (var i = http.pendingRequests.length - 1; i >= 0; i--) {if($http.pendingRequests[i].url === ('/someURL')) 返回真；}返回假；}退货服务；}]);//控制器angular.module('myApp').controller('MainCtrl', ['$scope', 'MyService', function($scope, MyService){$scope.pendingRequests = function(){返回 MyService.requestingSomeURL();}}]);HTML 应该是这样的
<div ng-include="'views/includes/loading.html'"></div>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 service:
app.service('flowHandler', function(){
var count = 0;
this.init = function() { count++ };
this.end = function() { count-- };
this.take = function() { return count };
});
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);
});
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();});
});
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 ?
I suggest you to take a look at $http's pendingRequest propertie
https://docs.angularjs.org/api/ng/service/$http
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
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();
}
}]);
And the HTML would be like
<div ng-show="pendingRequests()">
<div ng-include="'views/includes/loading.html'"></div>
</div>
这篇关于Angular，当任何资源处于挂起状态时显示加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
