Angular 2 – Модуль (Module)

Каждое приложение написанное на Ангулар 2 содержит как минимум один модуль который запускает ваше приложение. В Ангулар 2 класс модуля описывает как части приложение взаимодействуют между собой.

В инструкции по установке мы имеем минимум один модуль AppModule.

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 { }

После дерективы import в классе появляеться декоратор @NgModule.

Декоратор @NgModule определяет AppModule класс как модуль приложения. @NgModule принимает объект метаданных, который сообщает Angular, как компилировать и запускать приложение.

• imports –  `BrowserModule` говорит о том что приложение должно запускаться в браузере.
• declarations – единственный компонент приложения, который также является ->
• bootstrap – определяет главный компонент приложения который создает и добавляет Angular 2 в index.html

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

Массив imports

Angular 2 модули – это способ объединения функций, которые входят в состав отдельных блоков. Множество компонентов в Angular 2 являются модулями. HTTP-службы находяться в модуле HttpModule. Функции роутинга в RouterMoule. В конце концов вы можете создавать свои функциональные модули.

Что бы подключить модуль достаточно добавить его в массив imports когда вам нужен функционал модуля.

Каждое приложение которое выполняеться в браузере требует подключения BrowserModule из пакета @angular/platform-browser.  Таким образом каждое приложение подключает BrowserModule в корневой AppModule.

Только классы NgModule входят в массив import. Не помещайте какой-либо другой класс в импорт.

Операторы import в верхней части файла Angular 2 и массив imports в модуле не связаны и выполняют совершенно разные задачи. 

Операторы import в JavaScript, используется для импорта функций, объектов или примитивов, экспортированных из внешнего модуля, другого скрипта и т.д.

Массив imports в модуле принимает появляется исключительно в объекте метаданных @NgModule. Он (массив) указывает Angular на другие модули приложения – все они являються классами с декоратором @NgModule – с которыми должно роботать приложение на Angular 2.

Массив declarations 

В этом массиве вы указываете Angular, какие компоненты принадлежат модулю AppModule, перечисляя его в массиве declarations модуля. Вы должны объявить каждый компонент в классе NgModule. Если вы используете компонентб не объявляя его, вы увидете сообщение об ошибке в консоли браузера.

Только declarables компоненты, директивы и каналы (pipes) – могут быть добавленны в в массив declarations Вы не должны объявлять какие-либо классы, в том числе и NgModule, Service и классы моделей.

Массив bootstrap

Вы запускаете приложение, загружая корневой модуль AppModule. Помимо всего прочего, процесс начальной загрузки создает компоненты, перечисленные в массиве bootstrap и вставляете все это в DOM браузера.

Каждый загружаемый компонент являеться основой его собственного дерева компонентов. Вставка загрузочного компонента обычно запускает каскад компонентов, которые заполняют это дерево.

Хотя вы можете загрузить более чем одно древо компонентов на веб-странице – что являеться не типичным. Большинство приложений имеют только одно дерево компонентов, и они загружают один корневой компонент.

Вы можете вызывать один корневой компонент как угодно, но большинство разработчиков называют его AppComponent.

Что и приводт нас к самому процессу начальной загрузки.

Bootstrap в main.ts

Существует множество способов загрузки приложения. Варианты зависят от того, как вы хотите скомпилировать приложение и где вы хотите его запустить.

Вначале вы будете компилировать приложение динамически с помощью Just-in-Time (JIT) компилятора, и вы запустите его в браузере. Вы можете узнать о других вариантах позже.

Рекомендуемое место для загрузки JIT-скомпилированного приложения-обозревателя находится в отдельном файле в папке src с именем src / main.ts

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

platformBrowserDynamic().bootstrapModule(AppModule);

Этот код создает платформу для динамической компиляции (JIT) и загружает AppModule, описанный выше.

<my-app><!-- content managed by Angular --></my-app>