概要 • Angular 日本語版

Tip: この包括的なガイドに進む前に、Angularの基本概念を確認してください。

アプリケーション内の各Angularテンプレートは、ブラウザに表示されるページの一部として含めるHTMLセクションです。 Angular HTMLテンプレートは通常のHTMLと同様に、ブラウザでビュー、つまりユーザーインターフェースをレンダリングしますが、はるかに多くの機能を備えています。

Angular CLIを使用してAngularアプリケーションを生成すると、app.component.html ファイルは、プレースホルダーのHTMLを含むデフォルトのテンプレートになります。

テンプレート構文ガイドでは、クラスとテンプレート間のデータを調整することで、UX/UIを制御する方法を示します。

HTMLを強化する

テンプレート内で特別なAngular構文を使用して、アプリケーションのHTMLボキャブラリを拡張します。たとえば、Angularは、組み込みのテンプレート関数、変数、イベントリスニング、データバインディングなどの機能を使用して、DOM (Document Object Model) の値を動的に取得および設定するのに役立ちます。

ほぼすべてのHTML構文は有効なテンプレート構文です。ただし、Angularテンプレートは、全体的なWebページの一部であり、ページ全体ではないため、<html>、<body>、または <base> などの要素を含める必要はありません。開発中のページの特定の部分に集中できます。

IMPORTANT: スクリプトインジェクション攻撃のリスクを排除するために、Angularはテンプレートでの <script> 要素をサポートしていません。 Angularは <script> タグを無視し、ブラウザコンソールに警告を出力します。詳細については、セキュリティページを参照してください。

テンプレート構文についてさらに詳しく

次の項目にも興味があるかもしれません。

トピック	詳細
補間	HTML で補間と式を使用する方法を学ぶ。
テンプレートステートメント	テンプレートでイベントに応答する。
バインディング構文	バインディングを使用してアプリケーション内の値を調整する。
プロパティバインディング	ターゲット要素のプロパティまたはディレクティブ `@Input()` デコレーターを設定する。
属性、クラス、スタイルバインディング	属性、クラス、スタイルの値を設定する。
イベントバインディング	HTML でイベントをリスンする。
双方向バインディング	クラスとそのテンプレート間でデータを共有する。
制御フロー	要素を条件付きで表示、非表示、繰り返しするための Angular の構文。
ローカルテンプレート変数	テンプレート内で変数を定義して再利用する。
組み込みディレクティブ	HTML の動作とレイアウトをリスンして変更する。
テンプレート参照変数	特殊な変数を使用して、テンプレート内の DOM 要素を参照する。
入力	入力プロパティを使用してデータを受け入れる。
出力	出力を使用してカスタムイベントを発生させる。
テンプレート内のSVG	動的にインタラクティブなグラフィックを生成する。