Что такое CommonModule в Angular

Введение

Привет и спасибо, что заглянули!

Итак, что такое CommonModule? Вы видели его, знаете, что он поставляет *ngIf, *ngFor и так далее, но что еще у нас есть?

В документации говорится, что он снова реэкспортирован в BrowserModule... но почему?

Что такое CommonModule в Angular

Чтобы понять, что именно представляет собой CommonModule, мы должны сначала прояснить, что именно является модулем и что он делает для нас.

В Angular мы говорим, что создаем модульные приложения, потому что мы охватываем и группируем вместе различные сущности. С помощью модулей мы объявляем и предоставляем эти самые сущности.

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

Чтобы использовать компоненты и директивы из этого модуля, мы должны обеспечить его существование в Angular. Это означает импортировать его в другие модули, которые требуют эти компоненты.

Итак, чтобы подвести итог и объяснить, CommonModule - это модуль Angular, который содержит и экспортирует компоненты Angular, директивы и трубы.

Проверки app.module.ts достаточно, чтобы понять, почему его реэкспорта в BrowserModule достаточно, чтобы получить доступ к компонентам CommonModule в модуле app.

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

Нужен ли вам CommonModule, если вам не нужен CommonModule?

Когда вы создаете новый модуль с помощью Angular CLI, он автоматически добавляет CommonModule в импорт. Но поскольку мы уже знаем, что он предназначен только для экспорта базовых утилит, вы можете смело удалить его, и все будет работать нормально.

Итак... Удалять ли его, если вы не собираетесь ничего из него использовать? Ну, я всегда оставляю его там, но я оставляю это решение на ваше усмотрение.

CommonModule ведет себя так же, как и любой другой модуль.

Если у вас есть SharedModule, вы можете импортировать и экспортировать ваш CommonModule туда, и импорта SharedModule будет достаточно, чтобы получить доступ ко всем компонентам CommonModule, директивам и трубам.

Это может быть полезно, если вы планируете оптимизировать импорт.

Компоненты CommonModule

Я считаю, что для хорошего понимания необходимо изучить исходники, а не документацию.

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

Давайте сначала проверим директиву. Если мы перейдем к пакету common в официальном репозитории Angular, то увидим индексный файл, который экспортирует все директивы Angular.

• NgClass - добавление или удаление CSS-классов из HTML-элемента на основе булева выражения.
• NgComponentOutlet - динамическое отображение компонента на основе предоставленного типа компонента
• NgFor - циклическое прохождение по массиву или итерабельной таблице и отрисовка шаблона для каждого элемента
• NgForOf - разновидность NgFor
• NgForOfContext - класс, представляющий контекст, в котором выполняется рендеринг NgForOf, и предоставляющий свойства и методы для доступа к информации о текущем рендерируемом элементе
• NgIf - условный рендеринг HTML-элементов на основе булева выражения
• NgIfContext - класс, представляющий контекст, в котором происходит рендеринг NgIf, и предоставляющий свойства и методы для доступа к информации о текущем состоянии директивы
• NgPlural - условно отображает HTML-элементы на основе числового значения и обеспечивает поддержку нескольких форм множественного числа
• NgPluralCase - используется внутри NgPlural для определения шаблона для определенного падежа множественного числа, например, "один", "несколько" или "много".
• NgStyle - добавление или удаление стилей CSS из элемента HTML на основе булева выражения.
• NgSwitch - условный рендеринг HTML-элементов на основе заданного значения, поддерживает несколько случаев
• NgSwitchCase - используется внутри NgSwitch для определения шаблона для конкретного значения случая
• NgSwitchDefault - используется внутри NgSwitch для определения шаблона, который отображается, когда ни один из случаев не соответствует предоставленному значению.
• NgTemplateOutlet - динамическое отображение шаблона путем указания ссылки на шаблон для отображения

Сделаем то же самое для труб

• AsyncPipe - подписывается на Observable или Promise и выводит испускаемое или разрешаемое значение в шаблоне
• CurrencyPipe - форматирует числовое значение как валюту в соответствии с заданным кодом и форматом валюты
• DATE_PIPE_DEFAULT_OPTIONS - константа, определяющая параметры по умолчанию для DatePipe, такие как формат и локаль.
• DATE_PIPE_DEFAULT_TIMEZONE - константа, определяющая часовой пояс по умолчанию для DatePipe
• DatePipe - форматирование значения даты в соответствии с заданным форматом и часовым поясом
• DatePipeConfig - интерфейс, определяющий параметры конфигурации DatePipe, такие как формат и часовой пояс.
• DecimalPipe - форматирование числового значения в десятичную дробь в соответствии с заданным форматом
• I18nPluralPipe - позволяет интернационализировать плюрализацию текста на основе числового значения и набора правил плюрализации для различных локалей
• I18nSelectPipe - позволяет интернационализировать текст на основе заданного значения и набора переводов для различных локалей
• JsonPipe - преобразование объекта JavaScript в строку JSON
• KeyValue - перебор свойств объекта и вывод шаблона для каждой пары ключ-значение
• KeyValuePipe - преобразование объекта в массив пар ключ-значение, который может быть использован с другими трубами или директивами.
• LowerCasePipe - преобразовать строку в строчный регистр
• PercentPipe - форматирование числового значения в проценты в соответствии с заданным форматом
• SlicePipe - разрезать массив или строку и вернуть ее часть на основе начального и конечного индекса.
• TitleCasePipe - преобразование строки в заглавный регистр, что означает, что первая буква каждого слова пишется заглавными буквами
• UpperCasePipe - преобразование строки в верхний регистр

Заключение

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

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

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