Введение в модули¶

28.02.2022

Приложения Angular являются модульными, и Angular имеет свою собственную систему модульности, называемую NgModules. NgModules — это контейнеры для целостного блока кода, предназначенного для домена приложения, рабочего процесса или тесно связанного набора возможностей.

Они могут содержать компоненты, поставщики услуг и другие файлы кода, область применения которых определяется содержащимся NgModule.

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

Каждое приложение Angular имеет как минимум один класс NgModule, корневой модуль, который условно называется AppModule и находится в файле app.module.ts. Вы запускаете свое приложение путем bootstrapping корневого модуля NgModule.

В то время как небольшое приложение может иметь только один NgModule, большинство приложений имеют гораздо больше функциональных модулей. Корневой NgModule для приложения назван так потому, что он может включать дочерние NgModules в иерархию любой глубины.

Метаданные NgModule¶

NgModule определяется классом, украшенным @NgModule(). Декоратор @NgModule() — это функция, которая принимает один объект метаданных, свойства которого описывают модуль.

Наиболее важные свойства следующие.

Свойства	Детали
`declarations`	компоненты, директивы, и пайпы, которые принадлежат этому NgModule.
`exports`	Подмножество деклараций, которые должны быть видны и использоваться в компонентных шаблонах других NgModules.
`импорты`	Другие модули, экспортируемые классы которых необходимы шаблонам компонентов, объявленным в этом NgModule.
`провайдеры`	Создатели сервисов, которые этот NgModule вносит в глобальную коллекцию сервисов; они становятся доступными во всех частях приложения. (Вы также можете указать провайдеров на уровне компонента.)
`bootstrap`	Основное представление приложения, называемое корневым компонентом, на котором размещаются все остальные представления приложения. Только корневой NgModule должен устанавливать свойство `bootstrap`.

Вот простое определение корневого NgModule.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
    imports: [BrowserModule],
    providers: [Logger],
    declarations: [AppComponent],
    exports: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule {}

AppComponent включен в список экспортов здесь для иллюстрации; на самом деле он не нужен в этом примере. У корневого NgModule нет причин экспортировать что-либо, потому что другим модулям не нужно импортировать корневой NgModule.

NgModules и компоненты¶

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

Компоненты, входящие в NgModule, имеют общий контекст компиляции.

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

Иерархия представлений может смешивать представления, определенные в компонентах, которые принадлежат разным NgModules.

Это часто случается, особенно в библиотеках пользовательского интерфейса.

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

Представления в дереве могут быть вложены на любую глубину.

Иерархическая структура представлений является ключевым фактором в том, как Angular обнаруживает и реагирует на изменения в DOM и данных приложения.

NgModules и модули JavaScript¶

Система NgModule отличается и не связана с системой модулей JavaScript (ES2015) для управления коллекциями объектов JavaScript. Это дополнительные системы модулей, которые вы можете использовать вместе для написания приложений.

В JavaScript каждый файл является модулем, и все объекты, определенные в файле, принадлежат этому модулю. Модуль объявляет некоторые объекты общедоступными, помечая их ключевым словом export.

Другие модули JavaScript используют операторы импорта для доступа к публичным объектам из других модулей.

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule {}

Подробнее о системе модулей JavaScript в Интернете.

Библиотеки Angular¶

Angular загружается как коллекция модулей JavaScript. Вы можете считать их библиотечными модулями. Имя каждой библиотеки Angular начинается с префикса @angular.

Установите их с помощью менеджера пакетов node npm и импортируйте их части с помощью утверждений JavaScript import.

Например, импортируйте декоратор Angular Component из библиотеки @angular/core следующим образом.

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

Вы также импортируете NgModules из библиотек Angular, используя операторы импорта JavaScript. Например, следующий код импортирует Ng-модуль BrowserModule из библиотеки platform-browser.

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

В примере простого корневого модуля выше, модулю приложения нужен материал из BrowserModule.

Чтобы получить доступ к этому материалу, добавьте его в @NgModule метаданные imports следующим образом.

imports: [ BrowserModule ],

Таким образом, вы используете системы модулей Angular и JavaScript вместе. Хотя легко спутать эти две системы, которые имеют общую лексику "импорт" и "экспорт", вы познакомитесь с различными контекстами, в которых они используются.

Узнайте больше из руководства NgModules.

Ссылки¶

Introduction to modules