範本語法
Template syntax
在 Angular 中，範本就是一塊 HTML。在範本中，你可以透過一種特殊語法來使用 Angular 的許多功能。
In Angular, a template is a chunk of HTML. Within a template, you can use special syntax to leverage many of Angular's features.
先決條件
Prerequisites
在學習範本語法之前，你應該熟悉下列內容：
Before learning template syntax, you should be familiar with the following:
JavaScript
HTML
CSS
應用程式中的每個 Angular 範本都是一塊 HTML，你可以將其包含在瀏覽器顯示的頁面中。 Angular 中的 HTML 範本與常規 HTML 一樣，可以在瀏覽器中渲染檢視或使用者介面，但功能要多得多。
Each Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays. An Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
使用 Angular CLI 產生 Angular 應用時， app.component.html 檔案是一個包含佔位符 HTML 的預設範本。
When you generate an Angular app with the Angular CLI, the app.component.html file is the default template containing placeholder HTML.
本範本語法指南向你展示了如何透過協調類別和範本之間的資料來控制 UX/UI。
The template syntax guides show you how you can control the UX/UI by coordinating data between the class and the template.
大多數範本語法指南都有專門的可工作的範例應用，這些應用程式示範了每個指南中的各個主題。要檢視把所有應用合在一起時的工作情況，請參閱綜合
Most of the Template Syntax guides have dedicated working example apps that demonstrate the individual topic of each guide. To see all of them working together in one app, see the comprehensive
增強你的 HTML
Empower your HTML
透過在範本中使用 Angular 的特有語法，你可以擴充套件應用程式的 HTML 詞彙表。例如，Angular 可以透過內建的範本函式、變數、事件監聽和資料繫結等功能來幫助你動態獲取和設定 DOM（文件物件模型）中的值。
With special Angular syntax in your templates, you can extend the HTML vocabulary of your apps. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
幾乎所有的 HTML 語法都是有效的範本語法。但是，由於 Angular 範本只是整個網頁的一部分，而不是整個網頁，因此你不需要包含諸如 <html> ， <body> 或 <base> 元素。這樣你可以專注於正在開發的那部分頁面。
Almost all HTML syntax is valid template syntax. However, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as <html>, <body>, or <base>. You can focus exclusively on the part of the page you are developing.
為了消除指令碼注入攻擊的風險，Angular 不支援範本中使用 <script> 元素。Angular 會忽略 <script> 標記，並向瀏覽器控制檯輸出一條警告。欲知詳情，參閱“安全性”頁面。
To eliminate the risk of script injection attacks, Angular does not support the <script> element in templates. Angular ignores the <script> tag and outputs a warning to the browser console. For more information, see the Security page.
關於範本語法的更多資訊
More on template syntax
你可能也對以下內容感興趣：
You may also be interested in the following:
插值 - 學習如何在 HTML 中使用插值和表示式。
Interpolation—learn how to use interpolation and expressions in HTML.
範本語句 - 響應範本中的事件。
Template statements—respond to events in your templates.
繫結語法 - 使用繫結來協調應用程式中的值。
Binding syntax—use binding to coordinate values in your app.
屬性繫結 - 設定目標元素的屬性或指令中帶
@Input()裝飾器的屬性。Property binding—set properties of target elements or directive
@Input()decorators.屬性（Attribute），類別和樣式繫結 - 設定屬性、類別和樣式的值。
Attribute, class, and style bindings—set the value of attributes, classes, and styles.
事件繫結 - 監聽事件和 HTML。
Event binding—listen for events and your HTML.
雙向繫結 - 在類別及其範本之間共享資料。
Two-way binding—share data between a class and its template.
內建指令 - 監聽和修改 HTML 的行為和佈局。
Built-in directives—listen to and modify the behavior and layout of HTML.
範本參考變數 - 使用特殊變數來參考範本中的 DOM 元素。
Template reference variables—use special variables to reference a DOM element within a template.
輸入和輸出 - 在父級上下文和子指令或元件之間共享資料
Inputs and Outputs—share data between the parent context and child directives or components
範本表示式運算子 - 瞭解管道運算子
|，以及如何防範空值null或undefined。Template expression operators—learn about the pipe operator,
|, and protect againstnullorundefinedvalues in your HTML.範本中的 SVG - 動態產生互動式圖形。
SVG in templates—dynamically generate interactive graphics.
