NgModules

мотивация

Угловые приложения начинаются с корневого NgModule. Angular управляет зависимостями приложения через его модульную систему, состоящую из NgModules. Наряду с простыми модулями JavaScript, NgModules обеспечивают модульность кода и инкапсуляцию.

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

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

Кроме того, имеет смысл знать, почему Angular CLI (интерфейс командной строки) импортирует BrowserModule из @ angular / core. Это происходит всякий раз, когда новое приложение генерирует команду CLI: ng new [name-of-app].

Понимание сути реализации может быть достаточным в большинстве случаев. Однако понимание того, как реализация связывает себя с корнем, еще лучше. Все происходит автоматически, импортируя BrowserModule в корень.

Угловая модульность

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

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

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

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

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

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

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

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

NgModule Decorator

Angular определяет свои модули, декорируя общий класс. Декоратор @NgModule указывает на модульное назначение класса Angular. Класс NgModule объединяет корневые зависимости, доступные / создаваемые из области видимости модуля. «Область» означает все, что происходит от метаданных модуля.

Основной NgModule

При создании нового приложения Angular CLI генерирует следующий основной модуль приложения.

app.module.ts

Код TypeScript:

// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { ItemDirective } from './item.directive';
// @NgModule decorator with its metadata
@NgModule({
  declarations: [
    AppComponent,
    ItemDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Демонстрация в реальном времени:

См. Pen Basic Basic NgModule от w3resource ( @ w3resource ) в CodePen .

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

Предыдущая: Самозагрузка
Следующая: Угловой модуль против JsModule