# 模板语法
在 Angular 中,模板就是一块 HTML。你可以在模板中通过一种特殊的语法来使用 Angular 的诸多特性。
# 前提条件
在学习模板语法之前,你应该熟悉下列内容:
Angular 的概念
- JavaScript
- HTML
- CSS
应用程序中的每个 Angular 模板都是一块 HTML,你可以将其包含在浏览器显示的页面中。Angular 中的 HTML 模板与常规 HTML 一样,可以在浏览器中渲染视图或用户界面,但功能要多得多。
使用 Angular CLI 生成 Angular 应用时,app.component.html
文件是一个包含占位符 HTML 的默认模板。
本模板语法指南向你展示了如何通过协调类和模板之间的数据来控制 UX/UI。
TIP
大多数模板语法指南都有专门的可工作的范例应用,这些应用程序演示了每个指南中的各个主题。要查看把所有应用合在一起时的工作情况,请参阅综合Template Syntax Live Code/ 下载范例
。
# 为你的 HTML 赋能
在模板中使用 Angular 的特有语法来扩展应用程序的 HTML 词汇表。比如,Angular 可以通过内置的模板函数、变量、事件监听和数据绑定等功能来帮助你动态获取和设置 DOM(文档对象模型)中的值。
几乎所有的 HTML 语法都是有效的模板语法。但是,由于 Angular 模板只是整个网页的一部分,而不是整个网页,因此你不需要包含诸如 <html>
,<body>
或 <base>
元素。这样你可以专注于正在开发的那部分页面。
为了消除脚本注入攻击的风险,Angular 不支持模板中使用 <script>
元素。Angular 会忽略 <script>
标记,并向浏览器控制台输出一条警告。欲知详情,参阅“安全性”页面。
# 关于模板语法的更多信息
你可能还对下列内容感兴趣:
主题 | Topics | 详情 | Details |
---|---|---|---|
插值 | 学习如何在 HTML 中使用插值和表达式。 | ||
模板语句 | 响应模板中的事件。 | ||
绑定语法 | 使用绑定来协调应用程序中的值。 | ||
property 绑定 | 设置目标元素的属性或指令中带 @Input() 装饰器的属性。 | ||
属性(Attribute),类和样式绑定 | 设置 Attribute、类和样式的值。 | ||
事件绑定 | 监听事件和 HTML。 | ||
双向绑定 | 在类及其模板之间共享数据。 | ||
内置指令 | 监听和修改 HTML 的行为和布局。 | ||
模板引用变量 | U 使用特殊变量来引用模板中的 DOM 元素。 | ||
输入和输出 | 在父级上下文和子指令或组件之间共享数据 | ||
模板表达式运算符 | 了解管道运算符 | ,以及如何防范空值 null 或 undefined。 | ||
模板中的 | 动态生成交互式图形。 |