Свайпніть щоб показати меню

Файли у папці app

Перш ніж перейти до головного компонента, розглянемо файли, що знаходяться у папці app, та їхню роль у застосунку.

Під час створення нового проєкту Angular все починається з папки app. Саме тут зберігаються основні файли, які визначають структуру вашого застосунку. У цьому розділі розглянемо вміст цієї папки та детальніше ознайомимося з головним компонентом, який виконує роль точки входу до інтерфейсу користувача.

Головний компонент

Тепер розглянемо головний компонент — AppComponent. Цей компонент створюється за замовчуванням під час виконання команди ng new і є кореневим компонентом застосунку.

component.ts

У Angular компоненти створюються за допомогою декораторів. Декоратор — це спеціальна функція, яка додає додаткову функціональність до класу.

У межах декоратора @Component вказуються важливі налаштування, які визначають вигляд і поведінку компонента. Розглянемо їх детальніше:

Ключові елементи у файлі app.component.ts:

Selector (selector) – визначає, як буде називатися компонент у HTML. У цьому випадку його можна використовувати як <app-root></app-root>;
Imports (imports) – перелік залежностей, необхідних для роботи компонента. У цьому прикладі використовується RouterOutlet, який відповідає за відображення контенту залежно від маршруту;
Template (templateUrl) – шлях до HTML-файлу (app.component.html), що містить шаблон компонента;
Styles (styleUrls) – шлях до CSS-файлу (app.component.css), який визначає зовнішній вигляд компонента.

Як використовується головний компонент

Процес починається у файлі index.html, який знаходиться у папці src. Він не містить типовий вміст, лише базову структуру з одним спеціальним тегом:

index.html

Цей тег <app-root> відповідає selector у app.component.ts. Коли Angular ініціалізується, він знаходить цей тег і замінює його на вміст з app.component.html.

Висновок

Головний компонент — це серце додатка. Він завантажується першим і керує основним шаблоном. Усе, що ми бачимо на екрані, проходить через нього. Тег <app-root> у index.html є точкою входу, через яку Angular "потрапляє" на сторінку.