Модуль 1

Що таке Angular і для чого він потрібен

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 CS50-Style: Що таке Angular і навіщо ми взагалі тут?

Привіт, світе! Радий бачити вас усіх. Сьогодні ми поговоримо про дещо масштабне.

Ми вже навчилися писати HTML, стилізувати це за допомогою CSS і навіть додали інтерактивності через JavaScript. Але скажіть мені чесно: чи відчували ви коли-небудь, що ваш код перетворюється на безлад, коли проєкт стає трохи більшим?

1. 🔥 Вступ: Проблема «Спагеті-коду»

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

Якщо ви пишете на чистому JavaScript (Vanilla JS), ваш код виглядає приблизно так: 1. Знайти елемент кнопки за ID. 2. Повісити на нього слухача подій (addEventListener). 3. Коли клікнули — знайти інший елемент (ціну). 4. Змінити текст всередині нього. 5. Не забути оновити загальну суму в хедері… 6. А, і ще в модальному вікні…

Риторичне питання: Що станеться, якщо ви зміните назву класу в HTML і забудете оновити її в 5 різних JS-файлах? Правильно. Все зламається.

Це нагадує будівництво хмарочоса за допомогою молотка і цвяхів, без креслень і крана. Можна? Можна. Але чи довго він простоїть?

Ось у чому проблема: Коли ми керуємо змінами на сторінці вручну (document.getElementById...), ми витрачаємо 80% часу на синхронізацію даних з екраном, замість того, щоб писати логіку бізнесу.

Нам потрібен не просто набір інструментів. Нам потрібен завод. Нам потрібна платформа, яка скаже: "Ти дбай про дані, а я подбаю про те, як і де їх показати".

Саме тут на сцену виходить Angular.

2. 🧠 Теоретична база: Як працює цей «завод»?

Angular — це не просто бібліотека (як React, який фокусується лише на відображенні). Це повноцінний фреймворк (платформа) від Google для створення веб-застосунків.

Уявіть, що ви купуєте набір LEGO. * React дає вам кубики, але ви самі вирішуєте, як їх скріплювати. * Angular дає вам кубики, інструкцію, стіл для збірки, і навіть спеціальний клей, щоб все трималося купи.

Три кити Angular (що треба зрозуміти):

  1. Компонентний підхід (Components). Ваш сайт — це не одна сторінка. Це дерево компонентів. Хедер — компонент. Кнопка — компонент. Картка товару — компонент. Ви будуєте складне з простого.

    • Аналогія: Як автомобіль. Він складається з двигуна, коліс, керма. Якщо колесо спустило, ви міняєте колесо (компонент), а не весь автомобіль.

  2. Зв'язування даних (Data Binding). Це справжня магія. В Angular є автоматичний зв'язок між вашим кодом (TypeScript) і шаблоном (HTML).

    • Змінили змінну в коді price = 100? —> Ціна на екрані змінилася сама.
    • Користувач ввів текст у поле? —> Змінна в коді оновилася сама.
    • Запам'ятайте: Вам більше не треба писати document.querySelector. Ніколи.

  3. TypeScript. Angular написаний на TypeScript. Це JavaScript, але з "типами". Він не дозволить вам додати число до слова "яблуко", не попередивши про помилку ще до запуску коду. Це ваш ремінь безпеки.

Інтуїтивне розуміння: Angular — це "Розумний менеджер". Ви даєте йому дані (модель), а він сам вирішує, які частини DOM (сторінки) треба перемалювати.

3. 🧪 Приклади: Від болю до задоволення

Давайте подивимось, як це виглядає на практиці.

Приклад 1: Старий підхід (Vanilla JS)

Уявіть поле введення імені, де ми хочемо привітати користувача.

// HTML: <input id="nameInput"><p id="greeting"></p>

const input = document.getElementById('nameInput');
const p = document.getElementById('greeting');

input.addEventListener('input', (e) => {
    p.innerText = 'Привіт, ' + e.target.value + '!';
});

Виглядає просто? А якщо таких полів 50? А якщо треба валідація?

Приклад 2: Angular Way (Магія ✨)

Що ви очікуєте побачити? Купу коду? Дивіться сюди:

