Модульна Архітектура в Angular
Для безпечного експериментування з модулями слід створити копію наявного проєкту. Ці зміни призначені лише для практики й не вплинуть на оригінальний проєкт. У наступних розділах увага знову буде зосереджена на створенні застосунків із використанням автономних компонентів.
Створення модуля для TaskComponent
На цьому етапі створюється модуль для TaskComponent. Модуль оголошуватиме компонент, пов’язану директиву та пайп.
Для генерації модуля в Angular існує спеціальна команда CLI:
Тепер, коли файл task.module.ts створено в папці task, можна реалізувати його
task-module.ts
Масив exports у @NgModule визначає, які компоненти, директиви або пайпи повинні бути доступні для інших модулів, що імпортують цей модуль. У цьому випадку TaskComponent може використовуватися поза межами TaskModule.
Цей модуль оголошує TaskComponent, пов’язану з ним директиву та користувацький пайп. Він імпортує CommonModule, щоб увімкнути структурні директиви, такі як *ngIf та *ngFor. TaskComponent експортується, щоб його можна було повторно використовувати в інших модулях.
Створення модуля для TaskListComponent
На цьому етапі буде створено модуль для TaskListComponent. Створіть новий модуль у папці task-list:
Тепер, коли файл task-list.module.ts створено у папці task-list, можна реалізувати його
task-list-module.ts
Цей модуль оголошує TaskListComponent, який відповідає за відображення списку завдань. Він імпортує TaskModule для доступу до компонента завдання та FormsModule для таких можливостей, як форми створення завдань. Компонент експортується, щоб його можна було використовувати в інших модулях.
Створення кореневого модуля
На цьому етапі буде визначено головний модуль, який виступає відправною точкою для всього застосунку.
Кожен застосунок Angular потребує кореневого модуля, який вказує Angular, як запускати застосунок. Цей модуль об'єднує всі необхідні частини: вбудовані можливості Angular, наші власні модулі та кореневий компонент.
Створіть новий модуль у папці app:
Прапор --flat вказує Angular CLI створити файл модуля без створення окремої папки.
app-module.ts
Цей модуль слугує точкою входу додатка. Він імпортує BrowserModule, який необхідний для запуску Angular у браузері, та TaskListModule, що містить основну функціональність для керування завданнями. AppComponent встановлено як кореневий компонент для завантаження застосунку.
Налаштування точки входу
На цьому етапі оновлюється точка входу додатка для запуску через кореневий модуль замість окремого компонента.
Відкрийте main.ts і замініть його вміст наступним:
main.ts
Цей код запускає додаток, використовуючи AppModule. Така конфігурація демонструє модульну архітектуру: додаток розділено на модулі, кожен з яких інкапсулює свої компоненти, директиви, пайпи, сервіси та інше.
Модульна архітектура в Angular допомагає організувати застосунок у логічні блоки, що робить код масштабованим, структурованим і багаторазово використовуваним.
Дякуємо за ваш відгук!
