概要 • Angular 日本語版

TIP: この包括的なガイドに進む前に、Angularの基本概念をご覧ください。

すべてのAngularコンポーネントには、コンポーネントがページにレンダリングするDOMを定義するテンプレートがあります。テンプレートを使用することで、Angularはデータが変化してもページを自動的に最新の状態に保つことができます。

テンプレートは通常、*.component.tsファイルのtemplateプロパティまたは*.component.htmlファイル内にあります。詳細については、コンポーネントに関する詳細なガイドをご覧ください。

テンプレートはどのように動作しますか？

テンプレートは、HTML構文に基づいており、組み込みのテンプレート関数、データバインディング、イベントリスニング、変数など、追加の機能が備わっています。

AngularはテンプレートをJavaScriptにコンパイルして、アプリケーションの内部的な理解を構築します。これにより、Angularがアプリケーションに自動的に適用する組み込みのレンダリング最適化が実現されます。

テンプレートと標準HTML構文の違いには、次のようなものがあります。

テンプレートソースコード内のコメントは、レンダリングされた出力に含まれません。
コンポーネントとディレクティブの要素は、自己クローズできます（例：<UserProfile />）。
特定の文字（[]、()など）を持つ属性は、Angularにとって特別な意味を持ちます。詳細については、バインディングドキュメントとイベントリスナーの追加に関するドキュメントをご覧ください。
@文字は、制御フローなどのテンプレートに動的な動作を追加するためのAngularにとって特別な意味を持ちます。リテラルの@文字を含めるには、HTMLエンティティコード（&commat;または@）としてエスケープします。
Angularは不要な空白文字を無視して折り畳みます。詳細については、テンプレート内の空白をご覧ください。
Angularは、動的コンテンツのプレースホルダーとしてコメントノードをページに追加する場合がありますが、開発者はこれらを無視できます。

さらに、ほとんどのHTML構文は有効なテンプレート構文ですが、Angularはテンプレート内の<script>要素をサポートしていません。詳細については、セキュリティページをご覧ください。

以下のトピックにも興味があるかもしれません。

トピック	詳細
動的なテキスト、プロパティ、属性のバインディング	動的なデータをテキスト、プロパティ、属性にバインドします。
イベントリスナーの追加	テンプレート内でイベントに応答します。
双方向バインディング	値を同時にバインドし、変更を伝播します。
制御フロー	要素の表示、非表示、繰り返しを条件付きで行います。
パイプ	データを宣言的に変換します。
ng-contentによる子コンテンツのスロット化	コンポーネントがコンテンツをレンダリングする方法を制御します。
ng-templateによるテンプレートフラグメントの作成	テンプレートフラグメントを宣言します。
ng-containerによる要素のグループ化	複数の要素をグループ化するか、レンダリングする場所をマークします。
テンプレート内の変数	変数の宣言について学びます。
@deferによる遅延読み込み	`@defer`を使用して遅延可能ビューを作成します。
式構文	Angular式と標準JavaScriptの違いについて学びます。
テンプレート内の空白	Angularが空白をどのように処理するかについて学びます。