Перейти к содержанию

NgModules

📅 28.02.2022

NgModules настраивают инжектор и компилятор и помогают организовать связанные между собой вещи.

NgModule — это класс, помеченный декоратором @NgModule. @NgModule принимает объект метаданных, который описывает, как скомпилировать шаблон компонента и как создать инжектор во время выполнения. Он идентифицирует собственные компоненты, директивы и трубы модуля, делая некоторые из них общедоступными через свойство exports, чтобы внешние компоненты могли их использовать. @NgModule может также добавлять сервис-провайдеры к инжекторам зависимостей приложений.

Пример приложения, демонстрирующего все приемы, о которых рассказывается на страницах, посвященных NgModules, приведен в коде. Для получения пояснений по отдельным техникам посетите соответствующие страницы NgModule в разделе NgModules.

Модульность Angular

Модули — это отличный способ организовать приложение и расширить его возможностями из внешних библиотек.

Библиотеки Angular представляют собой NgModules, например FormsModule, HttpClientModule и RouterModule. Многие сторонние библиотеки доступны в виде NgModules, например Material Design, Ionic и AngularFire2.

Модули NgModules объединяют компоненты, директивы и трубы в целостные блоки функциональности, каждый из которых ориентирован на определенную область возможностей, бизнес-область приложения, рабочий процесс или общий набор утилит.

Модули также могут добавлять в приложение сервисы. Такие сервисы могут быть как собственной разработки, например, вы сами, так и из внешних источников, например, маршрутизатор и HTTP-клиент Angular.

Модули могут загружаться с нетерпением при запуске приложения или лениво, асинхронно с помощью маршрутизатора.

Метаданные NgModule делают следующее:

  • Объявляет, какие компоненты, директивы и трубы принадлежат модулю
  • Делает некоторые из этих компонентов, директив и труб общедоступными, чтобы шаблоны компонентов других модулей могли их использовать
  • Импортирует из других модулей компоненты, директивы и трубы, которые нужны компонентам текущего модуля
  • Предоставляет сервисы, которые могут использовать другие компоненты приложения

Каждое приложение Angular имеет как минимум один модуль — корневой. Для запуска приложения необходимо bootstrap этого модуля.

Корневой модуль — это все, что вам нужно в приложении с небольшим количеством компонентов. По мере роста приложения корневой модуль рефакторизируется на feature-модули, которые представляют собой наборы связанных функциональных возможностей. Затем эти модули импортируются в корневой модуль.

Базовый модуль NgModule

В Angular CLI при создании нового приложения генерируется следующий базовый AppModule.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

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

В верхней части находятся утверждения импорта. В следующем разделе производится конфигурирование @NgModule, в котором указывается, какие компоненты и директивы принадлежат ему (declarations), а также какие другие модули он использует (imports). Для получения более подробной информации о структуре @NgModule обязательно прочитайте Bootstrapping.

Подробнее о NgModules

Возможно, вас также заинтересует следующее:

Ссылки

Комментарии