Рабочая область и структура файла проекта
Вы разрабатываете угловые приложения в контексте рабочей области Angular. Рабочая область содержит файлы для одного или нескольких проектов. Проект - это набор файлов, которые включают в себя отдельное приложение, библиотеку или набор сквозных (e2e) тестов.
Команда Angular CLI ng new <имя_проекта> поможет вам начать работу. Когда вы запускаете эту команду, CLI устанавливает необходимые пакеты Angular npm и другие зависимости в новое рабочее пространство с корневой папкой с именем project_name. Он также создает следующие рабочие файлы и файлы стартового проекта:
- Первоначальный скелетный проект приложения, также называемый project_name (в подпапке src /).
- Сквозной тестовый проект (в подпапке e2e /) ./ li>
- Связанные файлы конфигурации.
Первоначальный проект приложения содержит простое приложение Welcome, готовое к запуску.
Файлы рабочей области
Верхний уровень рабочей области содержит несколько файлов конфигурации всей рабочей области, которые включают.
| РАБОЧИЕ КОСМИЧЕСКИЕ ФАЙЛЫ | ЦЕЛЬ |
|---|---|
| .editorconfig | Конфигурация для редакторов кода. Смотрите 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. Конфигурационные файлы TypeScript для конкретного проекта наследуются от tsconfig. *. Json для всей рабочей области, а конфигурационные файлы TSLint для конкретного приложения наследуются от tslint.json для всей рабочей области.
Файлы проекта приложения по умолчанию
Команда CLI ng new my-app создает папку рабочей области с именем «my-app» и создает новый скелет приложения. Это начальное приложение является приложением по умолчанию для команд консоли (если только вы не измените настройки по умолчанию после создания дополнительных приложений).
Вновь созданное приложение содержит исходные файлы для корневого модуля, с корневым компонентом и шаблоном. Когда структура файла рабочей области установлена, вы можете использовать команду ng generate в командной строке, чтобы добавить функциональность и данные в исходное приложение.
Помимо использования интерфейса командной строки в командной строке, вы также можете использовать интерактивную среду разработки, такую как Angular Console, или манипулировать файлами непосредственно в исходной папке приложения и файлах конфигурации.
Подпапка src / содержит исходные файлы (логику приложения, данные и ресурсы), а также файлы конфигурации для исходного приложения. Зависимости node_modules рабочей области видны для этого проекта.
APP SOURCE & CONFIG FILES | ЦЕЛЬ |
приложение/ | Содержит файлы компонентов, в которых определены логика и данные вашего приложения. Подробности см. В папке с исходным кодом приложения ниже. |
активы / | Содержит файлы изображений и другие файлы ресурсов, которые будут скопированы как есть при создании приложения. |
среда / | Содержит параметры конфигурации сборки для определенных целевых сред. По умолчанию существует неназванная стандартная среда разработки и производственная среда («prod»). Вы можете определить дополнительные конфигурации целевой среды. |
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, работающего по всей рабочей области. |
Предыдущая: Интернационализация (i18n)
Далее: Внедрение зависимостей в действии
Новый контент: Composer: менеджер зависимостей для PHP , R программирования