Что такое модуль?

В Angular модуль – это механизм группирования компонентов, директив, фильтров и сервисов, которые связаны между собой, таким образом, что их можно объединить с другими модулями для создания приложения. Angular приложение можно рассматривать как пазл, где каждая часть(или каждый модуль) необходима, чтобы увидеть полную картину.

Другая аналогия модулей – классы. В классе мы можем определить публичные или приватные методы. Публичные методы - это API, с которым могут взаимодействовать другие части кода, в то время как приватные методы - детали реализации, которые скрыты. Таким же образом модуль может экспортировать или скрывать компоненты, директивы, фильтры и сервисы. Экспортируемые элементы предназначены для использования другими модулями, в то время как те, которые не экспортируются(скрыты), просто используются внутри самого модуля и не могут напрямую обращаться к другим модулям приложения.

Чтобы определить модуль, мы должны использовать декоратор NgModule.

import { NgModule } from '@angular/core';

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

В примере мы превратили класс AppModule в Angular модуль с помощью декоратора NgModule. Декоратор NgModule для основного модуля требует как минимум трех свойств: imports, declarations и bootstrap. imports ожидает массив модулей. Здесь мы определяем части нашего пазла(приложения). declarations ожидают массив компонентов, директив и фильтров, которые являются частью модуля. Свойство bootstrap – это то место, где мы определяем корневой компонент нашего модуля. Хотя это свойство также является массивом, в 99% случаев мы будем определять только один компонент.

Вот как будет выглядеть базовый модуль, состоящий из одного компонента. app/app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>My Angular 2 App</h1>`
})
export class AppComponent {}

app/app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

Файл app.component.ts - всего лишь компонент «hello world», ничего интересного там нет. С другой стороны, файл app.module.ts следует структуре, которую мы видели ранее для определения модуля, но в этом случае мы указали модули и компоненты, которые будем использовать.

Во-первых, наш модуль импортирует BrowserModule как зависимость. BrowserModule – это встроенный модуль, который экспортирует основные директивы, фильтры и сервисы. В отличие от предыдущих версий Angular, мы должны явно импортировать эти зависимости, чтобы иметь возможность использовать в шаблонах директивы типа *ngFor или *ngIf.

Учитывая, что корневым(и единственным) компонентом модуля является AppComponent, мы должны указать его в массиве bootstrap. Поскольку в свойстве declarations мы должны определить все компоненты, составляющие приложение, мы также должны указать AppComponent и там.

Прежде чем двигаться дальше, необходимо кое что запомнить. Существуют два типа модулей, корневые(root) модули и функциональные(feature) модули.

Точно так же, как в модуле есть один корневой компонент и много возможных вторичных компонентов, в приложении есть только один корневой модуль и много функциональных модулей. Чтобы загрузить приложение, Angular должен знать, какой из них является корневым. Простой способ определить корневой модуль указать в imports BrowserModule. Eсли вместо этого импортируется CommonModule, тогда это функциональный модуль.

Хорошая практика когда корневой модуль называться AppModule.

Чтобы запустить приложение нам нужно сообщить Angular, какой из модулей корневой для выполнения компиляции в браузере. Эта компиляция в браузере известна также как компиляция «Just in Time» (JIT).

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);