Официальный Угловая документация описывает это хорошо, но угловой-кли автоматически создает структуру относительно простого проекта.
Но по мере ее развития сложность неизбежно растет и возникает естественная потребность как-то управлять этой сложностью.
В том числе и из-за разложения.
( Изображение взято из статьи «12 вещей, которые помогут крупным организациям правильно использовать Angular» ) Данная публикация представляет собой практическое осмысление статей «12 вещей, которые помогут крупным организациям правильно использовать Angular» (Виктор Савкин, сооснователь Narwhal Technologies ( nrwl.io ) И «Angular: понимание модулей и сервисов» (Мишель Стивенс, веб-разработчик и энтузиаст JS) через призму собственного опыта работы с фреймворком.
Задача
Организуйте исходный код семейства приложений с общими библиотеками так, чтобы он отвечал следующим требованиям:- Моно-репозиторий — весь исходный код в одном репозитории с единым пакетом node_modules для всех веб-приложений и библиотек.
- Совместимость С угловой-кли без дополнительных дополнений и расширений
- Возможность несмотря ни на что компилировать библиотеки и создавать веб-приложения друг из друга.
Образец заявления
Например, создадим рабочий прототип приложения.приложение-герой с зависимой библиотекой общая библиотека .
Например, достаточно двух компонентов, но на практике их количество может быть любым в разумных пределах.
Организация кода
Видимо, основная концепция угловой-кли заключается в создании рабочего пространства для семейства проектов, а не рабочего каталога только для одного.В любом случае собственность Программы как массив в .
angular-cli.json намекает на это тонко.
Мы воспользуемся этой возможностью.
Давайте создадим, используя стандартный новое рабочий каталог, а затем немного его модифицируйте, поместив приложение и библиотеку в отдельную папку в источник — по сути, это будет корневая папка для всех остальных «кирпичиков» нашего решения.
Затем мы модифицируем .
angular-cli.json чтобы он адекватно воспринимал наши изменения в структуре проекта: 
(Примечание: изначально казалось, что все просто, но были (и есть) небольшие сюрпризы с относительными путями и тем, как angular-cli их обрабатывает) Хотелось сохранить код библиотеки максимально чистым, но так как для нормальной работы угловой-кли требует определенных значений в .
angular-cli.json , то все файлы, часть из которых ненужные, а часть просто общие для всех файлов, поместим в папку источник/_common .
Импорт библиотек
Использование общей корневой папки источник весь код технически упрощает импорт необходимых файлов, но код выглядит так:это не только выглядит ужасно эстетически, но и создает проблемы, если мы позже решим опубликовать наши библиотеки как независимые пакеты npm. Хороший, возможность конфигурации tsconfig.json элегантно решает эту проблему.import {FooBarComponent} from './.
/.
/.
/.
/foo-bar.component';
Результат
Теперь с каждым компонентом общей архитектуры можно работать независимо, декомпозируя решение, а общая кодовая база позволяет собирать необходимые модули и приложения «из кирпичиков».
Важный акцент: это не способ создания «настоящих» библиотек для Angular (это отдельная история, как здесь этот ), а дан только способ организации кода для достаточно сложного проекта (есть и другие более профессиональные решения для решения той же задачи инструменты ).
Послесловие
Чтобы не отвлекать от основной темы статьи, ряд интересных моментов, таких как:- Подключение сторонних библиотек и стилей и перенос настроек подключения в общий код
- Использование глобальных стилей для стилизации вложенных компонентов
- Связь цлиб (помощники TypeScript), чтобы немного уменьшить размер пакета.
- Методы организации приложений: AppRootModule, модуль "features", структура папок.
модули (используйте index.ts с реэкспортом)
- Особенности импорта модулей между корневыми и дочерними лениво загружаемыми модулями (с использованием Module.forRoot)
проект на GitHub или в статьях, на которые есть ссылки в тексте.
Теги: #angular #JavaScript #архитектура приложения #angular
-
Вторгшийся О Нетленности.
19 Oct, 24 -
Дайте Мне Пищу Для Размышлений!
19 Oct, 24
