Перейти к содержанию

Модули

Angular модуль — это класс с декоратором @NgModule(), который служит изолирующей логической объединяющей структурой для компонентов, директив, фильтров и сервисов. Все перечисленные сущности определяются и конфигурируются с помощью @NgModule().

Angular приложение имеет модульную архитектуру и состоит, по крайней мере, из одного главного, или корневого, модуля. Все остальные относятся к второстепенным.

Сама библиотека @angular также модульная:

Ключевая роль при создании Angular модуля у декоратора @NgModule(), принимающего конфигурационный объект со свойствами:

  • imports — массив, где указывается список импортируемых второстепенных модулей;
  • exports — массив компонентов, директив и фильтров, которыми пользуются другие модули, если они импортируют текущий;
  • declarations — массив компонентов, директив и фильтров;
  • entryComponents — массив создаваемых динамически компонентов;
  • bootstrap — массив, в котором указывается компонент для загрузки;
  • providers — массив сервисов.

По назначению модули можно классифицировать следующим образом:

  • корневой;
  • функциональный;
  • маршрутизации;
  • для поставки сервисов.

Корневой модуль — главный в приложении. Именно он загружается первым и импортирует в себя все второстепенные модули, которые могут импортировать в себя другие второстепенные модули.

Только корневой модуль может определять свойство bootstrap и импортировать BrowserModule.

1
2
3
4
5
6
7
8
9
@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        //
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

Функциональный Angular модуль реализует логически связанную совокупность компонентов, директив или фильтров (например, модули библиотеки @angular/material).

Практически всегда для модулей этого типа определяется свойство exports.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@NgModule({
    //
    exports: [
        AccountsComponent,
        CreditsComponent,
        DepositsComponent,
        CreditsFilterDirective,
    ],
    //
})
export class AppModule {}

Модуль маршрутизации нужен для определения иерархии маршрутов.

Angular модуль для поставки сервисов создается с использованием статического метода forRoot().

CoreModule и SharedModule

CoreModule — общепринятое название для модуля, используемого исключительно для поставки сервисов. Он не содержит в себе компонентов, директив и фильтров.

core.module.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@NgModule({
    imports: [],
    declarations: [],
    providers: [],
})
export class CoreModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,
            providers: [
                AuthService,
                LoggerService,
                SettingsService,
            ],
        };
    }
}

SharedModule — общепринятое название для Angular модуля, служащим единым хранилищем для компонентов, директив и фильтров, которыми пользуются другие модули.

shared.module.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        ImageCropperModule,
        ScrollbarModule,
        SlickModule,
        SlickModule.forRoot(),
    ],
    exports: [
        CommonModule,
        ImageCropperModule,
        ScrollbarModule,
        SlickModule,
        AppLangsComponent,
        AppTabFilterComponent,
        AppFileUploadComponent,
        ComponentPreloaderDirective,
    ],
    declarations: [
        AppLangsComponent,
        AppTabFilterComponent,
        AppFileUploadComponent,
        ComponentPreloaderDirective,
    ],
})
export class SharedModule {}
1
2
3
4
5
6
7
@NgModule({
    imports: [
        //
        CoreModule.forRoot(),
        SharedModule
    ]
})

Комментарии