Понимание шаблонов¶
11.05.2022
В Angular шаблон — это чертеж фрагмента пользовательского интерфейса (UI). Шаблоны пишутся на HTML, и в шаблоне можно использовать специальный синтаксис, чтобы использовать многие возможности Angular.
Предварительные условия
Прежде чем изучать синтаксис шаблонов, вы должны быть знакомы со следующим:
- Концепции Angular
- JavaScript
- HTML
- CSS
Расширение HTML¶
Angular расширяет синтаксис HTML в ваших шаблонах с помощью дополнительных функций. Например, синтаксис привязки данных Angular помогает динамически устанавливать свойства Document Object Model (DOM).
Почти весь синтаксис HTML является допустимым синтаксисом шаблона. Однако, поскольку шаблон Angular — это только фрагмент пользовательского интерфейса, он не включает такие элементы, как <html>
, <body>
или <base>
.
Чтобы исключить риск атак внедрения сценариев, Angular не поддерживает элемент <script>
в шаблонах. Angular игнорирует тег <script>
и выводит предупреждение в консоль браузера. Для получения дополнительной информации см. страницу Security.
Подробнее о синтаксисе шаблонов¶
Возможно, вас также заинтересует следующее:
-
Интерполяция
Узнайте, как использовать интерполяцию и выражения в HTML.
-
Привязка свойств
Установка свойств целевых элементов или декораторов директив
@Input()
. -
Привязка атрибутов
Установите значение атрибутов.
-
Привязка к классу и стилю
Установите значение класса и стиля.
-
Связывание событий
Слушайте события и ваш HTML.
-
Ссылочные переменные шаблона
Используйте специальные переменные для ссылки на элемент DOM в шаблоне.
-
Встроенные директивы
Слушать и изменять поведение и компоновку HTML.
-
Inputs и Outputs
Обмен данными между родительским контекстом и дочерними директивами или компонентами.