Під час створення проєкту за допомогою Angular CLI автоматично генерується впорядкована структура папок та файлів. Така структура відіграє важливу роль в організації коду, забезпечуючи більш ефективну та масштабовану розробку.

У цьому розділі розглядаються основні папки та файли, які створюються автоматично під час налаштування нового Angular-проєкту.

Структура проєкту

Після виконання команди ng new angular-app Angular CLI створює таку структуру:

📂 src/ – Вихідний код застосунку.

Ця папка містить основні файли та конфігурації, необхідні для роботи вашого Angular-застосунку.

Код застосунку

Конфігураційні файли

Додаткові файли

Запуск Angular-додатку

Щоб запустити Angular-додаток, спочатку відкрийте термінал. У VS Code можна скористатися такими комбінаціями клавіш:

• macOS: Cmd + J або Cmd + `;

• Windows: Ctrl + J або Cmd + `.

Або перейдіть у меню View → Terminal у верхній панелі.

Тепер виконайте наступну команду:

Ця команда компілює проєкт і запускає локальний сервер розробки. Після завершення процесу у терміналі з’явиться повідомлення з URL-адресою:

Відкрийте URL-адресу (http://localhost:4200/) у своєму браузері, і ви побачите вітальну сторінку Angular.