Понимание структуры папок Angular

Введение

Прежде чем приступить к работе, проверьте, установлены ли на вашем компьютере node, npm и angular, выполнив эти команды. Вот ссылка для начала работы с Angular.

Общие термины в Angular

Рабочее пространство содержит файлы для одного или нескольких проектов. Команда ng new создает рабочую область, она создает начальный каркас приложения на корневом уровне рабочей области.

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

Подпапкаsrc/ рабочей области содержит исходные файлы.

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

.editorconfig содержит конфигурацию для редакторов кода.

.gitignore this файл указывает намеренно неотслеживаемые файлы, которые git должен игнорировать.

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

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

package.json it настраивает зависимости пакетов npm, которые доступны для всех проектов в рабочей области.

package-lock.json it предоставляет информацию о версии для всех пакетов, установленных в node_modules клиентом npm.

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

node_modules/ it предоставляет npm-пакеты всему рабочему пространству. Зависимости node_modules всей рабочей области видны всем проектам.

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

tslint.json конфигурация TSLint по умолчанию для проектов в рабочей области.

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

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

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

app/it содержит файлы компонентов, в которых определяется логика и данные вашего приложения.

assets/ it содержит изображения и другие файлы активов, которые будут скопированы как есть при создании приложения.

environments/ it содержит параметры конфигурации сборки для конкретных целевых сред.

favicon.ico иконка для этого приложения на панели закладок.

index.html основная HTML-страница, которая отображается при посещении вашего сайта. Интерфейс командной строки автоматически добавляет все файлы JavaScript и CSS при создании приложения, поэтому обычно вам не нужно добавлять здесь какие-либо теги <script> или <link> вручную.

main.ts основная точка входа для вашего приложения. Компилирует приложение с помощью JIT-компилятора и загружает корневой модуль приложения (AppModule) для запуска в браузере.

polyfills.ts it предоставляет сценарии полифилла для поддержки браузера.

styles.sass перечисляет файлы CSS, которые предоставляют стили для проекта. Расширение отражает препроцессор стиля, который вы настроили для проекта.

test.ts основная точка входа для ваших модульных тестов с некоторой специфичной для Angular конфигурацией. Обычно вам не нужно редактировать этот файл.

Папка приложения

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

app/app.component.ts it определяет логику корневого компонента приложения с именем AppComponent.

app/app.component.htmlit определяет шаблон HTML, связанный с корнем AppComponent.

app/app.component.css он определяет базовую таблицу стилей CSS для корня AppComponent.

app/app.component.spec.ts он определяет модульный тест для корня AppComponent.

app/app.module.ts он определяет корневой модуль с именем AppModule, который сообщает Angular, как собрать приложение.

Другие специфичные для библиотеки файлы

Источник: Угловая документация

Удачного кодирования!!!!!!!!!!!!!!!!!!!