Модули¶
Приложение 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: [ ]
})