Введение в #NgModules
Для тех, кто впервые заходит в мой блог: мы создаем онлайн-планировщик, похожий на Google Keep. Подробнее см. здесь: Серия руководств
Вчера мы говорили о настройке html в Angular Component, а также немного обсудили основные компоненты в этом проекте. Сегодня мы поговорим о модулях в AngularJS 2.
Модуль — это группа компонентов в Angular JS 2. Мы можем импортировать один или несколько модулей в другой модуль, и все связанные с ними будут автоматически импортированы. Нам не нужно беспокоиться об импорте каждого компонента по отдельности.
Если вам интересно узнать об этом больше, я нашел интересную статью здесь: Вы можете попробовать: https://scotch.io/bar-talk/getting-to-know-angular-2s-module- ngmodule
Как организовать модули?
Стандартного способа группировки модулей нет, но рекомендации таковы:
- Особенности как модуль
- Общие утилиты как модуль
ОСОБЕННОСТИ КАК МОДУЛЬ
Итак, в нашем приложении у нас есть функция планировщика и целей, каждая функция имеет несколько компонентов/каналов/директив. Возьмем, к примеру:
- Планировщик: PlannerListComponent, PlannerHeaderComponent, PlannerFooterComponent, PlannerService
- Цель: GoalListComponent, GoalHeaderComponent, CreateGoalComponent, GoalService
Поскольку эти функции не зависят друг от друга, мы можем создать два модуля: PlannerModule
и GoalModule
, а затем импортировать эти модули в LayoutModule
позже.
Архитектура модуля
- Declarations — поместите все ваши компоненты/директивы/каналы, которые вы создали в этом модуле. Если вы не объявите его, вы не сможете использовать его в этом модуле.
- Импорт — извлеките все модули, которые вы хотите импортировать, в этот модуль.
- Поставщики — перетащите сюда все службы.
- Bootstrap — этот вопрос мне до сих пор неясен. Но я думаю, что он нам нужен только там, где объявляется корневой модуль. Итак, в нашем случае это LayoutModule
- Экспорт — извлеките все компоненты, директивы, каналы, которые вы хотите предоставить другим модулям, которые импортируют этот модуль.
Объявленный компонент, директива или канал, которые не помещены в список экспорта, всегда будут приватными для модуля.
Кодовая база
Я создал небольшую демонстрацию, чтобы объяснить это. Вы можете загрузить код из базы кода с веткой «day_3» и увидеть, что мы импортируем PlannerModule в LayoutModule и используем его.
Скачать код отсюда:
Завтра мы немного поработаем над модулем планировщика, а также начнем работу над другим модулем.
Ссылки на путешествие:
- Готовьтесь: Пролог
- День №1: Введение в AngularJS 2
- День №2: Компонентный и HTML дизайн
- День 3. Знакомство с NgModule