О курсе Angular

🅰️ Angular: Полный курс от основ до мастерства

Добро пожаловать в курс по Angular — одному из самых мощных и зрелых фреймворков для создания веб-приложений! 🎉

Если ты хочешь научиться строить серьёзные, масштабируемые приложения с чётко структурированным кодом — ты пришёл по адресу. Angular — это не просто библиотека, это целая экосистема, и мы разберём её от фундамента до самых продвинутых концепций.

---

📚 История Angular: от AngularJS до наших дней

2010 год — Google выпускает AngularJS (версия 1.x). Это революция! Впервые разработчики получают двустороннюю привязку данных (ng-model) прямо в HTML. Фреймворк буквально взрывает веб-разработку.

2010  →  AngularJS 1.0 появился (Misko Hevery, Google)
2012  →  AngularJS 1.2 — стабильность и популярность
2014  →  Анонс полного переписывания (Angular 2)
2016  →  Angular 2 выходит — всё по-новому!
2017  →  Angular 4 (версию 3 пропустили 😄)
2018  →  Angular 6 — Angular Elements, Ivy начало
2020  →  Angular 9 — Ivy по умолчанию
2021  →  Angular 12 — deprecate IE11
2022  →  Angular 14 — Standalone Components!
2023  →  Angular 16 — Signals (экспериментально)
2024  →  Angular 17 — новый синтаксис @if/@for, Signals стабильны
2025  →  Angular 18+ — продолжение эволюции

Большой переход с AngularJS на Angular 2 в 2016 году был болезненным — это было полное переписывание с нуля. AngularJS использовал JavaScript, Angular 2+ — TypeScript. Архитектура, шаблоны, всё — заново. Но результат того стоил! 💪

Важно: AngularJS (версия 1) и Angular (версия 2+) — это разные фреймворки. В этом курсе мы изучаем Angular 2+, который сегодня просто называют Angular.

---

🏗️ Философия: Framework vs Library

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

React — это библиотека (library):

• Даёт тебе инструменты для построения UI
• Ты сам выбираешь: роутер, стейт-менеджмент, HTTP, форматирование
• Свобода выбора = больше решений на твоей совести
• Экосистема: React Router, Redux/Zustand, Axios, React Query…

Angular — это фреймворк (framework):

• Даёт тебе всё из коробки: роутер, HTTP, формы, анимации, i18n
• Один путь решения задачи (opinionated)
• Меньше выборов = меньше споров в команде
• Встроенная архитектура с модулями, сервисами, DI

Аналогия 🏠: React — это набор строительных материалов (кирпичи, цемент, доски). Angular — это готовый проект дома с инструкцией. С материалами можно построить что угодно, с проектом — быстрее и предсказуемее.

---

⚖️ Angular vs React vs Vue: Сравнение

Критерий	Angular	React	Vue
Тип	Фреймворк	Библиотека	Прогрессивный фреймворк
Язык	TypeScript	JS/TS	JS/TS
Размер	~65 KB (gzip)	~42 KB	~33 KB
Кривая обучения	Крутая 📈	Средняя	Пологая
Создатель	Google	Meta (Facebook)	Evan You
Первый выпуск	2016	2013	2014
Архитектура	Жёсткая (MVC/MVVM)	Гибкая	Гибкая
State Management	NgRx/Signals	Redux/Zustand/Jotai	Pinia/Vuex
Роутер	Встроен ✅	React Router (отдельно)	Vue Router (отдельно)
HTTP	HttpClient ✅	Fetch/Axios (отдельно)	Fetch/Axios (отдельно)
Формы	Встроены ✅	React Hook Form (отдельно)	VeeValidate (отдельно)
DI (Dependency Injection)	Встроен ✅	Нет (вручную)	Нет
Testing	Jasmine/Jest ✅	Jest/RTL	Vitest
Применение	Enterprise, большие команды	Всё, от SPA до мобилок	Средние проекты, простота
Компании	Google, Microsoft, Forbes	Facebook, Airbnb, Uber	Alibaba, Nintendo, GitLab

---

🗺️ Дорожная карта курса

В этом курсе 65 уроков, сгруппированных по темам:

🔰 Основы (уроки 1–5)

1. Что такое Angular — архитектура, философия, экосистема
2. Установка и Angular CLI — настройка окружения, ng команды
3. Первое приложение — анатомия Angular app, компоненты
4. Компоненты — создание, lifecycle, взаимодействие
5. Шаблоны и привязка данных — интерполяция, property binding

📐 Шаблоны и директивы (уроки 6–12)

6. Property и Event Binding — [prop], (event)
7. Two-Way Binding — [(ngModel)]
8. Встроенные директивы — *ngIf, *ngFor, *ngSwitch
9. Пользовательские директивы — создаём свои
10. Pipes — date, currency, async
11. Пользовательские Pipes — свои трансформации

🔧 Сервисы и DI (уроки 12–14)

12. Сервисы — бизнес-логика, singleton pattern
13. Dependency Injection — провайдеры, иерархия
14. HttpClient — HTTP запросы, перехватчики

📡 RxJS и Маршрутизация (уроки 15–20)

15. RxJS в Angular — Observable, Subject, операторы
16. Маршрутизация: основы — RouterModule, <router-outlet>
17. Маршрутизация: продвинутая — параметры, дочерние маршруты
18. Route Guards — защита маршрутов
19. Route Resolvers — предзагрузка данных
20. Lazy Loading — ленивая загрузка модулей

📝 Формы (уроки 21–24)

21. Template-driven Forms — [(ngModel)], валидация
22. Reactive Forms — FormBuilder, FormGroup
23. Валидация форм — встроенные и кастомные
24. Пользовательские валидаторы — Validator интерфейс

🧩 Продвинутые компоненты (уроки 25–31)

25. @Input и @Output — передача данных между компонентами
26. ViewChild и ContentChild — доступ к DOM и компонентам
27. Content Projection — <ng-content>
28. Lifecycle Hooks — ngOnInit, ngOnDestroy, все хуки
29. Change Detection — стратегии, оптимизация
30. Angular Modules — NgModule, организация кода
31. Standalone Components — современный Angular без NgModule

⚡ Signals и продвинутые паттерны (уроки 32–39)

32. Signals (Angular 17+) — реактивность нового поколения
33. Signals: Продвинутый уровень — computed, effect
34. Injection Tokens — InjectionToken, useValue, useFactory
35. HTTP Interceptors — перехват запросов
36. Обработка ошибок — глобальный ErrorHandler
37. Angular Animations — @angular/animations
38. Angular Material — UI компоненты
39. CDK (Component Dev Kit) — overlay, drag&drop, a11y

🏪 Управление состоянием (уроки 40–46)

40. NgRx: Введение — Flux паттерн, Redux в Angular
41. NgRx: Store и Reducers — state, actions, reducers
42. NgRx: Effects — side effects
43. NgRx: Selectors — эффективное получение данных
44. NgRx: Entity — работа с коллекциями
45. NgRx: Component Store — локальный стейт
46. NGXS — альтернатива NgRx

🧪 Тестирование (уроки 47–49)

47. Тестирование: Jasmine/Karma — unit тесты
48. Тестирование: Jest — современный подход
49. E2E тесты: Cypress/Playwright — интеграционное тестирование

🚀 Продвинутые темы (уроки 50–65)

50. SSR и Angular Universal — серверный рендеринг
51. PWA с Angular — Progressive Web Apps
52. Интернационализация (i18n) — мультиязычность
53. Оптимизация производительности — OnPush, trackBy, виртуализация
54. Web Workers — вынос вычислений в фон
55. Динамические компоненты — ViewContainerRef
56. Пользовательские Form Controls — ControlValueAccessor
57. Angular Elements — превращаем компоненты в Web Components
58. Конфигурация окружений — environment файлы
59. Оптимизация сборки — budget, tree-shaking
60. Monorepo с Nx — workspace управление
61. Микрофронтенды — Module Federation
62. GraphQL с Angular — Apollo Client
63. WebSockets — real-time приложения
64. Паттерн Facade — архитектурный паттерн
65. Лучшие практики — что делать и не делать в Angular

---

🎓 Что нужно знать заранее

Перед началом курса убедись, что у тебя есть базовые знания:

TypeScript

// Типы и интерфейсы
interface User {
  id: number;
  name: string;
  email?: string;  // необязательное поле
}

// Дженерики
function getFirst<T>(arr: T[]): T {
  return arr[0];
}

// Декораторы (важно для Angular!)
function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  console.log(`Метод ${key} вызван`);
  return descriptor;
}

HTML и CSS

<!-- Базовый HTML -->
<div class="container">
  <h1>Заголовок</h1>
  <p>Параграф с <span style="color: red">цветом</span></p>
</div>

/* Flexbox и Grid */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

Основы JavaScript

// Async/Await
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

// Деструктуризация и spread
const { name, ...rest } = user;
const newArray = [...arr1, ...arr2];

// Модули ES6
import { something } from './module';
export const value = 42;

---

💡 Как проходить курс

