AngularJSアプリケーション開発ガイド

16

2

章 

AngularJS

アプリケーションの構造

きます。パフォーマンス向上のためには、初期表示のビューで必要になるデータは

HTML

のテン

プレートとともに取得できるようにし、リクエストが複数回発生するのを防ぐべきです。

AngularJS

を使ってアプリケーションを構成すると、テンプレートとデータを切り離して配置

できます。その結果、テンプレートをキャッシュできるようになります。初回の読み込み以降は、

新しいデータを読み込むだけで済みます。

JavaScript

や画像あるいは

CSS

といったリソースと同

じように、テンプレートもキャッシュすればパフォーマンスの向上を見込めます。

2.3.1

 文字列の表示

ng-bind

ディレクティブを使うと、

UI

上に文字列を表示（あるいは更新）できます。これには別

の記法もあります。それは、これまでにも見てきた

{{ }}

です。

<p>{{greeting}}</p>

次のように、属性として

ng-bind

ディレクティブを記述しても同じ効果を得られます。

<p ng-bind="greeting"></p>

モデルの変数

greeting

に「こんにちは」という値がセットされている場合、以下のような

HTML

が生成されます。

<p>

こんにちは

</p>

そしてブラウザ上に「こんにちは」と表示されます。

これら

2

つの記法はどのように使い分けるのでしょうか。

{{ }}

は読みやすく、タイピングの手

間も省けます。出力される

HTML

は同じですが、

{{ }}

を使う場合は

index.html

の初