Модуль 4

Створення першого Angular-проєкту

Ось твій урок, створений у дусі CS50. Вмикай уявний прожектор, ми починаємо! 🚀

🎓 CS50: Angular. Епізод 1. Народження проєкту

Привіт, світе! 👋 Мене звати... (ну, ти зрозумів), і це — CS50: Angular Edition.

Сьогодні ми не просто пишемо код. Сьогодні ми перетворюємося з "людей, які пишуть файли в блокноті" на "інженерів, які розгортають інфраструктуру".

Тема нашого заняття: Створення першого Angular-проєкту.

1. 🔥 Вступ: Чому не можна просто написати HTML?

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

Якщо ви будете писати великий веб-додаток (як Gmail, YouTube або банківську систему) на чистому HTML, CSS та JavaScript, ви саме це і робите — будуєте хмарочос із паличок та скотчу. Спочатку це працює, але коли вам треба додати 100-й поверх, вся конструкція завалюється.

Питання до вас:

Скільки часу ви витратите, щоб змінити назву кнопки "Купити" на "Замовити" на 500 сторінках вашого сайту вручну?

Рішення? Фреймворк. Angular — це не просто набір інструментів. Це цілий будівельний комбінат. Він дає вам готові бетонні блоки, крани та навіть виконроба, який стежить, щоб стіни стояли рівно.

Сьогодні ми запустимо цей комбінат і збудуємо наш фундамент.

2. 🧠 Теоретична база: Що там "під капотом"?

Перш ніж ми торкнемося клавіатури, давайте розберемося з магією. Щоб створити Angular-проєкт, нам потрібні три кити:

  1. Node.js: Це двигун. Ваш браузер розуміє JavaScript, але ваш комп'ютер (операційна система) — ні. Node.js дозволяє запускати JS прямо на вашому комп'ютері, поза браузером.
  2. npm (Node Package Manager): Це як величезний склад будматеріалів (бібліотек). Вам потрібен інструмент для форм? Ви кажете npm install, і вантажівка привозить його вам.
  3. Angular CLI (Command Line Interface): Це ваш головний помічник. Це той самий виконроб.

Як це працює?

Ви не створюєте файли вручну (New File -> index.html). Ні! Ви відкриваєте термінал і даєте команду CLI. CLI: 1. Створює папку. 2. Генерує десятки файлів налаштувань (які вам було б нудно писати). 3. Встановлює залежності (завантажує тисячі файлів коду, який написали в Google, щоб ви його не писали). 4. Зв'язує все це в єдиний організм.

🔑 Що запам'ятати (Key Takeaways):

  • CLI — ваш найкращий друг. Ми майже ніколи не створюємо файли "руками".
  • SPA (Single Page Application) — Angular створює одну сторінку (index.html), а весь вміст на ній підміняється динамічно. Це створює відчуття мобільного додатку, а не сайту, що постійно перезавантажується.

3. 🧪 Приклади: Від порожнечі до "Hello World"

Готові? Давайте зробимо це разом. Я буду показувати команди, а ви — уявляти (або робити), що відбувається.

Крок 0: Перевірка інструментів

Відкрийте термінал (Command Prompt, Terminal, PowerShell). Введіть:

node -v

Очікування: Ви побачите версію (наприклад, v18.10.0). Якщо бачите помилку — вам треба встановити Node.js.

Крок 1: Встановлення "Виконроба" (Angular CLI)

Якщо ви робите це вперше в житті:

npm install -g @angular/cli

ng — це скорочення від Angular. Тепер ваш комп'ютер знає цю команду.

Крок 2: Генерація проєкту 🚀

Ось він, момент істини. Ми створюємо новий всесвіт.

ng new my-first-app

Що зараз станеться? CLI запитає вас: 1. Which stylesheet format would you like to use? (Беріть CSS або SCSS). 2. Do you want to enable Server-Side Rendering? (Поки що No / N).

