Модули¶

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

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

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

• BrowserModule;
• CommonModule;
• FormsModule;
• ReactiveFormsModule;
• HttpClientModule;
• RouterModule и др.

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

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

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

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

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

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

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

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

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

@NgModule({
  //
  exports: [
    AccountsComponent,
    CreditsComponent,
    DepositsComponent,
    CreditsFilterDirective
  ]
  //
})
export class AppModule {}

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

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

CoreModule и SharedModule¶

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

core.module.ts

@NgModule({
  imports: [],
  declarations: [],
  providers: []
})
export class CoreModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [AuthService, LoggerService, SettingsService]
    }
  }
}

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

shared.module.ts

@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 {}

@NgModule({
    imports: [
        //
        CoreModule.forRoot(),
        SharedModule
    ]
})