Модули

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MyNewComponentComponent } from './my-new-component/my-new-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyNewComponentComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  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:    [ ]
})