Модули¶

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

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

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

Ключевая роль при создании 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
    ]
})

Модули¶

CoreModule и SharedModule¶

Комментарии