javascript AngularJS 的初始加载微调器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25363854/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Initial loading spinner for AngularJS
提问by Cameron
I want to show a spinner on the first load of my application like: https://devart.withgoogle.com/
我想在我的应用程序的第一次加载时显示一个微调器，例如：https: //devart.withgoogle.com/
I've attempted to do this via the Services module like so:
我试图通过服务模块来做到这一点，如下所示：
angular.module('InitialLoad', [])
.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('myHttpInterceptor');
var spinnerFunction = function (data, headersGetter) {
$('#loading').fadeIn();
return data;
};
$httpProvider.defaults.transformRequest.push(spinnerFunction);
})
.factory('myHttpInterceptor', function ($q, $window) {
return function (promise) {
return promise.then(function (response) {
$('#loading').fadeOut(function(){
$(this).remove();
});
return response;
}, function (response) {
$('#loading').fadeOut(function(){
$(this).remove();
});
return $q.reject(response);
});
};
});
But there are a number of things wrong with this... first of which is that this doesn't listen for the first load it listens to EVERY request. It also doesn't show and hide the loading as elegant as the way it's been done on DevArt, and I'm using jQuery to hide and show the loading spinner instead of using Angular Animate.
但是这有很多问题......首先是它不会侦听它侦听每个请求的第一次加载。它也没有像在 DevArt 上那样优雅地显示和隐藏加载，我使用 jQuery 来隐藏和显示加载微调器，而不是使用 Angular Animate。
Can anyone help? To clarify this is for the INITIAL app load! And not for showing a spinner on subsequent requests. I use this for that: https://github.com/chieffancypants/angular-loading-barbut I want to show a splash for the app start up which is different.
任何人都可以帮忙吗？澄清这是针对初始应用程序加载的！而不是为了在后续请求中显示微调器。我为此使用它：https: //github.com/chieffancypants/angular-loading-bar但我想为应用程序启动显示一个不同的启动画面。
回答by chubbsondubs
If you want to hide your app while AngularJS loads then default your spinner to being displayed using plain HTML, and use ng-cloak to hide the angular portions of the application.
如果你想在 AngularJS 加载时隐藏你的应用程序，那么默认你的微调器使用纯 HTML 显示，并使用 ng-cloak 隐藏应用程序的角部分。
https://docs.angularjs.org/api/ng/directive/ngCloak
https://docs.angularjs.org/api/ng/directive/ngCloak
Once your app loads you can turn off the spinner using ng-hide/ng-show.
加载应用程序后，您可以使用 ng-hide/ng-show 关闭微调器。
<div ng-controller="TopController">
<div class="spinner" ng-hide="appLoaded"/>
<div ng-cloak ng-view>
... All Angular view giblets go here...
</div>
</div>
Here is a working example:
这是一个工作示例：
回答by chubbsondubs
I wouldn't try to do this with an interceptor. It's easy enough to do this with a Controller:
我不会尝试用拦截器来做到这一点。使用控制器很容易做到这一点：
app.controller("TopController", [ "$scope", "SomeService", function($scope, SomeService) {
$scope.showAppLoader = false;
$scope.loadApp = function() {
$scope.showAppLoader = true;
SomeService.doSomething().success( function(result) {
$scope.showAppLoader = false;
});
};
$scope.loadApp();
}]);
Then the view:
然后视图：
<div ng-controller="TopController">
<div class="spinner" ng-show="showAppLoader"></div>
<div ng-hide="showAppLoader" ng-view"></div>
</div>
The rest of this is just an exercise in CSS.
剩下的只是一个 CSS 练习。
