Обзор структуры проекта
Изучите файлы, которые создаёт CLI.
«Обзор структуры проекта» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Объяснение структуры проекта
Рабочая область Angular имеет предсказуемую структуру. Знание основных файлов и папок помогает ориентироваться в любом проекте.
Папка src
Папка src/ содержит исходный код приложения: точку входа, код приложения и общие ресурсы, такие как index.html и таблицы стилей.
main.ts
src/main.ts — точка входа приложения. В нём корневой компонент запускается с помощью bootstrapApplication.
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, appConfig);index.html
src/index.html — единственная HTML-страница. В её теле находится селектор корневого компонента, в котором Angular отображает приложение.
<!-- inside body -->
<!-- <app-root></app-root> -->Папка app
Папка src/app/ содержит компоненты, службы, маршруты и конфигурацию. Новый проект включает app.component, app.config.ts и app.routes.ts.
Файлы app.component
Корневой компонент обычно состоит из класса .ts, шаблона .html и таблицы стилей .css (или .scss), а также файла теста .spec.ts.
app.config.ts
app.config.ts экспортирует ApplicationConfig с массивом поставщиков, используемым при запуске, например маршрутизатором и клиентом HTTP.
app.routes.ts
app.routes.ts экспортирует массив определений маршрутов, используемый функцией provideRouter.
import { Routes } from '@angular/router';
export const routes: Routes = [];angular.json
В корне рабочей области файл angular.json настраивает CLI: цели сборки, пути вывода, ресурсы, таблицы стилей и параметры запуска для каждого проекта.
package.json и tsconfig
package.json содержит список зависимостей и сценариев npm. Файлы tsconfig.json настраивают компилятор TypeScript для приложения и тестов.
public или assets
Статические файлы (изображения, шрифты, значок сайта) находятся в папке public или assets и копируются в результат сборки в соответствии с настройками angular.json.
Быстрая проверка: структура
Определите точку входа.
Повторение: структура
Вы изучили рабочую область: src/ для исходного кода, main.ts как точку входа, index.html как страницу-хост, app/ для компонентов и конфигурации и angular.json для настройки CLI. Далее: генерация кода с помощью CLI.
Часто задаваемые вопросы
Урок «Обзор структуры проекта» бесплатный?
Да — полный текст урока «Обзор структуры проекта» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обзор структуры проекта»?
Изучите файлы, которые создаёт CLI. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Обзор структуры проекта»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Создание нового проекта
- Обзор структуры проекта
- Генерация кода с помощью ng generate
- Сборка и запуск