1. Читай последовательно — каждый урок строится на предыдущем
2. Запускай код — не просто читай, а пробуй в интерактивных примерах
3. Делай домашние задания — в конце каждого раздела есть задачи
4. Строй свой проект — применяй знания на реальном приложении
5. Задавай вопросы — нет глупых вопросов, есть невыясненные!

---

🛠️ Инструменты, которые нам понадобятся

Инструмент	Версия	Зачем
Node.js	18+	Среда выполнения JS
npm	9+	Менеджер пакетов
Angular CLI	17+	Создание и управление проектами
VS Code	последняя	Редактор кода
Angular Language Service	плагин	IntelliSense для Angular
Chrome DevTools	встроен	Отладка

---

🚀 Поехали!

Angular — это серьёзный инструмент для серьёзных задач. После прохождения этого курса ты сможешь:

• ✅ Строить корпоративные SPA с нуля
• ✅ Грамотно организовывать код в больших командах
• ✅ Использовать современные паттерны (Signals, Standalone)
• ✅ Работать с NgRx и сложным управлением состоянием
• ✅ Оптимизировать производительность приложений
• ✅ Писать тесты (unit, integration, e2e)
• ✅ Деплоить приложения с SSR

Переходи к первому уроку и начнём! 🅰️💪

---

🌍 Angular в реальном мире

Посмотрим, где Angular используется сегодня — и поймём почему крупные компании выбирают именно его.

Google

Сам Google использует Angular для многих своих продуктов:

• Google Cloud Console — управление облачной инфраструктурой
• Google Analytics — панель аналитики
• Google Ads — рекламный кабинет
• Firebase Console — панель управления базами данных

Логично: Google создал Angular, Google использует Angular. Фреймворк “ест свою собственную еду” (dogfooding).

Microsoft

• Azure Portal — управление облачными ресурсами Azure (частично Angular)
• Office 365 — веб-версии офисных приложений

Другие крупные компании

Forbes        → корпоративные внутренние системы
Deutsche Bank → финансовые платформы
Samsung       → внутренние enterprise решения
Upwork        → платформа для фрилансеров

---

🆚 Детальное сравнение: Angular vs React

Многие разработчики начинают с вопроса: “А зачем учить Angular, если есть React?” Давай ответим честно.

Размер бандла (начальная загрузка):

Angular (производственная сборка):
  main.js:      ~65 KB gzip
  полифилы:     ~8 KB gzip
  Итого:        ~73 KB

React (без библиотек маршрутизации и стейта):
  react + react-dom:  ~42 KB gzip

React (с полным стеком — Router + Redux + Axios):
  ~100-130 KB gzip

Парадокс: “лёгкий” React с полным стеком может быть тяжелее Angular!

Скорость разработки:

Маленький проект (1-2 разработчика, 3 месяца):
  React    ██████████ 10  (быстрее, меньше boilerplate)
  Angular  ███████    7

Средний проект (5 разработчиков, 1 год):
  React    ████████   8   (нужно выбрать стек, настроить)
  Angular  █████████  9

Большой проект (20+ разработчиков, 3+ года):
  React    ██████     6   (разные команды пишут по-разному)
  Angular  ██████████ 10  (единый стиль, всё по правилам)

TypeScript интеграция:

// React — TypeScript опционален
// Можно писать .js и .jsx файлы
// Типы можно не использовать

// Angular — TypeScript обязателен
// Весь фреймворк написан на TypeScript
// Декораторы требуют TypeScript
// strict: true в tsconfig рекомендуется

---

📊 Angular: исторические версии и что добавлялось

Версия	Год	Главное нововведение
AngularJS 1.0	2010	Two-way binding, ng-model, MVC
Angular 2	2016	Полное переписывание, TypeScript, компоненты
Angular 4	2017	Улучшенный router, HttpClient
Angular 6	2018	Angular Elements, CDK
Angular 8	2019	Ivy preview, differential loading
Angular 9	2020	Ivy по умолчанию, меньший бандл
Angular 12	2021	Удаление View Engine, Webpack 5
Angular 14	2022	Standalone Components!
Angular 15	2022	Standalone API стабилен
Angular 16	2023	Signals (dev preview), esbuild
Angular 17	2023	Новый синтаксис @if/@for, Signals stable
Angular 18	2024	Zoneless (экспериментально)

Важный факт о версионировании: Angular пропустил версию 3! Это было сделано намеренно, чтобы синхронизировать версии пакетов @angular/router (который уже был на версии 3) с остальными пакетами Angular.

---

🔧 Экосистема: что использовать с Angular

