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

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

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

  優(yōu)惠購買MyEclipse

搭建基礎(chǔ)

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

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

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

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

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

優(yōu)惠購買CodeMix CodeMix安裝教程

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

• 錯誤的HTML結(jié)構(gòu)和語法
• 使用的未知標簽或組件
• 未知的輸入/輸出綁定或?qū)傩?
• 無效的表達式語法

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

• 在{{}}塊內(nèi)使用的表達式
• 在ngFor等屬性中使用的語義結(jié)構(gòu)
• 綁定表達式

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

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

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

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