Концепция NgModule

NgModule является основой архитектуры Angular-приложений. Это один из самых важных концептов фреймворка, который позволяет организовывать код в модульную структуру, упрощая его поддержку и расширение. Модули позволяют разделять функциональность на логические блоки, обеспечивая четкую структуру приложения.

Каждое Angular-приложение должно содержать хотя бы один модуль — root module (корневой модуль), обычно это AppModule. Модуль представляет собой класс, который декорирован с помощью декоратора @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 принимает объект с несколькими ключевыми полями, каждый из которых играет свою роль в организации приложения.

Основные поля декоратора NgModule

  1. declarations Это список компонентов, директив и пайпов, которые принадлежат данному модулю. Каждый компонент, директива или пайп, которые используются в шаблонах других компонентов, должны быть объявлены в этом массиве. Также сюда можно добавить компоненты, которые не будут использоваться напрямую в шаблонах, но будут доступны в других модулях через импорт.

    Пример:

    @NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent],
  ...
})

  2. imports Этот массив определяет другие модули, которые необходимы для работы текущего модуля. Например, если компонент использует формы или маршрутизацию, то соответствующие модули (например, FormsModule или RouterModule) должны быть указаны в списке imports.

    Пример:

    @NgModule({
  imports: [BrowserModule, FormsModule, RouterModule],
  ...
})

  3. providers В этом массиве указываются сервисы, которые должны быть доступны для инъекции в компоненты и другие сервисы этого модуля. Сервисы в Angular, как правило, предоставляются через dependency injection (DI). Модули могут объявлять глобальные сервисы, которые будут использоваться всеми компонентами, или локальные, доступные только в рамках данного модуля.

    Пример:

    @NgModule({
  providers: [UserService, AuthService],
  ...
})

  4. bootstrap В этом массиве указывается корневой компонент, который будет загружен первым в приложении. Обычно это AppComponent. Этот компонент служит точкой входа в приложение и отвечает за начальную инициализацию.

    Пример:

    @NgModule({
  bootstrap: [AppComponent],
  ...
})

Разделение на модули

Приложения, как правило, состоят из нескольких модулей, что позволяет организовать код в логические части. Модуль можно считать своего рода контейнером для компонентов, директив, пайпов и сервисов. Каждый модуль может импортировать другие модули, предоставляя тем самым функциональность другим частям приложения.

Модули могут быть разделены на:

  • Корневой модуль (root module): Это основной модуль приложения, который загружается при старте. В нем обычно находится компонент, который отвечает за рендеринг интерфейса и управление навигацией.

  • Функциональные модули (feature modules): Они содержат функциональные блоки, которые могут быть загружены по требованию, например, модули для работы с пользователями, администраторами и т. п. Каждый функциональный модуль инкапсулирует свою логику и может быть доступен через маршруты или API.

  • Модули для shared (общие модули): Это модули, которые содержат компоненты, директивы, пайпы и сервисы, которые могут использоваться в нескольких модулях. Примером может быть модуль для обработки форм или модуль для работы с авторизацией.

Пример создания функционального модуля:

@NgModule({
  declarations: [UserProfileComponent, UserListComponent],
  imports: [CommonModule],
  providers: [UserService],
  exports: [UserProfileComponent]
})
export class UserModule {}

Этот модуль может быть импортирован в другие модули, чтобы компоненты и сервисы, связанные с пользователями, могли быть использованы в других частях приложения.

Ленивая загрузка (Lazy Loading)

Один из важнейших аспектов использования NgModule — ленивая загрузка. Это подход, при котором модули загружаются только по мере необходимости. Это позволяет значительно улучшить производительность приложения, особенно если оно большое.

Для реализации ленивой загрузки нужно использовать механизмы маршрутизации, чтобы указать Angular, что определенные модули следует загружать только тогда, когда пользователь переходит на соответствующий маршрут. Для этого используется свойство loadChildren.

Пример:

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

В этом примере, модуль UserModule будет загружен только при переходе пользователя на путь /user. Это позволяет сократить начальный загрузочный вес приложения и ускорить его старт.

Роль NgModule в тестировании

NgModule также играет важную роль в тестировании Angular-приложений. В тестах часто требуется создать модуль, который содержит компоненты, сервисы и другие ресурсы, необходимые для тестирования. Для этого используется класс TestBed, который позволяет конфигурировать и создавать экземпляры модулей и компонентов в тестах.

Пример настройки теста с использованием TestBed:

import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Выводы

NgModule представляет собой ключевую концепцию Angular, которая позволяет организовать код приложения и улучшить его поддерживаемость и масштабируемость. Он помогает разделить функциональность на независимые модули, что облегчает работу с большим количеством компонентов и сервисов. Ленивая загрузка и возможность тестирования делают использование NgModule еще более гибким и эффективным в разработке сложных приложений.

Оглавление