Угловое рабочее пространство и структура файла проекта
Рабочая область может быть определена как набор файлов для одного или нескольких проектов. Коллекция проектов составляет рабочее пространство.
Проект - это набор файлов, которые включают в себя отдельное приложение, библиотеку или пакет или набор сквозных тестов.
При создании приложения Angular команда Angular CLI `ng new <имя_проекта>` помогает нам начать работу. Когда мы запускаем эту команду, CLI устанавливает необходимые пакеты Angular npm и другие зависимости в новое рабочее пространство с корневой папкой с именем project_name .
Он также создает следующие рабочие файлы и файлы стартового проекта:
- Первоначальный проект приложения скелета (в подпапке src /).
- Сквозной тестовый проект (в подпапке e2e /).
- Связанные файлы конфигурации.
Первоначальный проект приложения содержит простое приветственное приложение, готовое к запуску.
В этом руководстве мы рассмотрим структуру файлов Angular и функции некоторых из этих файлов конфигурации.
Файлы рабочей области
Верхний уровень рабочей области содержит ряд файлов конфигурации всей рабочей области.
| Файлы конфигурации рабочей области | Назначение файла конфигурации |
|---|---|
| .editorconfig | Конфигурация для редакторов кода. |
| .gitignore | Определяет намеренно не отслеживаемые файлы, которые Git должен игнорировать. |
| angular.json | Параметры конфигурации CLI по умолчанию для всех проектов в рабочей области, включая параметры конфигурации для инструментов сборки, обслуживания и тестирования который использует CLI, такой как TSLint, Karma и Protractor. |
| node_modules | Предоставляет пакеты npm для всего рабочего пространства. |
| package.json | Настраивает и отслеживает зависимости пакета npm, доступные для всех проектов в рабочей области. |
| Пакет-lock.json | Предоставляет информацию о версии для всех пакетов, установленных в node_modules клиентом npm. Если вы используете клиент пряжи, этот файл будет вместо yarn.lock. |
| tsconfig.json | Конфигурация TypeScript по умолчанию для приложений в рабочей области, включая параметры компилятора шаблонов TypeScript и Angular. |
| tslint.json | Конфигурация TSLint по умолчанию для приложений в рабочей области. |
| README.md | Вводная документация для приложения |
Файлы проекта приложения по умолчанию
Команда CLI `ng new my-app` создает папку рабочей области с именем« my-app »и генерирует новый скелет приложения. Это начальное приложение является приложением по умолчанию для команд консоли (если только вы не измените настройки по умолчанию после создания дополнительных приложений).
Вновь созданное приложение содержит исходные файлы для корневого модуля, с корневым компонентом и шаблоном. Когда структура файла рабочей области установлена, вы можете использовать команду `ng generate` в командной строке, чтобы добавить функциональность и данные в исходное приложение.
Помимо использования интерфейса командной строки в командной строке, вы также можете использовать интерактивную среду разработки, такую как Angular Console, или манипулировать файлами непосредственно в исходной папке приложения и файлах конфигурации.
Подпапка src / содержит исходные файлы (логику приложения, данные и ресурсы), а также файлы конфигурации для исходного приложения. Зависимости node_modules рабочей области видны для этого проекта.
| Источник приложения и Конфигурационные файлы | Назначение файлов конфигурации |
|---|---|
| .приложение/ | Содержит файлы компонентов, в которых определены логика и данные вашего приложения. |
| .assets / | Содержит файлы изображений и другие файлы ресурсов, которые будут скопированы как есть при создании приложения. |
| среда / | Содержит параметры конфигурации сборки для определенных целевых сред. По умолчанию существует неназванная стандартная среда разработки и производственная («прод») среда. Вы можете определить дополнительные конфигурации целевой среды. |
| browserslist | Настраивает совместное использование целевых браузеров и версий Node.js между различными интерфейсными инструментами. |
| favicon.ico | Значок для использования в этом приложении на панели закладок. |
| index.html | Основная HTML-страница, которая обслуживается, когда кто-то посещает ваш сайт. CLI автоматически добавляет все файлы JavaScript и CSS при создании приложения, поэтому обычно вам не нужно добавлять какие-либо теги <script> или <link> вручную. |
| main.ts | Основная точка входа для вашего приложения. Компилирует приложение с помощью JIT-компилятора и загружает корневой модуль приложения (AppModule) для запуска в браузере. Вы также можете использовать компилятор AOT без изменения какого-либо кода, добавив флаг -–aot к командам сборки и обслуживания CLI. |
| polyfills.ts | Предоставляет сценарии polyfill для поддержки браузера. |
| styles.sass | Перечисляет CSS-файлы, которые предоставляют стили для проекта. Расширение отражает стиль препроцессора, который вы настроили для проекта. |
| test.ts | Основная точка входа для ваших юнит-тестов, с некоторой специфичной для Angular конфигурацией. Вам обычно не нужно редактировать этот файл. |
| tsconfig.app.json | Унаследован от файла tsconfig.json, работающего по всей рабочей области. |
| tsconfig.spec.json | Унаследован от файла tsconfig.json, работающего по всей рабочей области. |
| tslint.json | Унаследован от файла tslint.json, работающего по всей рабочей области. |
Файлы проекта приложения e2e по умолчанию
Подпапка e2e / содержит файлы конфигурации и исходные файлы для набора сквозных тестов, которые соответствуют исходному приложению. Зависимости node_modules рабочей области видны для этого проекта.
my-app/
e2e/(end-to-end test app for my-app)
src/(app source files)
protractor.conf.js(test-tool config)
tsconfig.e2e.json(TypeScript config inherits from workspace tsconfig.json)
Исходная папка приложения
Внутри папки src / приложение / папка содержит логику и данные вашего приложения. Здесь находятся угловые компоненты, шаблоны и стили. Ресурс / подпапка содержит изображения и все остальное, что нужно вашему приложению. Файлы на верхнем уровне тестирования src / support и запуска вашего приложения.
| Исходные файлы приложения | Функции исходных файлов |
|---|---|
| .app / app.component.ts | Определяет логику для корневого компонента приложения с именем AppComponent. Представление, связанное с этим корневым компонентом становится корнем иерархии представлений при добавлении компонентов и сервисов в ваше приложение. |
| .app / app.component.html | Определяет шаблон HTML, связанный с корневым AppComponent. |
| Приложение / app.component.css | Определяет базовую таблицу стилей CSS для корневого AppComponent. |
| приложение / app.component.spec.ts | Определяет юнит-тест для корневого AppComponent. |
| приложение / app.module.ts | Определяет корневой модуль с именем AppModule, который сообщает Angular, как собирать приложение. Первоначально объявляет только AppComponent. Поскольку вы добавляете больше компонентов в приложение, они должны быть объявлены здесь. |
| активы / * | Содержит файлы изображений и другие файлы ресурсов, которые будут скопированы как есть при создании приложения. |
Предыдущий: Начало работы с Angular
Далее: Обзор архитектуры
Новый контент: Composer: менеджер зависимостей для PHP , R программирования