Модуль 5

Структура Angular-проєкту та файли конфігурації

Ось твій урок у стилі David Malan. Вмикай уяву, ми починаємо! 🚀

🏛 Структура Angular-проєкту та файли конфігурації

Привіт, друзі! 👋

Сьогодні ми не просто пишемо код. Сьогодні ми стаємо архітекторами.

1. 🔥 Вступ: Хаос чи Порядок?

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

Що вийде з такого будівництва? Хаос.

Коли ви вперше запускаєте команду ng new my-app, Angular створює для вас ціле "місто" з папок та файлів. Новачків це часто лякає: "Навіщо мені 30 файлів, щоб просто написати 'Hello World'?"

Гарне запитання! Але запитайте себе: * Як браузер дізнається, який файл запускати першим? * Хто стежить за тим, щоб ваш сучасний TypeScript код зрозуміли старі браузери? * Де зберігаються правила вашого "будівництва"?

Без розуміння структури проєкту ви — як турист без карти у величезному мегаполісі. Ви можете випадково зайти не туди й зламати все, або блукати годинами в пошуках простого налаштування.

Сьогодні ми розберемо цей "хмарочос" по цеглинці, щоб ви почувалися тут як вдома.

2. 🧠 Теоретична база: Анатомія проєкту

Давайте заглянемо "під капот". Angular-проєкт — це не просто набір скриптів, це екосистема.

Уявіть собі великий Офісний Центр.

📂 Головні директорії та файли

  1. package.json (Склад і Бухгалтерія) 📦

    • Це список усього, що потрібно вашому проєкту для життя. Які бібліотеки ми "купили" (React? Ні, Angular!), які версії використовуємо.
    • Також тут є скрипти — команди для "робітників": start (запустити), build (збудувати), test (перевірити).
    • Що запам'ятати: Тут ми керуємо залежностями (dependencies).

  2. angular.json (Генеральний план / Архітектор) 🏗

    • Це найголовніший файл конфігурації саме для Angular CLI.
    • Він каже: "Ось тут лежать вихідні коди (src), а ось сюди треба складати готовий продукт (dist). А ось ці картинки (assets) треба скопіювати як є".
    • Інтуїтивно: Це інструкція для будівельного крана.

  3. tsconfig.json (Правила мови / Граматична поліція) 👮‍♂️

    • Ми пишемо на TypeScript, але браузери розуміють JavaScript. Цей файл задає правила перекладу. Наприклад: "Чи дозволяти неявні типи даних?" або "Наскільки суворо перевіряти помилки?".

  4. src/ (Робоча зона) 🛠

    • Тут відбувається магія. Тут живе ваш код.
    • main.ts: Це "кнопка запуску". Вхідна точка, з якої починається виконання програми.
    • index.html: Єдина HTML-сторінка у нашому Single Page Application (SPA). Це "рама" для картини, яку малює Angular.
    • app/: Тут живуть ваші Компоненти, Сервіси, Моделі.

Як це працює разом?

Коли ви пишете ng serve: 1. Webpack (будівельник) дивиться в angular.json. 2. Знаходить main.ts. 3. Компілює TypeScript згідно з tsconfig.json. 4. Збирає все в купу і вставляє скрипти в index.html. 5. Ви бачите сайт у браузері! 🎉

3. 🧪 Приклади: Від простого до реального

Давайте подивимось на це очима.

Приклад 1: "Вхідні двері" (index.html)

Відкрийте файл src/index.html. Що ви очікуєте там побачити? Купу коду?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <app-root></app-root> <!-- 👈 ВСЯ МАГІЯ ТУТ -->
</body>
</html>

Пояснення: Бачите тег <app-root>? Це не стандартний HTML. Це маркер, куди Angular "вмонтує" ваш додаток. Весь ваш величезний сайт завантажиться саме між відкриваючим і закриваючим тегом <app-root>.

Приклад 2: "Список покупок" (package.json)

Погляньмо на package.json.

