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 | 動的にインタラクティブなグラフィックを生成する。 |