Angular13 Angular 模板-介绍

2024-02-25 开发教程 Angular13 匿名 7

模板语法

在 Angular 中,模板就是一块 HTML。你可以在模板中通过一种特殊的语法来使用 Angular 的诸多特性。

先决条件

在学习模板语法之前,你应该熟悉下列内容:

  • Angular 的概念
  • JavaScript
  • HTML
  • CSS

应用程序中的每个 Angular 模板都是一块 HTML,你可以将其包含在浏览器显示的页面中。 Angular 中的 HTML 模板与常规 HTML 一样,可以在浏览器中渲染视图或用户界面,但功能要多得多。

使用 Angular CLI 生成 Angular 应用时, ​app.component.html​ 文件是一个包含占位符 HTML 的默认模板。

本模板语法指南向你展示了如何通过协调类和模板之间的数据来控制 UX/UI。

大多数模板语法指南都有专门的可工作的范例应用,这些应用程序演示了每个指南中的各个主题。要查看把所有应用合在一起时的工作情况,请参阅综合Template Syntax Live Code/ 下载范例

为你的 HTML 赋能

在模板中使用 Angular 的特有语法来扩展应用程序的 HTML 词汇表。例如,Angular 可以通过内置的模板函数、变量、事件监听和数据绑定等功能来帮助你动态获取和设置 DOM(文档对象模型)中的值。

几乎所有的 HTML 语法都是有效的模板语法。但是,由于 Angular 模板只是整个网页的一部分,而不是整个网页,因此你不需要包含诸如 ​<html>​ , ​<body>​ 或 ​<base>​ 元素。这样你可以专注于正在开发的那部分页面。

为了消除脚本注入攻击的风险,Angular 不支持模板中使用 ​<script>​ 元素。Angular 会忽略 ​<script>​ 标记,并向浏览器控制台输出一条警告。