Модуль AppModule: корневой модуль

Укажите Angular, как создать и запустить приложение в корневом модуле "AppModule".

Класс Angular-модуля описывает, как части приложения объединяются вместе. Каждое приложение имеет по крайней мере один Angular-модуль, корневой модуль, который вы запускаете, чтобы запустить приложение. Вы можете назвать его как угодно. Традиционное название — AppModule.

Инструкции по настройке создают новый проект с минимальными 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 как класс Angular-модуля (также называемый классом NgModule). @NgModule принимает объект метаданных, который сообщает Angular, как скомпилировать и запустить приложение.

• imports — BrowserModule , необходимые этому и любому приложению для работы в браузере.
• declarations — единственный компонент приложения, который также...
• bootstrap — корневой компонент, который Angular создаёт и вставляет в index.html веб-страницу-хост.

Руководство Angular Modules (NgModule) подробно рассматривает особенности Angular-модулей. Сейчас вам нужно знать только несколько основных свойств.

Массив imports

Angular-модули — способ объединить связанные функции в отдельные единицы. Многие функции самого Angular организованы как Angular-модули. Сервисы HTTP находятся в HttpModule. Маршрутизатор находится в RouterModule. В конечном итоге вы можете создать модуль функций.

Добавляйте модуль в массив imports, когда приложение требует его функций.

Это приложение, как и большинство приложений, выполняется в браузере. Каждое приложение, выполняющееся в браузере, нуждается в BrowserModule из @angular/platform-browser. Поэтому каждое такое приложение включает BrowserModule в массив imports своего корневого AppModule. Другие руководства и поваренные книги расскажут вам, когда необходимо добавить дополнительные модули в этот массив.

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

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

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

Массив модуля imports появляется исключительно в объекте метаданных @NgModule. Он информирует Angular о конкретных других Angular-модулях — все они являются классами, снабжёнными декоратором @NgModule — которые необходимо для корректной работы приложения.

Массив declarations

Вы сообщаете Angular, какие компоненты принадлежат AppModule , перечислив их в массиве declarations модуля. По мере создания дополнительных компонентов вы будете добавлять их в declarations.

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

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

В массив declarations должны входить только объявляемые элементы — компоненты, директивы и фильтры. Не добавляйте в declarations другие типы классов; не классы NgModule, не классы сервисов, не классы моделей.

Массив bootstrap

Вы запускаете приложение, запустив корневой AppModule. Среди прочего, процесс запуска создаёт компонент(ы), перечисленные в массиве bootstrap, и вставляет каждый из них в DOM браузера.

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

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

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

Что приводит нас к самому процессу запуска.

Запуск в 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 , описанный выше.

Процесс запуска настраивает среду выполнения, извлекает корневой AppComponent из массива bootstrap модуля, создаёт экземпляр компонента и вставляет его в тег элемента, идентифицированный селектором selector компонента.

Селектор AppComponent — здесь и во многих примерах документации — my-app , поэтому Angular ищет тег <my-app> на странице index.html вот так…

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

…и отображает AppComponent там.

Этот файл очень стабилен. После его настройки его можно больше не изменять.

Подробнее о модулях Angular

Изначальное приложение содержит только один модуль — корневой модуль. По мере роста приложения вы можете разделить его на несколько модулей функций, некоторые из которых можно загружать позже («ленивая загрузка»), когда пользователь решит посетить эти функции.

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

Следующий шаг

Отображение данных