Angular — это центр, вокруг которого выстраивается экосистема:

                    ┌─────────────────┐
                    │    Angular App   │
                    └────────┬────────┘
                             │
         ┌───────────────────┼───────────────────┐
         │                   │                   │
    ┌────┴────┐         ┌────┴────┐         ┌────┴────┐
    │  Стейт  │         │   UI    │         │  Утилиты│
    │         │         │         │         │         │
    │ NgRx    │         │ Angular │         │ RxJS    │
    │ NGXS    │         │ Material│         │ Lodash  │
    │ Akita   │         │ PrimeNG │         │ date-fns│
    │ Signals │         │ Tailwind│         │ Zod     │
    └─────────┘         └─────────┘         └─────────┘
         │                   │                   │
    ┌────┴────┐         ┌────┴────┐         ┌────┴────┐
    │  Тесты  │         │  Сборка │         │  Бэкенд │
    │         │         │         │         │         │
    │ Jasmine │         │ esbuild │         │ NestJS  │
    │ Jest    │         │ Webpack │         │ Express │
    │ Cypress │         │ Vite    │         │ GraphQL │
    │ Testing │         │ Nx      │         │ gRPC    │
    │ Library │         │         │         │         │
    └─────────┘         └─────────┘         └─────────┘

Интересный факт: NestJS (Node.js фреймворк для бэкенда) был вдохновлён Angular и использует похожую архитектуру с декораторами, модулями и DI. Команда, знающая Angular, легко освоит NestJS!

---

🎯 Самые распространённые мифы об Angular

Миф 1: “Angular слишком сложный”

Реальность: Angular сложнее в начале, но проще при масштабировании. Как TypeScript vs JavaScript.

Миф 2: “Angular умирает, все переходят на React”

Реальность: Angular занимает стабильные 20-25% рынка фреймворков. Google активно развивает его (6 major версий за 3 года).

Миф 3: “Angular медленный”

Реальность: Angular с OnPush стратегией и Signals сопоставим по производительности с React. Разница в реальных приложениях незначительна.

Миф 4: “NgModule — это кошмар”

Реальность: В Angular 17+ NgModule опциональны. Standalone компоненты убирают большую часть boilerplate.

Миф 5: “Angular только для enterprise”

Реальность: Angular отлично подходит для проектов любого размера, просто для маленьких проектов может быть избыточен.

---

📈 Angular в 2025 году

Текущее состояние Angular:

Активность разработки:
  Релизы:         каждые 6 месяцев (major)
  Патчи:          каждые 2-4 недели
  Contributors:   400+ активных
  GitHub stars:   90,000+

Использование:
  npm downloads:  3+ миллиона в неделю
  Компании:       Google, Microsoft, Deutsche Bank...
  Разработчики:   ~1.5 миллиона активных пользователей

Новые фичи 2024-2025:
  ✅ Signals — новая реактивность без Zone.js
  ✅ @if / @for / @switch — новый шаблонный синтаксис
  ✅ Deferred loading (@defer) — отложенная загрузка компонентов
  ✅ SSR улучшения — встроенный SSR в Angular CLI
  🔬 Zoneless — экспериментально (без Zone.js вообще!)

Angular активно развивается и учится у своих конкурентов. Signals — прямой ответ на React Hooks. @if/@for — упрощение синтаксиса в ответ на критику *ngIf/*ngFor.

---

💼 Зарплаты и рынок труда

По данным различных опросов и платформ (2024):

Junior Angular Developer:
  Россия:     80,000 - 120,000 ₽/мес
  Украина:    $1,200 - $2,000/мес
  США:        $70,000 - $90,000/год

Middle Angular Developer:
  Россия:     150,000 - 250,000 ₽/мес
  Удалённо (EU/US):  $3,000 - $6,000/мес
  США:        $100,000 - $130,000/год

Senior Angular Developer:
  Удалённо (EU/US):  $6,000 - $10,000/мес
  США:        $140,000 - $180,000/год

Angular разработчики ценятся в enterprise сегменте — банки, страховые компании, государственные структуры. Там часто платят больше, чем React-стартапы.

---

🤝 Сообщество и ресурсы

Для изучения Angular, помимо этого курса:

Официальные ресурсы:

• 📖 angular.dev — официальная документация (Angular 17+)
• 🎓 angular.io/tutorial — официальный туториал Tour of Heroes
• 🐦 @angular — официальный Twitter

YouTube каналы:

• Decoded Frontend — продвинутые темы
• Angular University — полные курсы
• Fireship — быстрые обзоры

Конференции:

• ng-conf (США)
• AngularConnect (Европа)
• ng-de (Германия)