Angular HTML 模板定义页面在 Web 应用程序中的布局。我们对Angular HTML 模板的支持包括验证和代码智能补全。
本篇文章只是个启蒙,写的很浅显,如果要上手angular开发,还是需要关注https://angular.cn/ 毕竟是官方指定教程,CodeMix呢是一个可以面向多种框架开发的IDE,无论是Angular还是Vue,因为不知道未来你还会开发什么框架,因此推荐用这一个就够啦,点击查看详情。
设置模板
Angular HTML 模板提供了一种结构化的绑定数据的方式,由组件向最终用户公开。例如,此示例显示使用特定控件制作下拉日历。把它像任何其他输入窗体控件一样,因为它将呈现 UI 并提供支持逻辑。
<dd-calendar dd-height=”400px” dd-width=”600px”
[dataset]=”calData.EVENTS”
(selection)=”onSelection($event)”>
</dd-calendar>
在此示例中,在当前组件上定义了 .Angular HTML 模板中有多种不同的构造,但最常见的是输入和输出:calDataEVENTSdd-calendar
- [dataset] = 向组件提供绑定数据。
- (selection) = 提供从组件输出回此类。
除了在组件中和组件外提供信息外,模板还允许在 HTML 块内使用表达式,例如:
<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>
在此示例中,标题和副标题值将来自Angular组件。因为是绑定,因此更新组件内的标题将立即导致在 UI 中更新值。
Angular模板的自动验证
使用 HTML 模板时,Angular IDE 将在开发中自动验证模板。保存后,IDE 确认模板的语法和语义完整性,并在编辑器中显示检测到的任何文件。此外,IDE 将在项目的所有文件上提供此验证,帮助检测编辑器中或运行时未看到的问题。
验证有多种类型,但分为两个主要类别。语法和语义验证,如下所述。验证在内联和外部模板上执行。
语法验证
语法验证的核心职责是检查正在开发中的模板的完整性。Angular IDE 将检测缺少的结构元素,如缺少的 </div> 标记,并验证自定义 <app-style 元素是否具有预期的输入或输出字段。语法验证甚至确认指令为 Angular 启用的扩展构造提供了必要的自定义标记。
通过语法验证的构造的完整列表包括:
- 不正确的 HTML 结构和语法
- 使用的未知标记或组件
- 未知输入/输出绑定或属性
- 表达式的无效语法
语义验证
语义验证的责任是解释 HTML 模板文件中的表达式和其他复杂结构。表达式是运行良好的模板的关键,为从 for 循环到动态绑定的所有内容提供了功能。
开发Angular HTML 模板时最常见的错误包括公开和使用的字段之间的不一致,以及表达式中的拼写错误。语义验证通过根据相应的 TypeScript 类验证表达式和代码构造,帮助快速检测这些问题。
语义上验证的代码块的完整列表包括:
- 在{{ }} 块内使用的表达式
- 在属性(如 ngFor)中使用的语义结构
- 绑定表达式
除了模板验证之外,语义验证还将确保内联和独立 HTML 模板的完整性,并检查使用模板的声明的一致性。@Component
在注释上检测到@Component错误
- Template 和templateUrl属性验证:=通过templateUrl
引用的缺少文件 = 模板属性和templateUrl属性都不存在
或不存在 = 绝对模板路径的劝阻
性使用 = 如果模板属性包含现有文件名,则建议将其更改为templateUrl - 组件存在于多个模块中或未存在于任何模块中
声明的这种语义验证有助于确保不仅所开发的模板定义良好,而且由相应的 TypeScript 组件在运行时正确使用。@Component
Angular HTML 模板的代码完成
除了验证之外,Angular IDE 还包括Angular HTML 模板中的代码完成。