Часто используемые модули

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

Ниже приведен более подробный список наиболее часто используемых модулей в angular, их функции и типовой синтаксис.

BrowserModule:

Экспортирует необходимую инфраструктуру для всех приложений Angular. Включено по умолчанию во все приложения Angular, созданные с помощью команды CLI new. Реэкспортирует CommonModule и ApplicationModule, делая их экспорт и поставщиков доступными для всех приложений.

class BrowserModule {
  static withServerTransition(params: { appId: string; }): 
ModuleWithProviders<BrowserModule>
}

commonModule

Экспортирует все основные угловые директивы и каналы, такие как NgIf, NgForOf, DecimalPipe и т. Д. Повторно экспортируется с помощью BrowserModule, который автоматически включается в корневой AppModule при создании нового приложения с помощью команды CLI new.

class CommonModule {
}

FormsModule:

Экспортирует необходимые поставщики и директивы для шаблонно-управляемых форм, делая их доступными для импорта NgModules, которые импортируют этот модуль.

class FormsModule {
  static withConfig(opts: { warnOnDeprecatedNgFormSelector?: "never" |
 "once" | "always"; }): ModuleWithProviders<FormsModule>
}

ReactiveFormsModule:

Экспортирует необходимую инфраструктуру и директивы для реактивных форм, делая их доступными для импорта NgModules, которые импортируют этот модуль.

class ReactiveFormsModule {
  static withConfig(opts: { warnOnNgModelWithFormControl: "never" |
 "once" | "always"; }): ModuleWithProviders<ReactiveFormsModule>
}

RouterModule

Добавляет директивы маршрутизатора и провайдеров.

class RouterModule {
  static forRoot(routes: Route[], config?: ExtraOptions):
 ModuleWithProviders<RouterModule>
  static forChild(routes: Route[]): ModuleWithProviders<RouterModule>
}

HttpClientModule

Настраивает инжектор зависимостей для HttpClient с поддержкой служб для XSRF. Автоматически импортируется HttpClientModule.

class HttpClientModule {
}

Импорт модулей

Когда вы используете эти угловые модули, импортируйте их в AppModule или свой функциональный модуль в зависимости от ситуации и перечислите их в массиве импорта @NgModule. Например, в базовом приложении, созданном с помощью Angular CLI, BrowserModule - это первый импорт в верхней части AppModule, app.module.ts.

Код TypeScript:

/* import modules so that AppModule can access them */
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ /* add modules here so Angular knows to use them */
    BrowserModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Демонстрация в реальном времени:

См. Модуль импорта пера w3resource ( @ w3resource ) на CodePen .

Импорт в верхней части массива - это операторы импорта JavaScript, в то время как массив импорта в @NgModule специфичен для углов.

BrowserModule и CommonModule

BrowserModule импортирует CommonModule, который вносит вклад во многие общие директивы, такие как ngIf и ngFor. Кроме того, BrowserModule повторно экспортирует CommonModule, делая все его директивы доступными для любого модуля, который импортирует BrowserModule.

Для приложений, которые запускаются в браузере, импортируйте BrowserModule в корневой AppModule, поскольку он предоставляет сервисы, которые необходимы для запуска и запуска приложения браузера. Поставщики BrowserModule предназначены для всего приложения, поэтому оно должно быть только в корневом модуле, а не в функциональных модулях. Функциональным модулям нужны только общие директивы в CommonModule; им не нужно переустанавливать поставщиков всего приложения.

Если вы импортируете BrowserModule в лениво загруженный функциональный модуль, Angular возвращает ошибку, сообщающую вам об использовании CommonModule.

Предыдущий: Угловой модуль против JsModule
Далее: Входные компоненты