Що таке модулі в Angular і як вони використовуються?

Що таке модулі в Angular?

В Angular модулі є основним способом структурування та організації коду програми.

Кожен Angular додаток є набором NgModules, де один з них є кореневим (AppModule), а інші можуть бути функціональними модулями, спільними модулями, ліниво завантаженими модулями тощо.

Модуль:

об'єднує компоненти, директиви, пайпи, сервіси
дозволяє управляти залежностями та повторно використовувати
допомагає реалізувати ліниве завантаження та розподіл функцій

Основи NgModule

Модуль — це звичайний клас позначений декоратором @NgModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Основні поля @NgModule

Поле	Опис
`declarations`	Компоненти, директиви та пайпи, що належать до модуля
`imports`	Модулі, необхідні для роботи поточного модуля
`exports`	Що буде доступно іншим модулям
`providers`	Сервіси та залежності
`bootstrap`	Основний компонент, що запускається при старті (тільки в AppModule)

Приклад: Розподіл модулів

bash

src/
├── app/
│   ├── app.module.ts
│   ├── features/
│   │   ├── auth/
│   │   │   ├── auth.module.ts
│   │   │   ├── login.component.ts
│   │   │   └── register.component.ts

auth.module.ts

typescript

@NgModule({
  declarations: [LoginComponent, RegisterComponent],
  imports: [CommonModule, FormsModule],
  exports: [LoginComponent] // доступний в інших модулях
})
export class AuthModule {}

Типи модулів Angular

Тип	Призначення
`AppModule`	Кореневий модуль (основа всього додатку)
`Feature Module`	Для ізоляції функцій або секцій
`Shared Module`	Містить загальні компоненти, директиви, пайпи
`Core Module`	Містить глобальні сервіси, доступні в усьому додатку
`Lazy Module`	Завантажується за запитом (оптимізація завантаження)

Ліниве завантаження модулів

Дозволяє завантажувати модуль тільки при навігації до нього, покращуючи час завантаження:

typescript

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

Використовується для великих секцій: /admin, /profile, /dashboard

Порада:

Розділіть додаток на модулі, щоб спростити масштабування та повторне використання. Один модуль — одна відповідальність.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке модулі в Angular і як вони використовуються?