1. Ссылки

Модули

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

Ссылки