Курс: Создание веб-приложений с использованием Angular и React

Навигация по курсу

Выберите урок, чтобы начать изучение

Все материалы доступны в виде HTML-страниц. Открывайте их в браузере и следуйте инструкциям.

Перейти к урокам

Преподаватель добавляет новые уроки по мере прохождения курса.

С чего начать: новичку — Урок 0, затем Урок 1; практиковаться — лабораторная №1.

📚 Доступные уроки

Ниже перечислены все материалы, которые уже открыты для вас. Нажимайте на карточку, чтобы открыть страницу урока.

⚙️ Установка

Установка окружения

Что узнаете: как поставить все нужные программы (Node.js, Git, VS Code, Angular CLI, JSON Server, Vite), чтобы вообще начать писать код. Зачем в TaskFlow: без этих инструментов проект не запустится. Аналогия: как собрать рабочий верстак и разложить инструменты, прежде чем строить мебель.

Инструменты
Урок №1

Современная веб-разработка

Что узнаете: из каких частей состоит веб-приложение — браузер, HTTP, REST, JSON, HTML/CSS/JS, компоненты, а также чем отличаются Angular и React. Зачем в TaskFlow: это общая карта местности, чтобы дальше не заблудиться. Аналогия: как понять, как работает ресторан (повар, официант, кухня, меню), прежде чем самому готовить.

Теория + Практика
Урок №2

JavaScript и TypeScript для frontend

Что узнаете: «алфавит» программирования — переменные, функции, массивы, объекты, модули, Promise, async/await, плюс типы и интерфейсы в TypeScript. Зачем в TaskFlow: на этом языке вы будете описывать задачи и действия с ними. Аналогия: как выучить буквы и грамматику, прежде чем писать письма.

Язык
Урок №3

Angular: компоненты и шаблоны

Что узнаете: как собирать экран из компонентов, вставлять данные в разметку (@if, @for, @switch, @empty, track) и связывать кнопки с действиями. Зачем в TaskFlow: список задач и форма — это и есть компоненты. Аналогия: компонент — как деталь конструктора или запчасть машины: из маленьких блоков собирается весь экран.

Angular
Урок №4

Angular: данные и события между компонентами

Что узнаете: как компоненты передают друг другу данные и сообщают о событиях (Input/Output), и как устроено дерево TaskFlow. Зачем в TaskFlow: когда вы добавляете задачу в форме, об этом должен узнать список. Аналогия: как передают записки внутри семьи — папа написал, дети прочитали и отреагировали.

Angular
Урок №5

Angular: сигналы и реактивное состояние

Что узнаете: как хранить текущее состояние задач и автоматически обновлять экран при изменениях (signal, computed, effect, update/set). Зачем в TaskFlow: чтобы список сам перерисовывался, когда задача выполнена. Аналогия: сигнал — как группа в мессенджере: изменилось значение, и все подписчики сразу получили сообщение.

Angular
Урок №6

Angular: сервисы, модель Task и DI

Что узнаете: как вынести хранение задач в отдельный сервис (@Injectable, providedIn/inject) и описать модель Task/TaskDraft. Зачем в TaskFlow: один «склад» задач, к которому обращаются все экраны. Аналогия: сервис — как общая кладовая: все берут оттуда данные, а не держат у себя по кусочку.

Angular
Урок №7

Angular: HTTP, mock API и ошибки

Что узнаете: как приложение запрашивает данные с сервера по сети (HttpClient, CRUD: GET/POST/PATCH/DELETE) и ловит ошибки. Зачем в TaskFlow: задачи хранятся на сервере, а не только в браузере. Аналогия: HTTP-запрос — как заказ в магазине: послали заявку, получили посылку или вежливый отказ.

Angular
Лабораторная №1

От клика до HTTP

Что сделаете: проследите полный путь запроса: нажали кнопку → fetch → сервер → данные на экране, и изучите DevTools. Зачем в TaskFlow: именно так задача попадает из приложения на сервер. Аналогия: HTTP-запрос — как заказ в магазине: послали заявку в сеть (fetch), получили данные с сервера или отказ.

Практика
Лабораторная №2

Три состояния UI

Что сделаете: разберёте три состояния экрана — загрузка, успех, ошибка — на примере списка задач. Зачем в TaskFlow: пользователь должен видеть, что происходит (крутится ли загрузка или что-то сломалось). Аналогия: как статус заказа: «в обработке» (ждём), «готов» (успех), «ошибка» (авария).

