Введение в #NgModules

Для тех, кто впервые заходит в мой блог: мы создаем онлайн-планировщик, похожий на Google Keep. Подробнее см. здесь: Серия руководств

Вчера мы говорили о настройке html в Angular Component, а также немного обсудили основные компоненты в этом проекте. Сегодня мы поговорим о модулях в AngularJS 2.

Модуль — это группа компонентов в Angular JS 2. Мы можем импортировать один или несколько модулей в другой модуль, и все связанные с ними будут автоматически импортированы. Нам не нужно беспокоиться об импорте каждого компонента по отдельности.

Если вам интересно узнать об этом больше, я нашел интересную статью здесь: Вы можете попробовать: https://scotch.io/bar-talk/getting-to-know-angular-2s-module- ngmodule

Как организовать модули?

Стандартного способа группировки модулей нет, но рекомендации таковы:

  1. Особенности как модуль
  2. Общие утилиты как модуль

ОСОБЕННОСТИ КАК МОДУЛЬ

Итак, в нашем приложении у нас есть функция планировщика и целей, каждая функция имеет несколько компонентов/каналов/директив. Возьмем, к примеру:

  • Планировщик: PlannerListComponent, PlannerHeaderComponent, PlannerFooterComponent, PlannerService
  • Цель: GoalListComponent, GoalHeaderComponent, CreateGoalComponent, GoalService

Поскольку эти функции не зависят друг от друга, мы можем создать два модуля: PlannerModule и GoalModule, а затем импортировать эти модули в LayoutModule позже.

Архитектура модуля

  • Declarations — поместите все ваши компоненты/директивы/каналы, которые вы создали в этом модуле. Если вы не объявите его, вы не сможете использовать его в этом модуле.
  • Импорт — извлеките все модули, которые вы хотите импортировать, в этот модуль.
  • Поставщики — перетащите сюда все службы.
  • Bootstrap — этот вопрос мне до сих пор неясен. Но я думаю, что он нам нужен только там, где объявляется корневой модуль. Итак, в нашем случае это LayoutModule
  • Экспорт — извлеките все компоненты, директивы, каналы, которые вы хотите предоставить другим модулям, которые импортируют этот модуль.

Объявленный компонент, директива или канал, которые не помещены в список экспорта, всегда будут приватными для модуля.

Кодовая база

Я создал небольшую демонстрацию, чтобы объяснить это. Вы можете загрузить код из базы кода с веткой «day_3» и увидеть, что мы импортируем PlannerModule в LayoutModule и используем его.

Скачать код отсюда:



CodeSnooker/silver-doe
silver-doe — онлайн-планировщикgithub.com



Завтра мы немного поработаем над модулем планировщика, а также начнем работу над другим модулем.

Ссылки на путешествие: