Hack Frontend Community

Что такое модули (Modules) в Angular и как они используются?

Что такое модули в Angular?

В Angular модули — это основной способ структурировать и организовать код приложения.

Каждое Angular-приложение — это набор NgModule-ов, где один из них — корневой (AppModule), а остальные могут быть фиче-модулями, общими модулями, лениво загружаемыми (lazy) и т.д.

Модуль:

  • объединяет компоненты, директивы, пайпы, сервисы
  • позволяет управлять зависимостями и повторным использованием
  • помогает внедрять lazy loading и деление на фичи

Основы 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)

Пример: разделение на модули

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

auth.module.ts

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

Типы Angular-модулей

ТипНазначение
AppModuleКорневой модуль (основа всего приложения)
Feature ModuleДля изоляции фич или разделов
Shared ModuleСодержит общие компоненты, директивы, пайпы
Core ModuleСодержит глобальные сервисы, доступные по всему приложению
Lazy ModuleЗагружается по требованию (оптимизация загрузки)

Lazy Loading модулей

Позволяет загружать модуль только при переходе к нему, улучшая время загрузки:

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

Используется для крупных секций: /admin,/profile, /dashboard

Совет:

Разбивайте приложение на модули, чтобы упростить масштабирование и повторное использование. Один модуль — одна ответственность.