Angular HTML模板定義了頁面在web應用程序中的布局方式，HTML模板開發對任何應用程序都至關重要。在CodeMix或MyEclipse中使用Angular HTML模板的支持可實現以下效果：

• 自定義Angular屬性內的驗證
• 檢測錯誤的角度元素標簽
• 自動完成HTML元素
• 自動完成模板中的TypeScript表達式

本文詳細介紹Angular HTML模板可提供的功能。

  優惠購買MyEclipse

搭建基礎

Angular HTML模板提供了一種結構化的方式，可將Angular組件公開的數據綁定到最終用戶。例如，本示例顯示了使用特定控件制作下拉日歷。與其他任何輸入表單控件一樣，它可以呈現UI并提供支持邏輯。

<dd-calendar dd-height=”400px” dd-width=”600px”
      [dataset]=”calData.EVENTS”
      (selection)=”onSelection($event)”>
</dd-calendar>

• [數據集]-提供綁定到組件的數據。
• （選擇）-提供從組件返回到這個類的輸出。

<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>

在這個示例中，標題和副標題的值來自Angular組件。因為這些值是綁定的，所以更新組件內部的標題將立即更新UI中的值。

優惠購買CodeMix CodeMix安裝教程

Angular模板的自動驗證
當使用Angular HTML模板時，Angular IDE將在開發過程中提供對模板的自動驗證。保存后，Angular IDE會確認模板的語法和語義完整性，并在編輯器中顯示檢測到的所有文件。此外，Angular IDE將對項目中的所有文件提供此驗證，以幫助檢測尚未在編輯器或運行時看到的問題。
驗證有多種類型，但分為兩大類。語法和語義驗證如下所述。驗證是在嵌入式模板和外部模板上執行的。
語法驗證
語法驗證的核心職責是檢查正在開發的模板的完整性。Angular IDE將檢測缺少的結構元素，例如缺少的</div>標記，并驗證自定義<app-style元素具有預期的輸入或輸出字段。語法驗證甚至可以確認指令為Angular啟用的擴展結構提供了必要的自定義標簽。

• 錯誤的HTML結構和語法
• 使用的未知標簽或組件
• 未知的輸入/輸出綁定或屬性
• 無效的表達式語法

開發Angular HTML模板時最常見的錯誤包括暴露和使用的字段之間的不一致，以及表達式中的錯別字。通過針對相應的TypeScript類驗證表達式和代碼結構，語義驗證有助于快速檢測這些問題。
經過語義驗證的完整代碼塊列表包括：

• 在{{}}塊內使用的表達式
• 在ngFor等屬性中使用的語義結構
• 綁定表達式

• 缺少通過templateUrl引用的文件
• 模板和templateUrl屬性同時存在或都不存在
• 不鼓勵使用絕對模板路徑
• 如果模板屬性包含現有文件名，建議將模板屬性更改為templateUrl

2、組件存在于多個模塊中或不存在于任何模塊中

@Component聲明的語義驗證不僅有助于確保正在開發的模板定義良好，還有助于確保相應的TypeScript組件在運行時正確使用模板。

Angular HTML模板的代碼補全功能
除驗證外，Angular IDE還在Angular HTML模板中包含了代碼補全功能。