Модуль угловых функций против общего модуля

Question

У меня вопрос по официальному руководству по стилю Angular о функциональных модулях.

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

| Имя | Возраст |
| Питер | 25 |
| > Автомобили | Бренд | Модель |
| | Toyota | Corolla |
| | > Лица | Имя | Возраст |
| | | Питер | 25 |
| | | Фред | 35  |
| Ганс | 28 |
| Фред | 35  |

Поэтому у меня круговая зависимость, так как person-table -> car-table -> person-table поступают из двух разных функциональных модулей. Можно ли было бы переместить персональную таблицу и автомобильную таблицу в SharedModule, чтобы полностью заполнить вариант использования?

Answer 1

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

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

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

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

Типичная для меня структура проекта:

src/app
+-- lazy
+-- main
+-- shared

• /src/app/lazyсодержит подпапки ленивых модулей.
• /src/app/main содержит AppModule это загружено.
• /src/app/sharedсодержит подпапки по одному компоненту на каталоги модуля

Типичный ленивый модуль будет иметь такую ​​структуру

src/app/lazy/feature
+-- OutletFeature
+-- feature.module.ts
+-- feature-routing.module.ts

• /src/app/lazy/feature содержит модуль и маршрутизацию
• /src/app/lazy/feature/OutletFeature - целевой компонент для ленивого маршрута.

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

Общая папка содержит компоненты.

src/app/shared/Example
+-- Example/example.component.ts
+-- example.module.ts

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

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

Библиотека Angular Material использует в качестве примера один компонент на каждый модуль. У них есть собственный процесс сборки, который сначала делает структуру их исходного кода немного запутанной, но как только вы попадете в раздел компонентов, все будет одним компонентом.

https://github.com/angular/components