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

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

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

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

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

У 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. Він не містить типовий вміст, лише базову структуру з одним спеціальним тегом:

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

Висновок

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