Рабочее пространство и структура файлов проекта¶

24.04.2023

Вы разрабатываете приложения в контексте рабочего пространства Angular workspace. Рабочее пространство содержит файлы для одного или нескольких проектов.

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

Команда Angular CLI ng new создает рабочее пространство.

1

ng new <my-project>

Когда вы выполняете эту команду, CLI устанавливает необходимые пакеты Angular npm и другие зависимости в новое рабочее пространство с приложением корневого уровня с именем my-project. Корневая папка рабочего пространства содержит различные файлы поддержки и конфигурации, а также файл README со сгенерированным описательным текстом, который вы можете настроить.

По умолчанию ng new создает начальное скелетное приложение на корневом уровне рабочего пространства вместе с его сквозными тестами. Этот скелет предназначен для простого приложения Welcome, которое готово к запуску и легко модифицируется.

Приложение корневого уровня имеет то же имя, что и рабочее пространство, а исходные файлы находятся в подпапке src/ рабочего пространства.

Такое поведение по умолчанию подходит для типичного стиля разработки "multi-repo", когда каждое приложение находится в своем собственном рабочем пространстве. Начинающим и средним пользователям рекомендуется использовать ng new для создания отдельного рабочего пространства для каждого приложения.

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

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

Для настройки рабочего пространства монорепо следует пропустить создание корневого приложения. Смотрите Настройка рабочего пространства для мультипроекта ниже.

Файлы конфигурации рабочего пространства¶

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

Файлы проекта приложения¶

По умолчанию команда CLI ng new my-app создает папку рабочего пространства с именем "my-app" и генерирует скелет нового приложения в папке src/ на верхнем уровне рабочего пространства. Вновь созданное приложение содержит исходные файлы для корневого модуля, с корневым компонентом и шаблоном.

Когда файловая структура рабочего пространства создана, вы можете использовать команду ng generate в командной строке для добавления функциональности и данных в приложение. Это начальное приложение корневого уровня является приложением по умолчанию для команд CLI (если вы не измените значение по умолчанию после создания дополнительных приложений).

Для рабочего пространства с одним приложением подпапка src рабочего пространства содержит исходные файлы (логика приложения, данные и активы) для корневого приложения. Для многопроектного рабочего пространства дополнительные проекты в папке projects содержат подпапку project-name/src/ с такой же структурой.

Исходные файлы приложения¶

Файлы верхнего уровня src/ поддерживают тестирование и запуск вашего приложения. Вложенные папки содержат исходный код приложения и конфигурацию, специфичную для приложения.

Внутри папки src находится папка app, содержащая логику и данные проекта. Компоненты Angular, шаблоны и стили находятся здесь.

Файлы конфигурации приложения¶

Конфигурационные файлы, специфичные для корневого приложения, находятся на уровне корня рабочего пространства. Для многопроектного рабочего пространства файлы конфигурации, специфичные для проекта, находятся в корне проекта, в разделе projects/project-name/.

Конфигурационные файлы для конкретного проекта TypeScript наследуются от конфигурационного файла рабочего пространства tsconfig.json.

Несколько проектов¶

Многопроектное рабочее пространство подходит для предприятия, которое использует единое хранилище и глобальную конфигурацию для всех проектов Angular (модель "monorepo"). Многопроектное рабочее пространство также поддерживает разработку библиотек.

Настройка многопроектного рабочего пространства¶

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

1

ng new my-workspace --no-create-application

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

1
2

cd my-workspace
ng generate application my-first-app

Структура файлов нескольких проектов¶

Первое явно созданное приложение попадает в папку projects вместе со всеми остальными проектами в рабочей области. Вновь созданные библиотеки также добавляются в папку projects.

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

1
2
3
4
5
6
7
8
9

my-workspace
    …                  (workspace-wide config files)
    projects           (generated applications and libraries)
        my-first-app   --(an explicitly generated application)
            …          --(application-specific config)
            src        --(source and support files for application)
        my-lib         --(a generated library)
            …          --(library-specific config)
            src        --(source and support files for library)

Файлы проекта библиотеки¶

Когда вы создаете библиотеку с помощью CLI (с помощью такой команды, как ng generate library my-lib), созданные файлы помещаются в папку projects/ рабочего пространства. Более подробную информацию о создании собственных библиотек смотрите в Создание библиотек.

Библиотеки, в отличие от приложений, имеют свой собственный конфигурационный файл package.json.

В папке projects/ находится папка my-lib, содержащая код вашей библиотеки.

Ссылки¶

• Workspace and project file structure

Комментарии