Синтаксис шаблона
Приложение Angular управляет тем, что видит пользователь, и делает это, взаимодействуя с экземпляром класса компонента ( компонентом ) и его пользовательским шаблоном.
Мы можем вспомнить из нашего опыта работы с MVC (Model-View-Controller) или MVVM (Model-View-ViewModel), где контроллеры и viewmodel контролируют взаимодействие пользователя с моделями. Точно так же в Angular компонент играет роль контроллеров или моделей представления, в то время как шаблон представляет представление.
HTML в шаблонах
HTML - это язык углового шаблона. Почти весь синтаксис HTML является допустимым синтаксисом шаблона. За исключением тега <script>, который является заметным исключением; Это запрещено, что исключает риск атак с использованием скриптов.
На практике, когда встречается <script>, он игнорируется, и в консоли браузера регистрируется предупреждение. Некоторый юридический HTML не имеет большого смысла в шаблоне. Некоторые общие теги, такие как элементы <html>, <body> и <base>, не имеют никакой полезной роли.
HTML может быть в значительной степени дополнен компонентами и директивами, которые появляются как новые элементы и атрибуты, которые мы рассмотрим в этом разделе.
Интерполяция и шаблонная экспрессия
Интерполяция позволяет включать вычисляемые строки в текст между тегами HTML-элементов и в назначениях атрибутов. Шаблонные выражения - это то, что вы используете для вычисления этих строк.
С помощью интерполяции рассчитанные значения или переменные могут отображаться в шаблоне HTML.
Интерполяция {{...}}
Интерполяция в Angular используется для отображения переменных или рассчитанных значений в шаблоне. Это делается с помощью двух фигурных скобок `{{…}}`, как показано
В следующем фрагменте кода {{currentUser}} и {{itemImageUrl}} является примером интерполяции
<h3>Current User: {{currentUser}}</h3>
<div><img src="{{itemImageUrl}}"></div>
Выражения шаблонов
В Angular шаблонные выражения - это вычисления или присваивания, выполняемые в шаблоне внутри фигурных скобок интерполяции. Это выражение считается локальным и существует только внутри шаблона.
Сложные выражения или присваивания не рекомендуется выполнять внутри выражений шаблонов, поскольку сложные логики рекомендуется выполнять только в компонентах. Некоторые примеры шаблонных выражений включают
<p>The sum of 1 + 1 is {{1 + 1}}.</p>
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}.</p>
Шаблон заявления
Оператор шаблона отвечает на событие , вызванное целью привязки, таким как элемент, компонент или директива. Шаблон заявления написан в формате (событие) = «оператор». Как показано в фрагменте кода.
<button (click)="deleteUser()">Delete hero</button>Шаблон заявления имеет побочный эффект . Вот и весь смысл события. Это то, как вы обновляете состояние приложения из действий пользователя.
Шаблонные операторы существуют только в контексте данного шаблона. Они не относятся к глобальным переменным.
Синтаксис привязки: обзор
Привязка данных - это механизм для координации того, что видят пользователи, со значениями данных приложения. В то время как вы можете передавать значения в HTML и извлекать их из HTML, приложение легче писать, читать и обслуживать, если вы передадите эти обязанности в среду привязки. Вы просто объявляете привязки между источниками привязки и целевыми элементами HTML и позволяете фреймворку работать.
Типы привязки могут быть сгруппированы в три категории, различающиеся по направлению потока данных:
- источник-просмотр
- вид-исток
- вид-исток к мнению
источник для просмотра: в одну сторону, от источника данных к данным представления. Синтаксис такой:
[Цель] = "выражение" связывать-мишень = «выражение»
view-to-source: один путь от цели просмотра к источнику данных. Синтаксис такой:
(Цель) = "утверждение" на цели = «утверждение»
просмотр от источника к представлению: два пути, от цели представления к источнику данных, и наоборот. Синтаксис такой:
[(Цель)] = "заявление" Биндон-мишень = «выражение»
Целевое имя - это имя свойства. Это может выглядеть как имя атрибута, но это никогда не так. Чтобы оценить разницу, вы должны разработать новый подход к шаблону HTML.
Предыдущая: Введение в модули
Далее: взаимодействие компонентов
Новый контент: Composer: менеджер зависимостей для PHP , R программирования