Модули

Приложение Angular состоит из модулей. Как правило, приложения состоят из нескольких модулей. И каждое приложение Angular как минимум имеет один корневой модуль (root module), который, согласно принятым условностям, называется AppModule. Например, нами использовался следующий корневой модуль:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component'

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

Для работы модуля ему необходимы ряд библиотек, поэтому в начале файла идет их подключение. Имя каждой библиотеки Angular начинается с префикса @angular.

Библиотеки устанавливаются через пакетный менеджер npm и импортируются с помощью директивы import. Например, импорт функциональности декоратора NgModule из библиотеки @angular/core:

import { NgModule } from '@angular/core'

То есть здесь мы должны импортировать все модули и классы, которые использует данный модуль. В частности, для AppModule необходимы:

• NgModule: функциональность декоратора NgModule, без которой мы не сможем создать модуль
• BrowserModule: модуль, необходимый для работы с браузером
• FormsModule: модуль, необходимый для работы с формами html и, в частности, с элементами input. Так как класс компонента работает с подобными элементами, то мы обязаны также импортировать этот модуль
• AppComponent: функциональность корневого компонента приложения

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

export class AppModule {}

Однако в Angular модуль это не просто класс. Каждый модуль должен определяться с декоратором @NgModule.

NgModule представляет функцию-декоратора, которая принимает объект, свойства которого описывают метаданные модуля. Наиболее важные свойства:

• declarations: классы представлений (view classes), которые принадлежат модулю. Angular имеет три типа классов представлений: компоненты (components), директивы (directives), каналы (pipes)
• exports: набор классов представлений, которые должны использоваться в шаблонах компонентов из других модулей
• imports: другие модули, классы которых необходимы для шаблонов компонентов из текущего модуля
• providers: классы, создающие сервисы, используемые модулем
• bootstrap: корневой компонент, который вызывается по умолчанию при загрузке приложения

В случае выше единственным классом представлений является компонент AppComponent. Поэтому он указывается для свойств declarations и bootstrap. И поскольку его действие зависит от модулей BrowserModule и FormsModule, то данные модули указываются для свойства imports.

Но при необходимости мы могли бы использовать и другие свойства:

@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    exports:      [ ],
    providers:    [ ]
})