Запуск приложения с корневым модулем¶

28.02.2022

Предварительные условия¶

Базовое понимание следующего:

• JavaScript-модули против Ng-модулей

Модуль NgModule описывает, как части приложения сочетаются друг с другом. Каждое приложение имеет как минимум один модуль Angular, корневой модуль, который должен присутствовать для загрузки приложения при запуске. По соглашению и по умолчанию этот NgModule называется AppModule.

Когда вы используете команду Angular CLI ng new для генерации приложения, по умолчанию AppModule выглядит следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

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

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

/* the AppModule class with the @NgModule decorator */
@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

После операторов импорта находится класс с декоратором @NgModule decorator.

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

Приложение по умолчанию, созданное с помощью Angular CLI, содержит только один компонент, AppComponent, поэтому он находится в массивах declarations и bootstrap.

Массив declarations¶

Массив declarations модуля сообщает Angular, какие компоненты принадлежат этому модулю. По мере создания новых компонентов добавляйте их в declarations.

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

Массив declarations принимает только декларируемые компоненты. Декларируемые компоненты — это компоненты, директивы и пайпы. Все декларируемые модули должны находиться в массиве declarations. Декларируемые объекты должны принадлежать только одному модулю. При попытке объявить один и тот же класс более чем в одном модуле компилятор выдает ошибку.

Эти объявленные классы видны в модуле, но невидимы для компонентов другого модуля, если только они не экспортированы из этого модуля и другой модуль не импортирует этот класс.

Ниже приведен пример того, что входит в массив объявлений:

1
2
3
4
5

declarations: [
  YourComponent,
  YourPipe,
  YourDirective
],

Объявляемая переменная может принадлежать только одному модулю, поэтому объявляйте ее только в одном @NgModule. Когда она понадобится в другом месте, импортируйте модуль, содержащий нужную вам декларируемую переменную.

Использование директив в @NgModule¶

Используйте массив declarations для директив. Чтобы использовать директиву, компонент или пайп в модуле, необходимо выполнить несколько действий:

1. Экспортировать ее из файла, в котором она была написана.
2. Импортировать ее в соответствующий модуль.
3. Объявить его в массиве @NgModule declarations.

Эти три шага выглядят следующим образом. В файле, в котором создается директива, экспортируйте ее. Следующий пример с именем ItemDirective представляет собой структуру директив по умолчанию, которую CLI генерирует в собственном файле item.directive.ts:

1
2
3
4
5
6
7
8
9

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

@Directive({
    selector: '[appItem]',
})
export class ItemDirective {
    // code goes here
    constructor() {}
}

Ключевым моментом здесь является то, что вы должны экспортировать его, чтобы иметь возможность импортировать его в другом месте. Затем импортируйте его в NgModule, в данном примере app.module.ts, с помощью оператора JavaScript import:

1

import { ItemDirective } from './item.directive';

И в том же файле добавьте его в массив @NgModule declarations:

1
2
3
4

declarations: [
  AppComponent,
  ItemDirective
],

Теперь можно использовать ItemDirective в компоненте. В данном примере используется AppModule, но аналогичным образом можно поступить и с функциональным модулем. Подробнее о директивах см. в разделах Attribute Directives и Structural Directives. Аналогичная техника используется для пайпов pipes и компонентов.

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

Массив imports¶

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

1
2
3
4
5

imports: [
  BrowserModule,
  FormsModule,
  HttpClientModule
],

В этот список входят модули, экспортирующие компоненты, директивы или пайпы, на которые ссылаются шаблоны компонентов в этом модуле. В данном случае речь идет о компоненте AppComponent, который ссылается на компоненты, директивы или пайпы в модулях BrowserModule, FormsModule или HttpClientModule. Шаблон компонента может ссылаться на другой компонент, директиву или пайп, если ссылающийся класс объявлен в этом модуле или импортирован из другого модуля.

Массив providers¶

В массиве providers перечисляются сервисы, необходимые приложению. Когда вы перечисляете сервисы в этом массиве, они становятся доступными для всего приложения. При использовании функциональных модулей и "ленивой" загрузки их можно выделить. Более подробную информацию можно найти в разделе Providers.

Массив bootstrap¶

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

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

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

Этот единственный корневой компонент обычно называется AppComponent и находится в массиве bootstrap корневого модуля.

В ситуации, когда требуется загрузить компонент на основе ответа API или установить AppComponent в другой узел DOM, не соответствующий селектору компонента, обратитесь к документации ApplicationRef.bootstrap().

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

Подробнее о модулях NgModules, которые часто встречаются в приложениях, см. в разделе Frequently Used Modules.

Ссылки¶

• Launching your app with a root module

Комментарии