Summary  
This chapter explains the structure of an Angular project by outlining its key folders and configuration files, and shows how the application is bootstrapped and served using Angular CLI.  

General domain of usage  
Frontend web application development


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

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

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

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

📂 `src/` – **Application Source Code**.

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

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

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

- **macOS**: `Cmd + J` або `` Cmd + ` ``;

- **Windows**: `Ctrl + J` або `` Cmd + ` ``.

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css">
    <link rel="stylesheet" href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css">
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="ng serve
">
      
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z" fill="#a6b8e6"></path>
          </g>
        </svg>
      </button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

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

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

Яке основне призначення папки `src` в Angular-проєкті?

Яка роль `package.json` в Angular-проєкті?

Дізнайтеся, як створювати сучасні вебзастосунки за допомогою Angular — одного з найпотужніших фреймворків для фронтенду. Ви почнете з основних концепцій, налаштуєте середовище розробки та поступово перейдете до створення динамічних, інтерактивних компонентів. У процесі навчання ви працюватимете з директивами, сервісами, маршрутизацією та новітнім підходом із використанням Standalone Components. На кожному етапі ви здобуватимете практичні навички для впевненого розроблення та організації застосунків Angular відповідно до галузевих стандартів.

Ознайомтеся з основними концепціями Angular та дізнайтеся, як цей фреймворк спрощує веброзробку. Дізнайтеся про ключові принципи, еволюцію та налаштування необхідних інструментів для початку створення застосунків.

Ознайомлення з основами компонентів і шаблонів у Angular, включаючи їх створення, структурування та взаємодію для побудови динамічних, орієнтованих на дані застосунків.

Зануртеся у директиви та пайпи Angular, щоб дізнатися, як вони роблять ваші шаблони розумнішими, а дані чистішими. Дізнайтеся, як керувати поведінкою DOM за допомогою директив і трансформувати відображувані дані за допомогою потужних вбудованих або власних пайпів.

Дізнайтеся, як організовувати та повторно використовувати логіку у ваших Angular-додатках за допомогою сервісів. Ви ознайомитеся зі створенням сервісів та їх впровадженням у компоненти за допомогою вбудованої системи впровадження залежностей Angular. Це дозволяє підтримувати ваш код чистим, модульним і легким для супроводу.

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

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

Структура Проєкту Angular

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

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

Файли конфігурації

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

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

1. Яке основне призначення папки `src` в Angular-проєкті?

2. Яка роль `package.json` в Angular-проєкті?