Слайд 2Базовая структура приложения
![Базовая структура приложения](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-1.jpg)
Слайд 3Что происходит при запуске?
Rendered index.html
Запускается main.ts. Там запускается модуль AppModule
В app.module.ts в
![Что происходит при запуске? Rendered index.html Запускается main.ts. Там запускается модуль AppModule](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-2.jpg)
AppModule подключается компонент AppComponent
В AppComponent рендерится app.component.html
Счастье
Слайд 5Как создать компонент?
Создать name.component.ts
Пометить аннотацией компонент
Указать селектор и путь к шаблону
Сделать шаблон
Зарегистрировать
![Как создать компонент? Создать name.component.ts Пометить аннотацией компонент Указать селектор и путь](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-4.jpg)
компонент
Добавить компонент в другой компонент
Слайд 6ng generate component component-name
Или…..
![ng generate component component-name Или…..](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-5.jpg)
Слайд 7Шаблоны (templates)
Вместо templateUrl можно использовать template, и писать javascript код там
Одинарные кавычки
![Шаблоны (templates) Вместо templateUrl можно использовать template, и писать javascript код там](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-6.jpg)
для one-line, обратные для multiline
Тоже самое верно для стилей
Слайд 9Но статический сайт я могу и просто на html написать
Для того, чтобы
![Но статический сайт я могу и просто на html написать Для того,](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-8.jpg)
избавиться от статики нам нужен databinding
Самый простой способ - string interpolation - {{dataFromJS}}
Также можно воспользоваться property binding с [property]
Слайд 10Event binding
Тоже самое, что и property binding, но для событий
event нужно заключить
![Event binding Тоже самое, что и property binding, но для событий event](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-9.jpg)
в скобки, без слова on
После этого вызвать метод
В event можно передавать параметр через $
Слайд 11Two way data binding
Если какие-то данные, завязанные на поле, то их можно
![Two way data binding Если какие-то данные, завязанные на поле, то их](/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/950317/slide-10.jpg)
связать с помощью [(ngModel)] - объединение двух типов связи