Что такое Angular
Angular — фреймворк от Google для создания одностраничных приложений (SPA): страница загружается один раз, а дальше интерфейс меняется без перезагрузки. В отличие от библиотек, которые решают одну задачу, Angular сразу даёт всё нужное: компоненты, маршруты, формы, HTTP-клиент, тесты и сборку.
Курс написан для Angular 20 и новее. Используются современные приёмы: автономные (standalone) компоненты, сигналы, новый синтаксис шаблонов @if и @for, функция inject(). В старых статьях вы встретите модули NgModule, директивы *ngIf и *ngFor — это прежний стиль, он ещё работает, но для новых проектов не нужен.
Из чего состоит приложение
| Часть | Что делает |
|---|---|
| Компонент | Кусок интерфейса: класс TypeScript, шаблон HTML и стили |
| Шаблон | HTML с привязками к данным компонента |
| Сигнал | Значение, при изменении которого Angular обновляет страницу |
| Сервис | Класс с общей логикой: загрузка данных, хранение состояния |
| Маршрут | Связь адреса страницы с компонентом |
Как выглядит компонент
// src/app/hello/hello.ts
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-hello',
template: `<p>Привет, {{ name() }}!</p>`,
})
export class Hello {
name = signal('Анна');
}Декоратор @Component превращает обычный класс в компонент. Где в другом шаблоне написан тег <app-hello />, появится абзац «Привет, Анна!».
Почему TypeScript
Angular написан на TypeScript, и проекты на нём тоже пишут на TypeScript. Типы помогают редактору подсказывать имена и находить ошибки ещё до запуска. Достаточно базовых знаний: типы переменных, интерфейсы, классы.
Когда Angular подходит
- Большое приложение, над которым работает команда: личный кабинет, админка, CRM.
- Нужны единые правила: у всех проектов одинаковая структура, и новый разработчик быстро в ней ориентируется.
- Важна долгая поддержка: новые версии выходят по расписанию раз в полгода, а команда
ng updateпомогает обновиться.
Для небольшого сайта или одной интерактивной формы Angular избыточен — там хватит обычного JavaScript или лёгкой библиотеки.
Что будем делать
Сначала — список дел: добавление задач, отметка о выполнении, фильтры. Затем — небольшой блог, который загружает статьи с тестового API https://jsonplaceholder.typicode.com: список статей, страница статьи, комментарии и форма новой статьи.
Частая ошибка
Новички ищут ответ в интернете и копируют код с NgModule, *ngIf и файлами app.component.ts. Смешивать стили можно, но это запутывает. Проверяйте дату статьи и версию Angular: для версии 17 и новее ищите примеры со словами standalone, signals и @if.