Приложения Angular по умолчанию являются модульными, а Angular был построен с собственной системой модульности под названием NgModules .
NgModules — это контейнеры для связного блока кода. посвященный домену приложения, рабочему процессу или тесно связанному набору возможностей. Они могут содержать компоненты, поставщиков услуг и другие файлы кода, объем которых определяется содержащим NgModule. Они могут импортировать функции, которые экспортируются из других модулей NgModules, и экспортировать выбранные функции для использования другими модулями NgModules.
Каждое приложение Angular имеет по крайней мере один класс NgModule, корневой модуль, который обычно называется AppModule и находится в файле с именем `app.module.ts`. Ваше приложение Angular запускается путем загрузки корневого модуля NgModule.
Метаданные NgModule
NgModule определяется классом, отмеченным символом @ NgModule (). Декоратор @NgModule () — это функция, которая принимает один объект метаданных, свойства которого описывают модуль. Наиболее важные свойства следующие.
- декларации: компоненты, директивы и каналы, принадлежащие этому модулю NgModule.
- exports: подмножество объявлений, которые должны быть видимыми и доступными для использования в шаблонах компонентов других модулей NgModule.
- import: другие модули, экспортированные классы которых необходимы для шаблонов компонентов, объявленных в этом модуле NgModule.
- провайдеры: создатели сервисов, которые этот NgModule вносит в глобальный набор сервисов; они становятся доступными во всех частях приложения. (Вы также можете указать поставщиков на уровне компонентов, что часто является предпочтительным.)
- bootstrap: главное представление приложения, называемое корневым компонентом, в котором размещаются все остальные представления приложения. Только корневой NgModule должен устанавливать свойство bootstrap.
Ниже приведен фрагмент кода, иллюстрирующий простое определение корневого NgModule.
TypeScript Код:
src/app/app.module.ts; content_copyimport {NgModule} из '@ angular/core'; импорт {BrowserModule} из '@angular /platform-browser '; @ NgModule ({импорт: [BrowserModule], поставщики: [Logger], объявления: [AppComponent], экспорт: [AppComponent], bootstrap: [AppComponent]}) класс экспорта AppModule {}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию и не имеющий вывода
См. перо Простое определение корневого модуля NgModule. автор: w3resource (@ w3resource) на CodePen.
В приведенном выше фрагменте кода AppComponent включен в список экспорта только для иллюстрации; в этом примере это не обязательно. Это связано с тем, что у корневого NgModule нет причин экспортировать что-либо, потому что другим модулям не нужно импортировать корневой NgModule.
NgModules и компоненты
NgModules ускоряет компиляцию своих компонентов. У корневого NgModule всегда есть корневой компонент, который создается во время начальной загрузки, во время разработки любой NgModule может содержать любое количество компонентов в зависимости от вашего дизайна.
Эти компоненты могут быть загружены через маршрутизатор или созданы через шаблон. Компоненты, принадлежащие NgModule, совместно используют контекст компиляции.
На диаграмме ниже показана взаимосвязь между компонентами и NgModules.
Представления определяются компонентом и его шаблоном. Компонент может содержать иерархию представлений, которая позволяет вам определять произвольно сложные области экрана, которые могут быть созданы, изменены и уничтожены как единое целое. Иерархия представлений может смешивать представления, определенные в компонентах, принадлежащих разным модулям NgModules. Эта комбинация компонентов в иерархии представлений проиллюстрирована
диаграммой ниже:
Когда компоненты создаются, они напрямую связываются с одним представлением, называемым основным представлением. Основное представление может быть корнем иерархии представлений, которая может содержать встроенные представления, которые, в свою очередь, могут быть основными представлениями других компонентов. Эти компоненты могут находиться в одном модуле NgModule или могут быть импортированы из других модулей NgModule.
При вложении представлений дерево вложенности может быть вложено на любую глубину в зависимости от того, чего вы хотите достичь.
Модули NgModules и JavaScript
Когда модули NgModule и JavaScript (ES2015) сравниваются бок о бок, мы обнаружили, что система NgModule отличается и не имеет отношения к модульной системе JavaScript (ES2015) для управления коллекциями объектов JavaScript.
Это дополнительные модульные системы, которые вы можете использовать вместе для написания своих приложений. В JavaScript каждый файл представляет собой module и все объекты, определенные в файле, принадлежат этому модулю. Модуль объявляет некоторые объекты общедоступными, помечая их ключевым словом export. Другие модули JavaScript используют операторы импорта для доступа к общедоступным объектам из других модулей. Примеры импорта и экспорта JavaScript проиллюстрированы в примере ниже.
Код TypeScript:
import { NgModule} из '@ angular/core'; импортировать {AppComponent} из './app.component';export class AppModule {}
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никакого вывода
См. пример пера импорта и экспорта JavaScript с помощью w3resource (@ w3resource) на CodePen.
Библиотеки Angular
Angular использует набор модулей JavaScript. Вы можете думать о них как о библиотеках. Имя каждой библиотеки Angular начинается с префикса @angular. Библиотеки устанавливаются с помощью диспетчера пакетов узлов (NPM) и импортируются с помощью оператора импорта JavaScript..
Например, чтобы импортировать декоратор компонентов Angular из библиотеки @ angular/core, мы говорим:
`import {Component} from '@angular /core '; `
Вы также можете импортировать NgModules из библиотек Angular, используя операторы импорта JavaScript. Например, следующий код импортирует BrowserModule NgModule из библиотеки платформа-браузер.
`import {BrowserModule} from '@ angular/platform-browser';`
Чтобы получить доступ к данным из импортированных модулей, нам нужно добавить импортированные библиотеки к импортированным метаданным @NgModule, как показано ниже:
Код TypeScript:
@NgModule ({импорт: [BrowserModule],})
Живая демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никакого вывода
См. перо Добавление импортированной библиотеки в метаданные @NgModule с помощью w3resource (@ w3resource) на CodePen.
Таким образом, вы используете вместе системы модулей Angular и JavaScript. Хотя эти две системы легко спутать, у которых есть общий словарь «импорт» и «экспорт», вы познакомитесь с разными контекстами, в которых они используются.
