角JS加载屏幕和网页动画 [英] Angular JS loading screen and page animation

问题描述

我学习AngularJS为目前的一个项目，我的网站有大约6 - 7页。我使用的是/＃/导航计划，我想向大家介绍一个装载/请稍候屏幕而XHR请求关闭让该模板。

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.

在模板已被下载，我想调用页面转换，但我真的难倒就如何构建这个或执行它。

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?

推荐答案

您可以使用 ngCloak

To Show a loading message while AngularJs is Bootstrapped

You can use ngCloak

该ngCloak指令用于prevent的角度HTML模板
  被简单地通过浏览器在其原始（未编译）显示
  而您的应用程序加载形成。使用这个指令以避免
  不良闪烁效应造成的HTML模板显示。

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;
}

要通过一个承诺显示加载信息

我们actulaly使用一个承诺跟踪，可以让你追踪的承诺，如果他们是活跃显示一条消息，其中位于 github上

To Show a loading message via a promise

We actulaly use the a promise tracker that lets you track promises and display a message if they are active which is located on 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' });

这篇关于角JS加载屏幕和网页动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！