web-dev-qa-db-ja.com

クラスのスタイルなしコンテンツのフラッシュを防ぐAngularJS戦略

AngularJSプロジェクトがあります。クラス名でページをロードする際にFOUCを防ぎたいです。 ng-templateについて読んだことがありますが、これはタグ内のコンテンツにのみ役立つようです。

<body class="{{ bodyClass }}">

ページの読み込み時に「ログイン」したいです。このための戦略はありますか？または、私はそれを単に「ログイン」としてロードし、手動でjavascriptを使用してこのインスタンスのためだけにDOMを微調整する必要がありますか？.

javascriptdomangularjsinterpolationfouc
54
Casey Flynn

探しているのはng-cloak。
次のように追加する必要があります。

<body class="{{ bodyClass }}" ng-cloak>

これにより、不要なフラッシュが防止されます。
これに関するドキュメントへのリンク。

編集：
ドキュメントによると、以下のスニペットをCSSファイルに挿入することをお勧めします。

「最良の結果を得るには、htmlドキュメントのheadセクションにangular.jsスクリプトをロードする必要があります。あるいは、上記のcssルールをアプリケーションの外部スタイルシートに含める必要があります。」

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}
78
the-lay

直面している問題の1つは、AngularJSが読み込まれてDOMの操作を開始する前に、ブラウザーが<body>要素を表示することです。 ng-classについて他の人が言ったことは正しいです。正しいクラスを適用しますが、Angularの準備が整う前に何も表示しないでください。

以前のバージョンのAngularでは、これを行うことができました。

<body style="display:none" ng-show="true" ng-class="{{bodyClass}}">

ただし、最近のバージョンでは、ng-showがng-hideクラスを追加および削除することで可視性を実現するため、これは機能しません（要素属性ほど具体的ではありません）

私が最近やっていることはこれです：

<head>
...
    <style> <!-- Or you could include this in an existing style sheet -->
        .ng-cloak {
            display: none !important;
        }
    </style>    
</head>
<body class="ng-cloak" ng-cloak ng-class="{{bodyClass}}">

このようにすると、<body>はng-cloakクラスのスタイルによってすぐに非表示になります。 Angularが起動すると、ng-classおよびng-cloakを含むすべてのディレクティブが処理されるため、<body>要素は適切なクラスを持ち、見える。

詳細はこちら ng-cloak directive

23
Nicholas Green

プレーンなCSSのフラッシュの問題に対する解決策があり、これは防弾です。アプリのルート要素のクラスには、次を追加します。このソリューションは、処理の順序で機能します。すべてがCSSに隠され、angularがロードされ、CSSがアプリのルートを表示します。彼らが最初にレンダリングするページは、ページがより速くロードされるように見えます。

/* in your CSS file in head */
.myApp {
    display:none;
}

<div class="myApp" ng-app="myApp"></div>

本文が終了する直前に、スクリプト参照といくつかのインラインCSSを追加します。

<script language="javascript" type="text/javascript" src="angular.min.js"></script>
<style>
.myApp {
    display:block;
}
</style>
</body>
6
mbokil

クラスを使用する代わりに、ng-classを使用する必要があります

<body ng-class="{{ bodyClass }}">
3
Alex G

Ng-cloakでさえ実際に機能しないように見えることがあります。たぶん私は何か間違ったことをしている。

<body ng-cloak class="{{ bodyClass }}">

また、デフォルトで要素を非表示にできる@mbokilに似たもう1つの小さなことを行います。属性ng-cloakを持つ要素を対象とする属性セレクターを使用することで、angularディレクティブを使用できます。これにはいくつかの利点がありますが、主な利点は1回angular起動すると、再描画をトリガーするこの属性を削除します。

<style>
  [ng-cloak] {
    display:none;
  }
</style>
1
Jeff Richardson