Веб-разработка

Учебник Angular с нуля для начинающих

22 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Премиум-курс по современному Angular (версия 19) для тех, кто хочет строить большие веб-приложения. Вы пройдёте путь от первого standalone-компонента до готового приложения: разберёте привязки данных и новый control flow @if/@for, сервисы и внедрение зависимостей, сигналы и управление состоянием, маршрутизацию с ленивой загрузкой, реактивные формы, работу с сервером через HttpClient и финальный деплой.

Каждый урок — это объёмная проза, ASCII-диаграммы под капотом и запускаемые JS-врезки, на которых вы своими руками собираете сигнал, DI-контейнер, роутер и валидацию. Никаких устаревших NgModule — только тот Angular, который пишут в 2025 году.

Курс «Angular с нуля» состоит из 6 разделов и 22 уроков: Введение и компоненты, Шаблоны, привязки и control flow, Сервисы и внедрение зависимостей, Signals и управление состоянием, Маршрутизация и формы и HTTP, оптимизация и деплой. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

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

  1. 1 Введение и компоненты

    1. Что такое Angular и зачем он нужен

      Знакомство с Angular: фреймворк для крупных SPA, его философия, экосистема и место среди React и Vue в 2025 году.

    2. Установка окружения и Angular CLI

      Готовим рабочее окружение: Node.js, npm, Angular CLI, создаём первый проект командой ng new и запускаем dev-сервер.

    3. Анатомия проекта и первый компонент

      Разбираем структуру сгенерированного проекта и создаём первый standalone-компонент: декоратор @Component, шаблон и стили.

    4. Связь компонентов: input() и output()

      Передача данных между компонентами: сигнальные входы input(), события output() и поток «данные вниз, события вверх».

  2. 2 Шаблоны, привязки и control flow

    1. Интерполяция и привязка свойств

      Виды привязки данных в шаблонах Angular: интерполяция, property binding, attribute binding и class/style binding.

    2. Привязка событий и двусторонняя привязка

      Обработка пользовательских событий через (event), объект $event и двусторонняя привязка с model() и [(ngModel)].

    3. Условия: @if, @else и @switch

      Новый управляющий поток Angular: блоки @if / @else if / @else и @switch вместо устаревших *ngIf и ngSwitch.

    4. Списки: @for, track и @empty

      Рендеринг списков новым блоком @for: обязательный track для производительности, блок @empty и переменные $index.

  3. 3 Сервисы и внедрение зависимостей

    1. Сервисы: где жить логике

      Зачем нужны сервисы: вынос бизнес-логики и состояния из компонентов, декоратор @Injectable и providedIn: 'root'.

    2. Внедрение зависимостей: inject() и конструктор

      Как сервис попадает в компонент: функция inject(), внедрение через конструктор и сама идея инверсии управления.

    3. Провайдеры, токены и иерархия инжекторов

      Тонкая настройка DI: useClass, useValue, useFactory, InjectionToken для не-классов и иерархия инжекторов.

  4. 4 Signals и управление состоянием

    1. Signals: реактивность нового поколения

      Что такое сигналы: signal() для хранения значения, чтение и запись через set/update и почему это меняет change detection.

    2. computed: производные значения

      Вычисляемые сигналы computed(): автоматический пересчёт при изменении зависимостей, ленивость и мемоизация.

    3. effect и реакция на изменения

      Побочные эффекты через effect(): когда запускается, отслеживание зависимостей, очистка и типичные сценарии применения.

    4. Управление состоянием на сигналах

      Паттерн сигнального стора: инкапсуляция состояния в сервисе, приватный signal + публичные computed, методы-мутаторы.

  5. 5 Маршрутизация и формы

    1. Маршрутизация: страницы без перезагрузки

      Настройка роутера Angular: provideRouter, массив routes, router-outlet и навигация ссылками routerLink.

    2. Параметры маршрута и ленивая загрузка

      Динамические маршруты с параметрами, чтение через input-сигналы, lazy loading компонентов через loadComponent.

    3. Реактивные формы и валидация

      Reactive Forms: FormGroup и FormControl, валидаторы, отслеживание состояния valid/touched и вывод ошибок.

  6. 6 HTTP, оптимизация и деплой

    1. HttpClient: общение с сервером

      Запросы к API через HttpClient: provideHttpClient(withFetch()), методы get/post и работа с Observable и сигналами.

    2. Observable, RxJS и обработка ошибок

      Основы RxJS в Angular: Observable как поток, операторы map/catchError, toSignal() и грамотная обработка ошибок запросов.

    3. Change detection и оптимизация

      Как Angular обнаруживает изменения: классический механизм, OnPush, zoneless-режим на сигналах и приёмы оптимизации.

    4. Сборка, деплой и итоги курса

      Финал: production-сборка ng build, оптимизации, деплой статики на хостинг, настройка SPA-фолбэка и обзор пути дальше.