AngularJSでロード中に評価前のマークアップを表示させない方法

  • 90
    Like
  • 0
    Comment
More than 1 year has passed since last update.

AngularJSを使ったWebアプリケーションで、ページの読込途中や初期化までの間にテンプレートのマークアップ(下記の図の{{name}}のような記述)が一瞬見えてしまうのを何とかしたい時があります。

ng-cloak1.png

特にページの表示開始を早くするためにAngularJSのコード読み込みをhead要素に置かずに非同期で読み込んでいる場合は、AngularJSの読み込み完了まで見えてしまうので特に目立ってしまいます。これを解決するためにngCloakというdirectiveがあるのでこれを使います。(headセクションでAngularJSのコード読み込みのscriptタグを配置している場合はそんなに気にならないかもしれません。公式ドキュメントではこの方法を推奨しているようです)

使い方

連携するCSSをアプリケーションのCSSに追加します

連携用CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

隠したい要素の属性にng-cloakを付けます

ng-cloak使用例
<div id="content" ng-cloak>
<h1>{{hogehoge}}</h1>
...
</div>

これだけです。

ng-cloakはbodyに付けると一箇所だけで済むので楽が出来ますが、プログレッシブレンダリングを可能にしてユーザにストレスを与えないようにするためにも、影響のある場所にのみ複数に分けて設定するほうが好ましいようです。また、IE7などの属性セレクタをサポートしないレガシーブラウザに対応したい場合は上記のディレクティブのみでは不足するため、class="ng-cloak"を追加して以下のようにすると良いようです。

レガシーブラウザ対応例
<div id="content" class="ng-cloak" ng-cloak>
<h1>{{hogehoge}}</h1>
...
</div>

動作の比較

ng-cloakの有無による違いを確かめるためのサンプルページはこちらです。サンプルとして3つのページを用意しています。これらはHello, world!を表示するサンプルとなっており、それぞれ以下のことを行っています。

  • 変数nameにworldをセット
  • $httpで非同期に取得したjsonを使って変数nameを上書き(設定されたのを分かりやすくするために上書きを500ms遅らせています)

また、3つのページの違いは以下の通りです。

no 名称 ng-cloak有無 angular.js読込方法
1 ng-cloak 500ms遅延非同期
2 no-ng-cloak(async) 500ms遅延非同期
3 no-ng-cloak(sync) 遅延なし同期

非同期のngCloak無しバージョンではマークアップが見えてしまっているのが確認できます。また、AngularJSの同期と非同期では、AngularJSの読み込み完了前にページがレンダリングされるか、読み込み完了後にレンダリングされるかの違いが確認できます。

サンプルコード

上記のサンプルコードはこちらにあります。

公式ドキュメント

AngularJS ngCloak