{
  "name": "my-dream-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test"
  },
  "dependencies": {
    "@angular/animations": "^17.0.0",
    "@angular/common": "^17.0.0",
    ...
  }
}

Питання: Якщо я хочу запустити проєкт, яку команду я можу ввести в терміналі, дивлячись на секцію scripts? Відповідь: npm start. Вона своєю чергою викличе ng serve. Це як шорткат на робочому столі.

Приклад 3: "Кнопка старт" (main.ts)

Це трохи складніше. Як Angular розуміє, що треба почати малювати?

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Аналогія: bootstrapApplication — це як запалення в машині. Ми кажемо: "Запусти (bootstrap) машину, використовуючи головний двигун (AppComponent) і ось ці налаштування (appConfig)".

4. 🛠 Практична частина

Час забруднити руки! Відкрийте свій редактор коду (VS Code).

Завдання 1: Шпигун 🕵️‍♂️ Знайдіть файл angular.json. Знайдіть рядок "outputPath": "dist/...". * Змініть назву папки на "dist/my-super-build". * Запустіть у терміналі ng build. * Перевірте, яка папка з'явилася у вашому проєкті.

Завдання 2: Зміна заголовка ✏️ Зайдіть у src/index.html. Змініть <title> на ваше ім'я. Перезапустіть проєкт (ng serve). Подивіться на вкладку браузера. Чи змінилося це динамічно? (Спойлер: так, але це статичний заголовок, пізніше ми навчимося міняти його з коду).

Завдання 3: Власний скрипт 📜 У файлі package.json у секцію "scripts" додайте: "hello": "echo 'Привіт, я вивчаю Angular!'" Запустіть у терміналі npm run hello. Що ви побачили?

Завдання 4: Міні-кейс "А що, якщо..." 🤔 Що станеться, якщо ви видалите папку node_modules? * Гіпотеза: Проєкт перестане працювати. * Дія: Видаліть її (або перейменуйте). Спробуйте запустити ng serve. * Вирішення: Як це полагодити? Яка команда читає package.json і повертає все назад? (Підказка: npm install).

5. 💡 Мислення як у розробника

Ви починаєте думати як Senior Developer, коли перестаєте боятися файлів, які не створювали.

🚫 Типові помилки новачків:

  1. Ручне створення файлів. Новачки створюють файли компонентів вручну (my.component.ts), забуваючи про шаблони і стилі.
    • Як треба: Використовуйте CLI! ng generate component my-comp. Це швидко і без помилок.
  2. Редагування node_modules. Ніколи, чуєте, НІКОЛИ не змінюйте нічого в цій папці. При наступному оновленні (npm install) ваші зміни зникнуть.
  3. Ігнорування angular.json. Коли треба додати глобальні стилі (наприклад, Bootstrap.css), новачки намагаються пхати їх у HTML. Правильне місце часто — секція styles в angular.json.

🧠 Як думає профі:

  • "Я не повинен тримати в голові весь бойлерплейт (шаблонний код). Я маю знати, де його знайти."
  • "Конфігурація — це теж код. Якщо щось працює на моєму комп'ютері, але не працює у колеги — проблема, швидше за все, у package.json (версії) або змінних середовища."

6. 🧩 Підсумок

Отже, що ми маємо?

  1. package.json — список інгредієнтів.
  2. angular.json — креслення будівлі.
  3. src/main.ts — ключ запалювання.
  4. src/index.html — вітрина магазину.

Тепер ви не просто "кодер", який сліпо копіює команди. Ви розумієте структуру свого цифрового хмарочоса. Ви знаєте, де лежать труби, а де — проводка.

Що далі? Тепер, коли ми підготували фундамент, нам потрібні цеглини, щоб будувати стіни. У наступному уроці ми поговоримо про Компоненти — будівельні блоки Angular.

Як з однієї "цеглини" зробити кнопку, картку товару чи цілу сторінку?

До зустрічі на коді! 💻✨

← До списку уроків Наступний урок →