Руководство по созданию NgModules¶
28.02.2022
В этой теме представлен концептуальный обзор различных категорий NgModules, которые можно создавать для организации кода в модульную структуру. Эти категории не являются застывшими — это предложения. Возможно, вы захотите создать NgModules для других целей или объединить характеристики некоторых из этих категорий.
NgModules — это отличный способ организовать приложение и отделить код, связанный с определенной функциональностью или возможностями, от остального кода. Используйте NgModules для объединения компонентов, директив и пайпов в целостные функциональные блоки. Сосредоточьте каждый блок на функции или бизнес-области, рабочем процессе или навигационном потоке, общей коллекции утилит или одном или нескольких providers для services.
Подробнее о NgModules см. в разделе Organizing your app with NgModules.
Пример приложения, используемого в темах, связанных с NgModules.
Краткое описание категорий NgModule¶
Все приложения начинаются с загрузки корневого NgModule. Остальные NgModules можно организовать любым удобным способом.
В данной теме приведены некоторые рекомендации для следующих общих категорий NgModules:
| Категория | Подробнее |
|---|---|
| Domain | Организован вокруг функции, бизнес-области или пользовательского опыта. |
| Routed | Является верхним компонентом модуля NgModule. Действует как конечный пункт навигационного маршрута router. |
| Routing | Предоставляет конфигурацию маршрутизации для другого NgModule. |
| Service | Обеспечивает такие полезные сервисы, как доступ к данным и обмен сообщениями. |
| Widget | Делает компонент, директиву или пайп доступными для других NgModules. |
| Shared | Делает набор компонентов, директив и пайпов доступным для других NgModules. |
В следующей таблице приведены основные характеристики каждой категории.
| NgModule | Declarations | Providers | Exports | Imported by |
|---|---|---|---|---|
| Домен | Да | Редко | Верхний компонент | Другой домен, AppModule |
| Маршрутизированный | Да | Редко | Нет | Нет |
| Маршрутизация | Нет | Да (охрана) | RouterModule | Другой домен (для маршрутизации) |
| Сервис | Нет | Да | Нет | Нет |
| Виджет | Да | Редкий | Да | Другой домен |
| Shared | Да | Нет | Да | Другой домен |
Доменные NgModules¶
Используйте доменные NgModule для создания пользовательского опыта, предназначенного для определенной функции или области приложения, например, для редактирования клиента или оформления заказа. Примером может служить ContactModule в живом примере.
Доменный NgModule организует код, связанный с определенной функцией, содержащий все компоненты, маршрутизацию и шаблоны, составляющие эту функцию. Верхний компонент NgModule домена выступает в качестве корня функции или домена и является единственным экспортируемым компонентом. От него отходят частные поддерживающие подкомпоненты.
Доменный NgModule можно импортировать ровно один раз в другой NgModule, например, в NgModule домена, или в корневой NgModule (AppModule) приложения, содержащего всего несколько NgModules.
Доменные NgModules состоят в основном из деклараций. В них редко включаются провайдеры. Если это происходит, то время жизни предоставляемых сервисов должно совпадать со временем жизни NgModule.
Более подробную информацию о жизненных циклах см. в разделе Hooking into the component lifecycle.
Маршрутизируемые NgModules¶
Используйте маршрутизируемый NgModule для всех lazy-loaded NgModules. Используйте верхний компонент NgModule в качестве пункта назначения маршрута навигации. Маршрутизируемые NgModules ничего не экспортируют, поскольку их компоненты никогда не появляются в шаблоне внешнего компонента.
Не импортируйте лениво загруженный маршрутизируемый NgModule в другой NgModule, так как это вызовет ускоренную загрузку, что перечеркивает цель ленивой загрузки.
Маршрутизируемые NgModules редко имеют провайдеров, поскольку вы загружаете маршрутизируемый NgModule только при необходимости (например, для маршрутизации). Сервисы, перечисленные в массиве provider NgModules, будут недоступны, поскольку корневой инжектор не будет знать о лениво загруженном NgModule. Если вы включаете провайдеров, то время жизни предоставляемых сервисов должно быть таким же, как и время жизни NgModule. Не предоставляйте общеприкладные singleton services в маршрутизируемом NgModule или в NgModule, который импортируется маршрутизируемым NgModule.
Более подробную информацию о провайдерах и лениво загружаемых маршрутизируемых NgModules см. в разделе Limiting provider scope.
Маршрутизация NgModules¶
Используйте NgModule маршрутизации для предоставления конфигурации маршрутизации для NgModule домена, тем самым отделяя проблемы маршрутизации от NgModule домена-компаньона. Примером может служить ContactRoutingModule в живом примере, который обеспечивает маршрутизацию для своего сопутствующего доменного NgModule ContactModule.
Обзор и подробности о маршрутизации см. в разделе In-app navigation: routing to views.
С помощью модуля маршрутизации NgModule можно выполнить следующие задачи:
- Определить маршруты
- Добавить конфигурацию маршрутизатора в импорт NgModule
- Добавить провайдеров guard и resolver в провайдеры NgModule.
Имя NgModule маршрутизации должно быть параллельно имени NgModule-компаньона с использованием суффикса Routing. Например, ContactModule в contact.module.ts имеет NgModule маршрутизации с именем ContactRoutingModule в contact-routing.module.ts.
Импортируйте NgModule маршрутизации только в NgModule-компаньон. Если NgModule-компаньон является корневым AppModule, то AppRoutingModule добавляет конфигурацию маршрутизатора к своим импортам с помощью функции RouterModule.forRoot(routes). Все остальные NgModules маршрутизации являются дочерними модулями, которые импортируют RouterModule.forChild(routes).
В своем Ng-модуле маршрутизации реэкспортируйте RouterModule в качестве удобства, чтобы компоненты Ng-модуля-компаньона имели доступ к директивам маршрутизатора, таким как RouterLink и RouterOutlet.
Не используйте декларации в NgModule для маршрутизации. Компоненты, директивы и пайпы находятся в ведении NgModule домена-компаньона, а не NgModule маршрутизации.
Сервисные NgModules¶
Сервисный NgModule используется для предоставления полезной услуги, такой как доступ к данным или обмен сообщениями. Идеальные сервисные NgModules состоят исключительно из провайдеров и не имеют деклараций. Хорошим примером сервисного NgModule является HttpClientModule в Angular.
Для импорта сервисных NgModules используйте только корневой AppModule.
Виджет NgModules¶
Используйте NgModule виджета, чтобы сделать компонент, директиву или пайп доступными для внешних NgModules. Импортируйте NgModules виджетов в любые NgModules, которым нужны виджеты в их шаблонах. Многие библиотеки компонентов пользовательского интерфейса сторонних производителей предоставляются в виде виджетов NgModules.
Виджетный NgModule должен состоять исключительно из деклараций, большинство из которых экспортируются. В редких случаях в нем могут присутствовать провайдеры.
Общие модули NgModules¶
Поместите часто используемые директивы, пайпы и компоненты в один NgModule, обычно называемый SharedModule, а затем импортируйте только этот NgModule везде, где он нужен в других частях вашего приложения. Вы можете импортировать общий NgModule в NgModules вашего домена, включая lazy-loaded NgModules. Одним из примеров является SharedModule в живом примере, который предоставляет пользовательский пайп AwesomePipe и директиву HighlightDirective.
Общие модули NgModules не должны включать провайдеров, равно как и любые импортированные или реэкспортированные модули NgModules не должны включать провайдеров.
О том, как использовать общие модули для организации и оптимизации кода, читайте в разделе Sharing NgModules in an app.
Следующие шаги¶
Возможно, вас также заинтересует следующее:
- Подробнее о NgModules см. в разделе Organizing your app with NgModules
- Подробнее о корневом NgModule см. в разделе Запуск приложения с корневым NgModule.
- Чтобы узнать о часто используемых модулях Angular NgModules и о том, как импортировать их в свое приложение, смотрите раздел Frequently-used modules.
- Полное описание свойств метаданных NgModule приведено в разделе Использование метаданных NgModule.
Если вы хотите управлять загрузкой NgModule и использованием зависимостей и сервисов, см. следующее:
- О том, как загружать NgModules с нетерпением при запуске приложения или лениво загружать NgModules асинхронно с помощью маршрутизатора, см. раздел Lazy-loading feature modules.
- Чтобы понять, как предоставить сервис или другую зависимость для вашего приложения, смотрите раздел Providing Dependencies for an NgModule.
- О том, как создать синглтон-сервис для использования в NgModules, см. раздел Making a service a singleton.