解读MyEclipse、CodeMix中Angular HTML模板支持的自动验证和代码补全功能

翻译|其它|编辑:陈津勇|2019-12-31 16:03:45.600|阅读 119 次

概述:Angular HTML模板定义了页面在web应用程序中的布局方式。本文主要介绍了MyEclipse、CodeMix中Angular HTML模板支持的功能。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

Angular HTML模板定义了页面在web应用程序中的布局方式,HTML模板开发对任何应用程序都至关重要。在CodeMix或MyEclipse中使用Angular HTML模板的支持可实现以下效果:

  • 自定义Angular属性内的验证
  • 检测错误的角度元素标签
  • 自动完成HTML元素
  • 自动完成模板中的TypeScript表达式

本文详细介绍Angular HTML模板可提供的功能。

免费下载MyEclipse  优惠购买MyEclipse


搭建基

Angular HTML板提供了一种结构化的方式,可将Angular组件公开的数据绑定到最终用户。例如,本示例显示了使用特定控件制作下拉日历。与其他任何输入表单控件一样,它可以呈现UI并提供支持逻辑。

<dd-calendar dd-height=”400px” dd-width=”600px”
      [dataset]=”calData.EVENTS”
      (selection)=”onSelection($event)”>
</dd-calendar>
在本例中calData是在当前组件上定义的,并将事件数据传递到dd-calendar小部件中。Angular HTML模板中有多种不同的结构,但最常见的是输入和输出:
  • [数据集]-提供绑定到组件的数据。
  • (选择)-提供从组件返回到这个类的输出。
除了在组件内部和外部提供信息外,模板还允许在HTML块内使用表达式,例如:
<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结构和语法
  • 使用的未知标签或组件
  • 未知的输入/输出绑定或属性
  • 无效的表达式语法
语义验
语义验证的职责是解释HTML模板文件中的表达式和其他复杂结构。表达式是功能良好的模板的关键,提供了从for循环到动态绑定的所有功能。

开发Angular HTML模板时最常见的错误包括暴露和使用的字段之间的不一致,以及表达式中的错别字。通过针对相应的TypeScript类验证表达式和代码结构,语义验证有助于快速检测这些问题。
经过语义验证的完整代码块列表包括:

  • 在{{}}块内使用的表达式
  • 在ngFor等属性中使用的语义结构
  • 绑定表达式
除了模板验证外,语义验证还将确保内联和独立HTML模板的完整性,并检查使用模板的@Component声明的一致性。
在@Component注释上检测到错误
1、模板和templateUrl属性验证:
  • 缺少通过templateUrl引用的文件
  • 模板和templateUrl属性同时存在或都不存在
  • 不鼓励使用绝对模板路径
  • 如果模板属性包含现有文件名,建议将模板属性更改为templateUrl

2、组件存在于多个模块中或不存在于任何模块中

@Component声明的语义验证不仅有助于确保正在开发的模板定义良好,还有助于确保相应的TypeScript组件在运行时正确使用模板。

Angular HTML模板的代码补全功能
除验证外,Angular IDE还在Angular HTML模板中包含了代码补全功能。



想进一步了解MyEclipse/CodeMix?【MyEclipse官方中文网】知你所需,解你所惑!
想与更多人聊MyEclipse/CodeMix?加入MyEclipse中国(官方2):742336981畅所欲言吧!
想及时获取MyEclipse/CodeMix资讯?扫描下方二维码,最新信息跟你走!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Genuitec https://www.genuitec.com/docs/web-apps/modern-web/working-angular-html-templates/

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
MyEclipse

功能最全面、性价比最高的Java IDE之一

CodeMix

CodeMix基于Eclipse的IDE开发多语言和Code OSS构建的附加扩展。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat