Html Angular JS 加载屏幕和页面动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16789062/
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
Angular JS loading screen and page animation
提问by Mark
I am learning AngularJS for a current project and my site has around 6 - 7 pages. I am using the /#/ navigation scheme and I would like to introduce a loading/please wait screen while the XHR request is off getting the template.
我正在为当前项目学习 AngularJS，我的网站大约有 6 - 7 页。我正在使用 /#/ 导航方案，我想在 XHR 请求关闭获取模板时引入加载/请等待屏幕。
Once the template has been downloaded, I would like to invoke a page transition, but I am really stumped as to how to structure this or execute it.
下载模板后，我想调用页面转换，但我真的很困惑如何构建或执行它。
Can this be done simply or is there any examples that are around?
这可以简单地完成还是周围有任何例子？
回答by Mark Coleman
To Show a loading message while AngularJs is Bootstrapped
在 AngularJs 启动时显示加载消息
You can use ngCloak
您可以使用 ngCloak
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
ngCloak 指令用于防止 Angular html 模板在您的应用程序加载时以原始（未编译）形式被浏览器短暂显示。使用该指令可以避免 html 模板显示导致的不良闪烁效果。
Example CSS
示例 CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{
display: none;
}
#splash-page.ng-cloak /*<-- This has higher specificity so it can display a splash screen*/
{
display: block;
}
To Show a loading message via a promise
通过承诺显示加载消息
We actulaly use the a promise trackerthat lets you track promises and display a message if they are active which is located on github
我们实际上使用了一个承诺跟踪器，它可以让您跟踪承诺并在它们处于活动状态时显示一条位于github 上的消息
From the demo:
从演示：
<div ng-show="pizzaTracker.active()" style="background:pink;">
<h1 style="text-align: center;">
Loading Pizza
<br />{{pizzaPercent() | number:2}}%
</h1>
</div>
And to register a $httpto the promise tracker
并注册一个$http到承诺跟踪器
$http.get('flavor.json', { tracker: 'pizza' });
回答by Valeh Hajiyev
I've solved this problem by writing custom HTTP Interceptor. Here is sample code:
我通过编写自定义 HTTP 拦截器解决了这个问题。这是示例代码：
var app = angular.module('yourapp', ['loadingService']);
app.config(function ($httpProvider) {
$httpProvider.responseInterceptors.push('myHttpInterceptor');
var spinnerFunction = function (data, headers) {
$('#loading').show();
return data;
};
$httpProvider.defaults.transformRequest.push(spinnerFunction);
});
angular.module('loadingService', [],
function ($provide) {
$provide.factory('myHttpInterceptor', function ($q, $window) {
return function (promise) {
return promise.then(function (response) {
$('#loading').hide();
return response;
}, function (response) {
$('#loading').hide();
return $q.reject(response);
});
};
});
});
NOTE: There should be an element with the ID of loadingin the DOM.
注意：loadingDOM 中应该有一个 ID 为 的元素。