Практика
Лабораторная №3

Модели Task и TaskForm

Что сделаете: спроектируете модели данных — что приходит с сервера, а что нужно только для интерфейса. Зачем в TaskFlow: чёткая «анкета» задачи, чтобы не путаться в полях. Аналогия: как бланк пропуска: есть обязательные графы (ФИО, дата) — так и в задаче есть id, title, completed.

Практика
Лабораторная №4

Компонентный TaskFlow

Что сделаете: распишете дерево компонентов — AppShell, TaskList, TaskItem, TaskForm, FilterBar — и кто за что отвечает. Зачем в TaskFlow: чтобы каждый кусочек экрана знал свою работу. Аналогия: как деталь конструктора или запчасть машины: у каждого компонента своя зона ответственности.

Практика
Лабораторная №5

Angular vs React

Что сделаете: сравните фреймворк и библиотеку — что у них общего и в чём принципиальная разница. Зачем в TaskFlow: понимать, каким инструментом вы строите проект. Аналогия: Angular — как готовая квартира с ремонтом, React — как набор блоков, из которых собираешь сам.

Практика
Совет. Если вы видите пустую страницу при открытии урока, возможно, файл ещё не загружен преподавателем. Проверьте наличие файла в папке курса.

🛠 Практические работы по урокам (занятие 2)

Отдельные страницы с заданиями, песочницами и проверкой для каждого урока. Открывайте из соответствующего урока или здесь.

Практика к уроку 2

JavaScript и TypeScript

Что сделаете: потренируете массивы задач, интерфейсы, generics, async/await и обработку ошибок. Аналогия: как тренировка перед игрой — отрабатываете фразы языка из урока 2.

Практика
Практика к уроку 3

Компоненты и шаблоны

Что сделаете: соберёте standalone-компонент, научитесь показывать/прятать блоки (@if/@for/@switch), использовать track и class binding. Аналогия: как собрать деталь конструктора и научить её «моргать» по условию.

Практика
Практика к уроку 4

Данные и события

Что сделаете: построите дерево компонентов и научите их передавать события вверх через output(), добавите FilterBar. Аналогия: как передать записку от младшего к старшему в семье.

Практика
Практика к уроку 5

Сигналы и состояние

Что сделаете: примените signal, computed, effect, неизменяемое обновление и производные значения. Аналогия: как обновить статус в групповом чате, и все сразу это увидели.

Практика
Практика к уроку 6

Сервисы и DI

Что сделаете: создадите @Injectable-сервис-хранилище с providedIn и моделями Task/TaskDraft. Аналогия: как завести общую кладовую и раздавать из неё ключи всем желающим.

Практика
Практика к уроку 7

HTTP и mock API

Что сделаете: подключите HttpClient к json-server, реализуете CRUD и состояния loading/empty/error. Аналогия: как сделать заказ в интернет-магазине и дождаться посылки или сообщения об отмене.

Практика

Домашние задания — решения (раскройте для проверки)

Решения доступны после домашнего задания. Сначала попробуйте самостоятельно, затем сверьте.

Задание 1. Архитектура TaskFlow

Что нужно сделать: Нарисуйте архитектуру от пользователя до базы данных. Подпишите ответственность каждого уровня.

Зачем: понять, кто за что отвечает в TaskFlow, чтобы не путать интерфейс с сервером.

Пользователь
   ↓
 Браузер / Angular / React
   ↓
 HTTP API
   ↓
 Backend
   ↓
 Database

Аналогия: как письмо: вы пишете (Пользователь) → почтальон (Браузер) → отдел доставки (HTTP API) → склад (Backend) → архив (Database).

Идея: Frontend отвечает за UI. Backend — за серверные правила. Database — за хранение данных.

Задание 2. JSON с пятью задачами

Что нужно сделать: Создайте JSON с пятью задачами. Каждая — id, title, completed, createdAt.

Зачем: это формат, в котором TaskFlow хранит и передаёт задачи между клиентом и сервером (поле выполнения — completed, а не done).

Аналогия: как таблица в ежедневнике: номер, название, галочка выполнено, дата.

{
  "tasks": [
    { "id": 1, "title": "Изучить HTTP", "completed": false, "createdAt": "2026-08-17" },
    { "id": 2, "title": "Настроить Git", "completed": true, "createdAt": "2026-08-17" },
    { "id": 3, "title": "Установить Node.js", "completed": true, "createdAt": "2026-08-16" },
    { "id": 4, "title": "Создать Angular проект", "completed": false, "createdAt": "2026-08-18" },
    { "id": 5, "title": "Написать первый компонент", "completed": false, "createdAt": "2026-08-18" }
  ]
}
Задание 3. HTML/JS-прототип списка задач

