Модульна Архітектура в 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 допомагає організувати застосунок у логічні блоки, що робить код масштабованим, структурованим і багаторазово використовуваним.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 3.13Модульна Архітектура в 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 допомагає організувати застосунок у логічні блоки, що робить код масштабованим, структурованим і багаторазово використовуваним.
Дякуємо за ваш відгук!
