Перейти к содержанию

Синтаксис шаблонов

В Angular шаблон — это фрагмент HTML. Используйте специальный синтаксис в шаблоне, чтобы использовать многие возможности Angular.

Предварительные условия

Прежде чем изучать синтаксис шаблонов, вы должны быть знакомы со следующим:

Каждый шаблон Angular в вашем приложении — это раздел HTML для включения в состав страницы, которую отображает браузер. Шаблон Angular HTML отображает представление или пользовательский интерфейс в браузере, как и обычный HTML, но с гораздо большей функциональностью.

Когда вы создаете приложение Angular с помощью Angular CLI, файл app.component.html является шаблоном по умолчанию, содержащим заполнитель HTML.

Руководства по синтаксису шаблонов показывают, как управлять UX/UI путем координации данных между классом и шаблоном.

В большинстве руководств по синтаксису шаблонов есть специальные рабочие примеры приложений, которые демонстрируют отдельные темы каждого руководства. Чтобы увидеть, как все они работают вместе в одном приложении, смотрите полный пример.

Расширьте возможности вашего HTML

Расширьте словарь HTML ваших приложений с помощью специального синтаксиса Angular в ваших шаблонах. Например, Angular помогает вам динамически получать и устанавливать значения DOM (Document Object Model) с помощью таких функций, как встроенные функции шаблонов, переменные, прослушивание событий и привязка данных.

Почти весь синтаксис HTML является допустимым синтаксисом шаблона. Однако, поскольку шаблон Angular является частью общей веб-страницы, а не всей страницей, вам не нужно включать такие элементы, как <html>, <body> или <base>, а можно сосредоточиться исключительно на той части страницы, которую вы разрабатываете.

Чтобы исключить риск атак внедрения сценариев, Angular не поддерживает элемент <script> в шаблонах. Angular игнорирует тег <script> и выводит предупреждение в консоль браузера.

Для получения дополнительной информации см. страницу Security.

Подробнее о синтаксисе шаблонов

Возможно, вас также заинтересует следующее:

Темы Подробности
Интерполяция Узнайте, как использовать интерполяцию и выражения в HTML.
Шаблонные декларации Реагируйте на события в ваших шаблонах.
Синтаксис связывания Используйте связывание для координации значений в вашем приложении.
Привязка свойств Установка свойств целевых элементов или декораторов директивы @Input().
Связывание атрибутов, классов и стилей Установка значений атрибутов, классов и стилей.
Связывание событий Слушайте события и ваш HTML.
Двустороннее связывание Обмен данными между классом и его шаблоном.
Встроенные директивы Слушайте и изменяйте поведение и расположение HTML.
Ссылочные переменные шаблона Используйте специальные переменные для ссылки на элемент DOM в шаблоне.
Inputs и Outputs Обмен данными между родительским контекстом и дочерними директивами или компонентами
Операторы шаблонных выражений Узнайте об операторе pipe (|), а также о защите от null или undefined значений в вашем HTML.
SVG в шаблонах Динамически генерировать интерактивную графику.

📅 28.02.2022

Комментарии