Синтаксис шаблонов¶
В Angular шаблон — это фрагмент HTML. Используйте специальный синтаксис в шаблоне, чтобы использовать многие возможности Angular.
Предварительные условия¶
Прежде чем изучать синтаксис шаблонов, вы должны быть знакомы со следующим:
- Концепции Angular
- JavaScript
- HTML
- CSS
Каждый шаблон 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