Что такое угловые модули?

Angular — это модульная структура. Модульность — это свойство, которое измеряет количество компонентов, связанных вместе в системе, которые могут быть разделены как отдельные единицы и могут функционировать сами по себе, не завися друг от друга. Здесь, в Angular, модуль — это модуль, который объединяет компоненты, каналы, директивы и службы. Приложение angular может содержать несколько модулей. В каждом угловом приложении присутствует как минимум один модуль, который называется NgModule. NgModule по умолчанию — AppModule и присутствует в файле app.module.ts. Когда вы запускаете приложение, загружается именно этот модуль. Вы также можете импортировать и экспортировать функции из одного модуля в другой для эффективного и чистого программирования.

Распространенные типы модулей

Модуль приложения

Модуль app (также называемый root) является модулем точки входа. Из-за этого вы хотите сохранить это до самого необходимого, необходимого для загрузки вашего приложения. В этом модуле вы добавите компоненты начального уровня и другие модули уровня приложений. Видеть

Основной модуль

Модуль core используется для предоставления одноэлементных сервисов и любой высокоуровневой функциональности. Любой компонент, директива или канал, который не относится к конкретной функции и используется в приложении только один раз, должен оказаться в модуле core. Примером этого может быть компонент навигационной панели или нижнего колонтитула, который вызывается один раз в вашем компоненте app. Этот модуль должен быть импортирован один раз в модуль приложения.

Общий модуль

Модуль shared содержит общие компоненты пользовательского интерфейса, директивы и конвейеры, которые будут использоваться во многих, если не во всех, функциональных модулях. Это может включать в себя общие модули пользовательского интерфейса материалов, такие как MatButtonModule или MatSelectModule. Если вы заметили, что импортируете модуль в каждый функциональный модуль, вам следует реорганизовать его, чтобы вместо этого он жил в модуле shared.

Модули функций

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

Модуль маршрутизации

Модуль маршрутизации используется, когда вашему приложению необходимо иметь несколько страниц. Например, приложению для покупок может потребоваться маршрут к /shopping-cart и /inventory. В вашем приложении может быть несколько модулей маршрутизации, обычно они связаны с функциональным модулем.

Определение модуля

Вы можете определить модуль, импортировав декоратор NgModule из @angular/core и передав конфигурацию с компонентами, директивами, каналами и службами, которые вы хотите использовать.

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

  • Declarations: содержит названия компонентов, каналов и директив, присутствующих в NgModule.
  • Импорт: содержит имена других модулей, функции которых требуются компонентам этого конкретного модуля.
  • Экспорт: отвечает за то, чтобы сделать шаблон компонента видимым для других модулей, которые могут импортировать функции из этого модуля.
  • Поставщики: при запуске NgModule его основная функция — предоставлять приложению службы. Поставщик отвечает за создание Сервисов, которые требуются NgModule. Услуги доступны из всех частей приложения.
  • Bootstrap: это свойство корневого модуля. Начальная загрузка — это процесс, который инициализирует корневой модуль. Корневой модуль отвечает за инициализацию всех остальных модулей.

Начальная загрузка в Angular

Начальная загрузка — это первый процесс, который запускается при запуске приложения. Этот процесс отвечает за инициализацию корневого модуля. Когда корневой модуль инициализируется, все остальные модули инициализируются через корневой модуль. Чтобы загрузить модуль, нам нужно указать его в нашем файле main.ts:

Что такое ленивая загрузка?

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

Поскольку Angular создает SPA (одностраничное приложение), все его компоненты загружаются одновременно. Это означает, что также может быть загружено много ненужных библиотек или модулей.

Для небольшого приложения это было бы нормально. Но по мере роста приложения время загрузки будет увеличиваться, если все загружается сразу. Ленивая загрузка позволяет Angular загружать компоненты и модули по мере необходимости.

Чтобы лениво загружать модули, в вашей основной конфигурации маршрутизации вам нужно сделать что-то вроде следующего:

Как предварительно загрузить лениво загруженные модули Angular в фоновом режиме

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

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

Что такое предварительная загрузка?

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

Стратегии предварительной загрузки в angular

В Angular есть абстрактный класс PreloadingStrategy, по умолчанию он предоставляет два подкласса. которые;

  • NoPreloading: стратегия по умолчанию в angular, которая не обеспечивает предварительной загрузки для любого модуля.
  • PreloadAllModules: Предварительно загрузите все модули с отложенной загрузкой как можно быстрее.

Чтобы использовать любую из вышеперечисленных стратегий, вам нужно добавить стратегию в свой app-routing.module.ts, как показано ниже.

Теперь все выглядит хорошо. Хотя кто-то может спросить «а что, если я хочу предварительно загрузить только один ленивый модуль вместо всех». Что ж, это хороший вопрос. Если ваше приложение имеет более одного модуля с ленивой загрузкой, то загрузка всех модулей может потребовать значительных ресурсов. Но не волнуйтесь. Как всегда, у Angular есть ответ.

Angular предоставляет настраиваемую стратегию предварительной загрузки, чтобы разработчики могли явно указать, какие ленивые модули им необходимо предварительно загрузить. Все, что вам нужно сделать, это установить флаг data.preload в значение true в маршруте модуля с отложенной загрузкой, а angular позаботится обо всем остальном.

Специальная стратегия предварительной загрузки

Пользовательские стратегии предварительной загрузки позволяют предварительно загружать отдельные модули. Мы также можем настроить предварительную загрузку модулей после определенной задержки после запуска приложения. Чтобы создать собственную стратегию предварительной загрузки, Angular предоставляет класс PreloadingStrategy с методом preload. Нам нужно создать сервис, внедрив PreloadingStrategy и переопределив его метод preload. Чтобы включить пользовательские стратегии предварительной загрузки, нам нужно настроить нашу службу стратегий предварительной загрузки с помощью RouterModule.forRoot с использованием свойства preloadingStrategy.

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

Стратегии CustomPreloading написаны как сервисы, реализующие интерфейс PreloadingStrategy.

Понимание защиты CanLoad

И последнее, но не менее важное: стоит отметить, что отложенная загрузка имеет собственную защиту маршрутизатора, которая называется CanLoad. Он определяет, может ли модуль быть лениво загружен. Если он вернет false, модуль даже не будет загружен в браузер.

Обратите внимание, что эта защита блокирует всю предварительную загрузку. Их нельзя использовать вместе.

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

Заключение

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