javascript - Angular JS加载屏幕和页面动画

Question

我正在为当前项目学习 AngularJS，我的网站大约有 6 - 7 页。我正在使用/#/导航方案，我想在 XHR 请求关闭获取模板时引入加载/请等待屏幕。

下载模板后，我想调用页面转换，但我真的不知道如何构造或执行它。

这可以简单地完成还是有任何例子？

Answer 1

在引导 AngularJs 时显示加载消息

您可以使用 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.

示例 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 tracker它可以让你跟踪 promise 并在它们处于事件状态时显示一条消息，位于 github 上

来自演示:

  <div ng-show="pizzaTracker.active()" style="background:pink;">
    <h1 style="text-align: center;">
      Loading Pizza
      <br />{{pizzaPercent() | number:2}}%
    </h1>
  </div>

并向 promise 跟踪器注册一个$http

$http.get('flavor.json', { tracker: 'pizza' });