Components. Data binding. Базовая структура приложения

Слайд 2

Базовая структура приложения

Базовая структура приложения

Слайд 3

Что происходит при запуске?

Rendered index.html
Запускается main.ts. Там запускается модуль AppModule
В app.module.ts в

Что происходит при запуске? Rendered index.html Запускается main.ts. Там запускается модуль AppModule
AppModule подключается компонент AppComponent
В AppComponent рендерится app.component.html
Счастье

Слайд 4

Компоненты

Компоненты

Слайд 5

Как создать компонент?

Создать name.component.ts
Пометить аннотацией компонент
Указать селектор и путь к шаблону
Сделать шаблон
Зарегистрировать

Как создать компонент? Создать name.component.ts Пометить аннотацией компонент Указать селектор и путь
компонент
Добавить компонент в другой компонент

Слайд 6

ng generate component component-name

Или…..

ng generate component component-name Или…..

Слайд 7

Шаблоны (templates)

Вместо templateUrl можно использовать template, и писать javascript код там
Одинарные кавычки

Шаблоны (templates) Вместо templateUrl можно использовать template, и писать javascript код там
для one-line, обратные для multiline
Тоже самое верно для стилей

Слайд 9

Но статический сайт я могу и просто на html написать

Для того, чтобы

Но статический сайт я могу и просто на html написать Для того,
избавиться от статики нам нужен databinding
Самый простой способ - string interpolation - {{dataFromJS}}
Также можно воспользоваться property binding с [property]

Слайд 10

Event binding

Тоже самое, что и property binding, но для событий
event нужно заключить

Event binding Тоже самое, что и property binding, но для событий event
в скобки, без слова on
После этого вызвать метод
В event можно передавать параметр через $

Слайд 11

Two way data binding

Если какие-то данные, завязанные на поле, то их можно

Two way data binding Если какие-то данные, завязанные на поле, то их
связать с помощью [(ngModel)] - объединение двух типов связи
Имя файла: Components.-Data-binding.-Базовая-структура-приложения.pptx
Количество просмотров: 37
Количество скачиваний: 0