6

を使用しangular-cliて Angular 2 アプリケーションを作成しています。アプリケーションが で作成された後、ページng new NEW_PROJECTNAMEを取得しindex.htmlます。このページには、このようなものがあります。

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

言うまでもなく、この読み込みメッセージは完全に専門家らしくないように見えるかもしれません. だから私の質問は、プログレスバーやスピナーのようなより適切なものを追加するにはどうすればよいですか?

私は、Angular フレームワークの外側で何が起こる必要があるかを認識しています (そうですか?)。非常に使いやすい Angular 2 パッケージ (例: Angular 2 マテリアルまたはng2-slim-loading-bar ) をいくつか見つけましたが、これらのパッケージは、既に Angular フレームワークに入っていることを前提としています。つまり、Angular コンポーネントの中にいるということです。

だから私の質問は次のとおりです。

  • コンテンツが配置される前に読み込みインジケーターを表示するために使用できる Angular 2 フックはあり<app-root></app-root>ますか?
  • Angular フレームワークの外で作業する必要がある場合、最善のアプローチは何でしょうか? 単純に、 or を使用してパッケージをインストールし、それを で参照し、bowerorを使用して読み込みインジケーターを表示する必要があると思います。Angular の読み込みが完了するまでに、内部にあるものはすべて置き換えられると思います。このアプローチに関する私の懸念の 1 つは、ビルド/パッケージ化スクリプトです (ビルドしたアプリケーションにこの bower/npm パッケージを含める方法を考え出す必要があります)。npmindex.htmljQuery<app-root></app-root>

どんな助けでも大歓迎です。

4

3 に答える 3

3

最も簡単な方法は、コンテンツが置き換えられるアプリの準備ができたときに、アプリのブートストラップ コンポーネント内に CSS アニメーションを配置することです。

スクリプトが縮小され、変更検出が 1 回だけ実行されるため、開発ビルドか運用ビルドかによって、アプリの読み込み速度が異なることに注意してください。これにより、読み込み時間が短縮されます。アニメーションの速度を調整する必要がある場合があります。アプリからの 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>

bootstrap2 番目のオプションは、機能トラフにアクセスしてsystem.js、スクリプト タグで使用できるようにすることですindex.html。

これはBen Nadelによるブログ投稿です。

デモ: 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 );
于 2016-07-15T08:21:08.223 に答える
0

私は、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>
于 2016-11-26T01:01:51.550 に答える