Component (Logic):

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="name" placeholder="Введіть ім'я">
    <p>Привіт, {{ name }}!</p>
  `
})
export class HelloComponent {
  name = ''; // Просто змінна
}

Пояснення: 1. {{ name }} — це інтерполяція. Ми кажемо: "Встав сюди значення змінної name". 2. [(ngModel)] — це "банан у коробці" (дужки [] і ()). Це двостороннє зв'язування. * Змінив input -> змінилася змінна name. * Змінив name у коді -> змінився текст в input.

Ніяких addEventListener. Ніяких getElementById. Ви працюєте з даними, Angular працює з DOM.

Приклад 3: Реальний кейс (Список завдань)

У нас є масив задач. Треба вивести їх списком.

@Component({
  // ... imports: [CommonModule]
  template: `
    <ul>
      <li *ngFor="let task of tasks">
        {{ task }}
      </li>
    </ul>
    <button (click)="addTask()">Додати задачу</button>
  `
})
export class TodoComponent {
  tasks = ['Вивчити HTML', 'Зрозуміти JS'];

  addTask() {
    this.tasks.push('Опанувати Angular');
  }
}

Що тут відбувається? * *ngFor — це директива (команда Angular). Вона каже: "Повтори цей елемент <li> для кожного елемента в масиві". * Коли ми робимо push у масив, список на екрані оновлюється миттєво. Автоматично.

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

Час забруднити руки! Уявіть, що ви вже в IDE.

Завдання 1: Hello World Створіть змінну title = 'Мій перший застосунок' у класі компонента. Виведіть її в <h1> тегу в шаблоні, використовуючи подвійні фігурні дужки {{ }}.

Завдання 2: Динамічні стилі Додайте змінну isActive = false. У шаблоні зробіть кнопку, яка при кліку (click)="isActive = !isActive" перемикає це значення. А тепер челендж: Використовуйте [style.color]="isActive ? 'green' : 'red'", щоб змінювати колір тексту залежно від стану.

Завдання 3: Міні-кейс "Картка користувача" Створіть об'єкт у класі:

user = {
  name: 'Олесь',
  role: 'Admin',
  avatar: 'https://i.pravatar.cc/150'
}

Виведіть це в шаблоні: * Картинку через <img [src]="user.avatar"> (зверніть увагу на квадратні дужки!). * Ім'я та роль через інтерполяцію.

Завдання 4: Виправ помилку Студент написав код: <button onclick="save()">Зберегти</button>. Чому це не спрацює в Angular-компоненті і як це виправити, щоб викликати метод save() з вашого класу TypeScript? (Підказка: згадайте синтаксис подій в Angular).

Питання "А що, якщо...": А що, якщо ми маємо масив з 10 000 користувачів? Чи варто використовувати *ngFor так само просто? (Спойлер: так, але з нюансами оптимізації, про які поговоримо пізніше).

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

Як думає досвідчений Angular-розробник?

  1. "Мислення компонентами". Новачок дивиться на макет і бачить сторінку. Профі бачить дерево: "Ага, це сайдбар, це віджет погоди, а це перевикористовувана кнопка". Порада: Не пишіть весь код в одному файлі. Розбивайте на маленькі, логічні шматки.

  2. Типи — твої друзі. Помилка новачка: писати всюди any (тип "будь-що"). ```typescript // Погано user: any;

    // Добре (ви знаєте структуру даних) user: { name: string; age: number }; ``` Це рятує вас від дурних помилок о 3-й ночі.

  3. Не чіпай DOM. Якщо ви ловите себе на тому, що пишете document.querySelector всередині Angular — зупиніться. Ви робите щось не так. Шукайте "Angular way" (директиви, біндинг).

6. 🧩 Підсумок

Отже, що ми сьогодні розібрали?

  • Angular — це потужний каркас для будівництва надійних веб-будинків, а не халабуд.
  • Ми дізналися про Компоненти (цеглинки).
  • Ми побачили Data Binding (магічний клей між кодом і екраном).
  • Ми зрозуміли, що TypeScript — це наш страховий поліс.

Тепер ви вмієте: Не просто писати HTML, а створювати живі шаблони, які реагують на дані без ручного втручання.

Тизер: Але стривайте. Поки що всі наші дані "вшиті" в код (tasks = [...]). А в реальному житті дані приходять з сервера, з бази даних. Як Angular спілкується з інтернетом? Як отримати погоду в реальному часі?

Про це ми поговоримо на наступному уроці: Services та HTTP Client. Час подзвонити серверу!

А поки що — це був CS50... тобто, наш урок з Angular. Успіхів у коді!

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