Что нужно сделать: Создайте HTML-страницу с формой добавления и списком задач.

Зачем: это первый рабочий прототип TaskFlow без фреймворков — чистый HTML и JS, как основа понимания.

Аналогия: как доска объявлений: пишете название, нажимаете «Добавить» — и запись появляется в списке.

<!DOCTYPE html>
<html>
<body>
  <input id="taskInput" placeholder="Название задачи">
  <button id="addBtn">Добавить</button>
  <ul id="taskList"></ul>

  <script>
    const tasks = [];

    function addTask() {
      const input = document.getElementById('taskInput');
      const title = input.value.trim();
      if (!title) return;

      tasks.push({ id: tasks.length + 1, title: title, completed: false });
      render();
      input.value = '';
    }

    function render() {
      const ul = document.getElementById('taskList');
      ul.innerHTML = '';
      tasks.forEach(function(task) {
        const li = document.createElement('li');
        li.textContent = task.title;
        ul.appendChild(li);
      });
    }

    document.getElementById('addBtn').addEventListener('click', addTask);
  </script>
</body>
</html>
Задание 4. Angular-проект task-flow-angular

Что нужно сделать: Создать Angular-проект и запустить локально.

Зачем: это каркас будущего TaskFlow, который вы будете наполнять кодом в следующих уроках.

Аналогия: как залить фундамент и поставить коробку дома, в котором потом сделаете ремонт.

ng new task-flow-angular
cd task-flow-angular
ng serve --open

Проверка: Браузер открывает http://localhost:4200 и показывает стартовую страницу Angular.

Задание 5. Сравнение Angular и React

Что нужно сделать: Восемь предложений: что общего, а что различается.

Зачем: выбрать подходящий инструмент для TaskFlow и понимать, чем они отличаются.

Аналогия: как сравнить готовый набор для сборки и отдельные блоки — оба дают результат, но путь разный.

Пример:

  1. Оба используют компонентную модель.
  2. Angular — фреймворк (роутер, формы, HTTP включены).
  3. React — библиотека (только UI, остальное — экосистема).
  4. Angular использует TypeScript по умолчанию.
  5. React позволяет писать на JavaScript, но TypeScript рекомендуется.
  6. Angular шаблоны отделены от логики.
  7. React использует JSX (HTML внутри JavaScript).
  8. Angular имеет встроенный DI (Dependency Injection).

📌 Дополнительные материалы

Все ссылки ведут на актуальные официальные источники.

📝 Как пользоваться этой страницей

Эта страница — главный вход в курс. Преподаватель будет добавлять сюда ссылки на новые уроки по мере их прохождения.

  1. Нажмите на карточку нужного урока, чтобы открыть его.
  2. Изучайте материал: читайте теорию, выполняйте практические задания.
  3. Возвращайтесь на главную страницу через ссылку «На главную» в каждом уроке (если она есть) или через кнопку «Назад» в браузере.

Если вы видите эту страницу впервые, начните с карточки «Установка окружения».

Актуально на август 2026 года. Версии инструментов могут меняться, но инструкции остаются применимыми.

📖 Словарик аналогий курса

ТерминЖизненная аналогия
Фронтендвитрина магазина: всё, что видит и трогает покупатель (пользователь).
DOM = дерево страницыкак схема родственных связей: каждый тег — узел с родителями и детьми.
Компонент = деталь конструкторакак запчасть машины: из маленьких блоков собирается весь экран.
Сигнал = группа в мессенджереизменилось значение — и все подписчики сразу получили сообщение.
HTTP-запрос = заказ в магазинепослали заявку в сеть, получили данные с сервера или вежливый отказ.
Сервис = кофеварка на этажеобщий ресурс: все подходят и пользуются, а не держат свою у себя.
Состояние = статус заказа«в обработке» (ждём), «готов» (успех), «ошибка» (авария).
Task = готовый билет с idкак билет в кино: у него есть номер (id), название и галочка посещения (completed).

🧠 Самопроверка (база)

1. Поле выполнения задачи в модели Task называется done. Верно или неверно?

2. Сигнал в Angular похож на группу в мессенджере, где подписчики узнают об изменении значения. Верно или неверно?

Прогресс курса