Angular для начинающих: структура проекта и первый компонент

Структура файлов проекта

Проект Angular содержит несколько важных папок. Главная – src (source), в которой находятся файлы веб-приложения.

Основные файлы в src:

index.html: Основной шаблон страницы, содержащий тег <app-root>, служащий заполнитель для основного компонента. Этот тег, не являющийся стандартным HTML-тегом, используется Angular. Контент внутри <app-root> отображается на странице.
app (папка): Основной компонент приложения, включающий:
- app.component.html: HTML-разметка компонента.
- app.component.css: CSS-стили компонента.
- app.component.ts: Логика компонента (TypeScript код).
Другие файлы в src: Вспомогательные файлы, например, favicon.ico.

Помимо src, есть другие файлы:

angular.json: Файл конфигурации Angular. Содержит информацию о проекте (имя, версия), скрипты (ng serve, ng build, ng test), и зависимости (библиотеки для анимации, форм, HTTP-запросов, TypeScript). Хотя мы напрямую с ним работать не будем, он важен.
package.json: Информация о зависимостях проекта, скрипты и метаинформация.
tsconfig.json и другие файлы конфигурации: Настройки проекта. Например, в angular.cli.json (если он существует) можно указать пути к стилям (например, src/styles.css) и скриптам.
e2e (папка): Файлы end-to-end тестирования. В рамках данного курса рассматриваться не будет.

Создание нового компонента

Для организации компонентов рекомендуется создавать отдельную папку. Создадим папку components внутри src. Компоненты можно создавать вручную, но удобнее использовать команду в терминале:

ng generate component components/car

Эта команда создаст компонент car в папке components, включая файлы:

car.component.css
car.component.html
car.component.spec.ts (файл для юнит-тестов)
car.component.ts

car.component.ts содержит конструктор и метод ngOnInit. Конструктор вызывается при создании компонента, а ngOnInit – после инициализации. В них можно проводить инициализацию данных.

В app.component.html добавим тег <app-car></app-car> для вывода нового компонента. Теперь на странице будет отображаться контент из car.component.html.

Для подключения Bootstrap можно добавить в index.html ссылку на CDN Bootstrap.

В этом уроке мы изучили структуру файлов проекта Angular и создали новый компонент. В следующих уроках продолжим работу с компонентами.