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

Март 3, 2021

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

Содержание

2. Базовая структура приложения
3. Что происходит при запуске? Rendered index.html Запускается main.ts. Там запускается модуль AppModule В app.module.ts в AppModule
4. Компоненты
5. Как создать компонент? Создать name.component.ts Пометить аннотацией компонент Указать селектор и путь к шаблону Сделать шаблон
6. ng generate component component-name Или…..
7. Шаблоны (templates) Вместо templateUrl можно использовать template, и писать javascript код там Одинарные кавычки для one-line,
9. Но статический сайт я могу и просто на html написать Для того, чтобы избавиться от статики
10. Event binding Тоже самое, что и property binding, но для событий event нужно заключить в скобки,
11. Two way data binding Если какие-то данные, завязанные на поле, то их можно связать с помощью
13. Скачать презентацию

Слайд 2

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

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

Слайд 3

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

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

в AppModule подключается компонент AppComponent
В AppComponent рендерится app.component.html
Счастье

Что происходит при запуске? Rendered index.html Запускается main.ts. Там запускается

Слайд 4

Компоненты

Компоненты

Слайд 5

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

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

шаблон
Зарегистрировать компонент
Добавить компонент в другой компонент

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

Слайд 6

ng generate component component-name

Или…..

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

Слайд 7

Шаблоны (templates)

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

кавычки для one-line, обратные для multiline
Тоже самое верно для стилей

Шаблоны (templates) Вместо templateUrl можно использовать template, и писать javascript

Слайд 8

Слайд 9

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

Для того,

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

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

Слайд 10

Event binding

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

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

Event binding Тоже самое, что и property binding, но для

Слайд 11

Two way data binding

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

можно связать с помощью [(ngModel)] - объединение двух типов связи

Two way data binding Если какие-то данные, завязанные на поле,