І почнеться магія... Ви побачите, як створюються файли. CREATE... CREATE... CREATE....

Крок 3: Запуск сервера

Зайдіть у папку, яку ми створили:

cd my-first-app

А тепер, запустіть локальний сервер розробки:

ng serve

Ви побачите повідомлення: Listening on localhost:4200.

Відкрийте браузер і перейдіть за адресою http://localhost:4200. Boom! 💥 Ви бачите стартову сторінку Angular. Вона жива!

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

Тепер ваша черга. Не просто дивіться, робіть!

Завдання 1: Ініціалізація * Переконайтеся, що ng serve працює. Якщо бачите сторінку в браузері — вітаю, ви розгорнули середовище розробки, яке використовують професіонали Google.

Завдання 2: "Хірургічне втручання" * Знайдіть у папці проєкту файл src/app/app.component.html. * Видаліть весь код у цьому файлі. Так, весь. Не бійтеся. * Напишіть там: <h1>Привіт, Angular! Я твій новий бос.</h1> * Збережіть файл (Ctrl+S). * Дивіться в браузер. Вам не треба оновлювати сторінку. Angular зробив це за вас миттєво.

Завдання 3: Динаміка * Відкрийте файл src/app/app.component.ts (це мозок вашого компонента). * Знайдіть рядок title = 'my-first-app';. * Змініть на title = 'Супер-Додаток';. * Поверніться в HTML файл і замініть ваш заголовок на: <h1>Привіт, {{ title }}!</h1>. * Подивіться на результат. Ви щойно зв'язали логіку і відображення!

Завдання 4: Міні-челендж (Debug) * Спробуйте написати в HTML: <h1>{{ title }</h1> (забудьте одну фігурну дужку). * Подивіться в термінал, де запущено ng serve. Що він каже? * Мета: Навчіться не боятися червоного тексту помилок. Angular дуже точно каже, де ви помилилися.

Завдання 5: А що, якщо... * А що буде, якщо видалити папку node_modules (найважчу папку в проєкті)? * Спробуйте (або уявіть). Проєкт перестане працювати. * Як полагодити: Просто введіть npm install. Список покупок (package.json) зберігся, тому npm просто піде на склад і привезе все заново.

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

Як відрізнити новачка від досвідченого Angular-розробника на цьому етапі?

  1. Страх перед файловою структурою.

    • Новачок: Відкриває проєкт, бачить 30 файлів і панікує: "Я ніколи це не вивчу!".
    • Профі: Знає, що 90% цих файлів (конфіги typescript, angular.json тощо) налаштовуються один раз і рідко чіпаються. Він фокусується тільки на папці src/app. Ігноруйте шум, фокусуйтеся на суті.

  2. Ручна праця.

    • Новачок: Копіює файли, перейменовує їх, забуває змінити назви всередині коду.
    • Профі: Використовує CLI (ng generate component ...). Це швидше і без помилок.

  3. Читання помилок.

    • Якщо ви бачите помилку в консолі — це не покарання, це підказка. Angular (завдяки TypeScript) дуже суворий, але справедливий. Читайте текст помилки, він скаже вам номер рядка.

6. 🧩 Підсумок

Сьогодні ми зробили величезний крок. Ми не просто створили папку з файлами. Ми розгорнули професійне середовище розробки.

Що ви тепер вмієте: ✅ Встановлювати та перевіряти Node.js та Angular CLI. ✅ Генерувати новий проєкт однією командою (ng new). ✅ Запускати локальний сервер (ng serve) і бачити зміни в реальному часі. ✅ Робити перші зміни в коді і виводити змінні на екран.

Тизер наступного уроку: Зараз весь наш код лежить в одній купі (app.component). Але пам'ятаєте про "Лего"? На наступному уроці ми візьмемо Компоненти. Ми навчимося розбивати наш монолітний сайт на маленькі, незалежні цеглинки, з яких можна зібрати будь-що.

Це був CS50. До зустрічі! 🖐️

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