我正在为一个当前项目学习 AngularJS,我的网站大约有 6-7 页。我正在使用 /#/ 导航方案,我想在 XHR 请求关闭获取模板时引入加载/请等待屏幕。
下载模板后,我想调用页面转换,但对于如何构建或执行它,我真的很困惑。
这可以简单地完成还是周围有任何例子?
我正在为一个当前项目学习 AngularJS,我的网站大约有 6-7 页。我正在使用 /#/ 导航方案,我想在 XHR 请求关闭获取模板时引入加载/请等待屏幕。
下载模板后,我想调用页面转换,但对于如何构建或执行它,我真的很困惑。
这可以简单地完成还是周围有任何例子?
您可以使用ngCloak
ngCloak 指令用于防止 Angular html 模板在加载应用程序时被浏览器以原始(未编译)形式短暂显示。使用该指令可以避免 html 模板显示引起的不良闪烁效果。
示例 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;
}
我们实际上使用了一个 Promise跟踪器,它可以让您跟踪 Promise 并在它们处于活动状态时显示一条消息,该消息位于github
从演示:
<div ng-show="pizzaTracker.active()" style="background:pink;">
<h1 style="text-align: center;">
Loading Pizza
<br />{{pizzaPercent() | number:2}}%
</h1>
</div>
$http
并向承诺跟踪器注册一个
$http.get('flavor.json', { tracker: 'pizza' });
我通过编写自定义 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);
});
};
});
});
注意loading
:在 DOM 中应该有一个 ID 为的元素。