关于加载 Angular 2 应用程序时要做什么的一些问题

Question

我正在使用 angular-cli 创建一个 Angular 2 应用程序。使用 ng new NEW_PROJECTNAME 创建应用程序后，我们会得到一个 index.html 页面。在这个页面中，他们有这样的东西。

...
<body>
 <app-root>Loading...</app-root>
 ...
</body>

不用说，此加载消息可能看起来完全不专业。所以我的问题是如何添加更合适的东西，比如进度条或微调器？

我意识到需要发生的事情发生在 Angular 框架之外（对吧？）。我发现了一些 Angular 2 的包非常好用（例如 Angular 2 material or the ng2-slim-loading-bar），但是这些包假设我已经进入了 Angular 框架；意思是我在一些 Angular 组件中。

所以我的问题如下。

是否有一个 Angular 2 挂钩，我可以使用它在将内容放入 <app-root></app-root> 之前显示加载指示器？
如果我必须在 Angular 框架之外工作，最好的方法是什么？天真地，我设想我必须安装一些带有 bower 或 npm 的包，在 index.html 中引用它，并使用 jQuery 或其他东西来显示加载指示器.我假设 Angular 完成加载时，它将替换 <app-root></app-root> 中的任何内容。我对这种方法的担忧之一是 building/packaging 脚本（然后我必须弄清楚如何将这个 bower/npm 包包含在我构建的应用程序中）。

感谢任何帮助。

Answer 1

最简单的方法是在应用程序 bootstrap 组件内放置一个 CSS 动画，当应用程序准备就绪时，内容将被替换。

请注意，应用程序将以不同的速度加载，具体取决于它是开发版本还是生产版本，因为脚本的缩小和更改检测只会运行一次，从而加快加载速度次。您可能需要调整动画的速度。来自应用程序的 Http 请求也可能发挥作用。

我从：http://www.alessioatzeni.com/blog/css3-loading-animation/

根组件中的

CSS 和 Html：

  <app-root>

  <style>
    #content {
      width: 100%;
      /* Full Width */
      height: 1px;
      margin: 1px auto;
      background: #000;
    }

    .expand {
      width: 100%;
      height: 1px;
      margin: 1px 0;
      background: #2187e7;
      position: absolute;
      box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);

                 /*adjust speed here */
      -moz-animation: fullexpand 1.5s ease-out;
      -webkit-animation: fullexpand 1.5s ease-out;
    }


    /* Full Width Animation Bar */

    @-moz-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
    }

    @-webkit-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
      ;
    }
  </style>

    <div id="content">
      <span class="expand">Loading...</span>
    </div>


  </app-root>

第二个选项是通过 system.js 访问 bootstrap 功能，并使其可用于 index.html.

中的脚本标签

这是 post 的博客 Ben Nadel 没有如何做到这一点。

演示：Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

(function( global ) {

    // .... code removed ....

    System.config({
        // .... code removed ....
    });

    // Load "./app/main.ts" (gets full path from package configuration above).
    // --
    // NOTE: We are attaching the resultant promise to the global scope so that other
    // scripts may listen for the successful loading of the application.
    global.bootstrapping = System
        .import( "app" )
        .then(
            function handleResolve() {

                console.info( "System.js successfully bootstrapped app." );

            },
            function handleReject( error ) {

                console.warn( "System.js could not bootstrap the app." );
                console.error( error );

                return( Promise.reject( error ) );

            }
        )
    ;

})( window );

Answer 2

我使用了 FontAwesome 和 Bootstrap 的简单方法：

  <app-root>
        <div class="text-center">
            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
            <div>Something witty</div>
        </div>
    </app-root>

Answer 3

我还没有为我们的堆栈 (Webpack) 找到任何挂钩。您可能会在每个模块的末尾附加一些任意 JavaScript 代码（如果您使用它们），这会增加一些计数器。 WebPack 的 loaders API 可以用于此。（当然只有当你使用 WebPack 时才适用。）

在我们的项目中，使用@Kaspars 的解决方案来模拟正在加载的应用程序，即视觉上相似的页面，带有徽标、微调器和一些信息，让用户在应用程序加载之前一直忙于阅读它。

关于加载 Angular 2 应用程序时要做什么的一些问题

Some questions on what to do while an Angular 2 application is loading

jquery

angular

angular-cli

angular-material2