Модуль 2

Огляд екосистеми Angular та архітектури SPA

Ось твій урок у стилі CS50, написаний спеціально для тебе. Приготуйся, сьогодні ми розберемося з "магією" сучасного вебу.

🎓 Урок: Огляд екосистеми Angular та архітектури SPA

Привіт, друзі! Це CS50... тобто, це вступ до Angular.

Мене звати [Твоє Ім'я], і сьогодні ми поговоримо про те, як змінити ваше уявлення про веб-розробку. Ми не просто вивчимо новий інструмент, ми змінимо сам спосіб, у який ми будуємо інтернет.

1. 🔥 Вступ: Чому веб "блимає"?

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

Хочете десерт? Знову на вулицю, знову будуємо ресторан, знову сідаємо.

Звучить абсурдно? Але саме так працював класичний веб роками! Кожен клік на посилання — це повне перезавантаження сторінки. Екран "блимає", сервер надсилає новий HTML, браузер все перемальовує з нуля.

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

Ось це і є SPA — Single Page Application (Односторінковий застосунок).

Риторичне запитання: Якщо користувачі хочуть швидкість і плавність, як у мобільному додатку, чому ми досі іноді пишемо сайти, що "блимають"? Сьогодні ми дізнаємося, як робити правильно, використовуючи Angular.

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

Давайте зазирнемо під капот.

Що таке SPA?

Технічно, SPA — це веб-сайт, який завантажує лише один HTML-файл (зазвичай index.html). Коли ви переходите по "сторінках", браузер не йде на сервер за новим HTML. Натомість, JavaScript перехоплює ваше бажання перейти далі, видаляє старий шматок інтерфейсу і вставляє новий.

Це як театральна сцена: * Класичний сайт: Опускаємо завісу, виганяємо глядачів, міняємо декорації, запускаємо глядачів. * SPA: Глядачі сидять, актори змінюються прямо під час дії, декорації плавно виїжджають.

Чому саме Angular?

Ви можете запитати: "Навіщо мені Angular? Я можу написати це на чистому JavaScript!" Можете. Так само як ви можете побудувати хмарочос, маючи лише молоток і цвяхи. Але чи буде він надійним?

Angular — це фреймворк (framework). Уявіть, що React — це набір окремих інструментів (ось тобі дриль, ось пила — роби що хочеш). А Angular — це повністю укомплектована фабрика. Тут вже є конвеєр, правила безпеки, уніформа для робітників і чіткі креслення.

Що треба запам'ятати (The Big Three):

  1. Компоненти (Components): Це цеглинки вашого додатку. Хедер — це компонент. Кнопка — компонент. Картка товару — компонент. Кожен компонент відповідає за свій шматочок екрану.
  2. Модулі (Modules): Це коробки, в які ми складаємо схожі компоненти. Наприклад, "Адмінка" — окремий модуль, "Кошик" — окремий.
  3. Сервіси (Services): Це "робочі конячки", які не малюють інтерфейс, але роблять брудну роботу: ходять на сервер за даними, рахують податки тощо.

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

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

Приклад 1: Анатомія Компонента

В Angular кожен компонент складається з двох основних частин: Логіки (TypeScript) та Вигляду (HTML).

Файл: hello.component.ts

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

@Component({
  selector: 'app-hello', // Як ми назвемо цей тег в HTML
  template: '<h1>Привіт, {{ name }}!</h1>'
})
export class HelloComponent {
  name = 'Студент CS50'; // Це змінна (дані)
}

Питання до вас: Як ви думаєте, що побачить користувач на екрані, якщо ми використаємо тег <app-hello></app-hello>?

(Пауза для роздумів)

Відповідь: Він побачить: "Привіт, Студент CS50!". Angular бере значення змінної name і автоматично вставляє її в шаблон там, де є фігурні дужки {{ }}. Це називається Інтерполяція.

Приклад 2: Реакція на події

Давайте зробимо це інтерактивним. Додамо кнопку.

@Component({
  selector: 'app-counter',
  template: `
    <p>Ви натиснули: {{ count }} разів</p>
    <button (click)="increment()">Натисни мене</button>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count = this.count + 1;
  }
}

Подивіться на (click). Це синтаксис Angular. Ми кажемо: "Коли станеться клік, виконай функцію increment". Вам не треба шукати кнопку через document.getElementById. Вам не треба вручну оновлювати текст у параграфі. Angular робить це за вас. Ви змінили змінну — екран оновився сам. Магія? Ні, це Change Detection (виявлення змін).

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

Час "забруднити руки". Уявіть, що ви розробляєте інтерфейс для інтернет-банкінгу.

Завдання 1: Знайди помилку Новачок написав код, але ім'я користувача не відображається. Чому?

@Component({
  template: '<p>Вітаю, {{ username }}</p>'
})
export class UserComponent {
  user = 'Олексій';
}

(Підказка: подивіться уважно на назву змінної в класі та в шаблоні).

Завдання 2: "А що, якщо..." У прикладі з лічильником (CounterComponent), що станеться, якщо у функції increment() ми напишемо this.count = 100? Що покаже екран після першого кліку?

Завдання 3: Міні-кейс (Архітектура) Ви будуєте сторінку "YouTube". Розбийте її на компоненти. Просто назвіть їх. Наприклад: HeaderComponent (верхнє меню). Які ще компоненти ви б створили для: 1. Списку рекомендованих відео? 2. Самого відеоплеєра? 3. Коментарів під відео? 4. Одного конкретного коментаря?

Завдання 4: Реальна задача Напишіть (на папері або в голові) логіку компонента LightSwitch (Вимикач світла). * Має бути змінна isOn (true/false). * Має бути метод toggle(), який змінює true на false і навпаки. * У шаблоні має бути текст: {{ isOn ? 'Світло є' : 'Темрява' }}.

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

Тепер найважливіше. Як думає Senior Angular Developer?

  1. Мислить деревом. Він не бачить "сторінку". Він бачить дерево компонентів. Батько передає дані дітям, діти повідомляють батькам про події.
  2. Не чіпає DOM. Типова помилка новачків, які прийшли з jQuery: вони намагаються вручну міняти класи або стилі елементів. В Angular ми змінюємо стан (змінні), а Angular сам оновлює DOM.
    • Неправильно: "Знайди кнопку і зроби її червоною".
    • Правильно: "Зміни змінну isError на true. А кнопка знає, що коли isError true — вона має бути червоною".
  3. Поділяє відповідальність. Компонент має тільки відображати дані. Якщо треба отримати курси валют — не пишіть цей код у компоненті. Винесіть його в Service. Компонент — це офіціант, Сервіс — це кухар. Офіціант не смажить м'ясо.

6. 🧩 Підсумок

Отже, що ми маємо сьогодні?

  1. SPA — це сучасно, швидко і не змушує користувача чекати перезавантаження.
  2. Angular — це потужний завод (фреймворк) для створення таких додатків.
  3. Все будується з Компонентів (цеглинок).
  4. Магія Angular у тому, що він синхронізує ваші дані (TypeScript) і картинку (HTML) автоматично.

Тепер ви розумієте архітектуру. Ви знаєте, навіщо це потрібно.

Тизер наступного уроку: Сьогодні ми просто виводили текст. Але як відобразити список із 100 товарів? Як приховати кнопку "Адмінка" для звичайного користувача? На наступному уроці ми познайомимося з Директивами — командами, які дозволяють керувати HTML так, як ніби ви пишете програму.

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

Потрібна допомога з відповідями на практичну частину? Просто спитай!

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