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

Приложения 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. Хотя эти две системы легко спутать, у которых есть общий словарь «импорт» и «экспорт», вы познакомитесь с разными контекстами, в которых они используются.

Оцените статью
nanomode.ru
Добавить комментарий