1. Что такое Angular

🅰️ Что такое Angular?

Angular — это платформа и фреймворк для создания клиентских приложений на HTML и TypeScript. Разработан командой Google и поддерживается огромным сообществом разработчиков. Это не просто набор утилит — это полноценная архитектура для построения сложных приложений. 🏗️

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

🏛️ Архитектура MVC/MVVM в Angular

Angular реализует паттерн MVVM (Model-View-ViewModel). Давай разберём на пальцах:

┌─────────────────────────────────────────────────────┐
│                   Angular App                        │
│                                                      │
│  ┌──────────┐    ┌──────────────┐    ┌───────────┐  │
│  │  MODEL   │◄───│  VIEWMODEL   │───►│   VIEW    │  │
│  │          │    │              │    │           │  │
│  │ Interface│    │  Component   │    │  Template │  │
│  │ Service  │    │  Class       │    │  HTML     │  │
│  │ HTTP     │    │  Properties  │    │  Binding  │  │
│  │ NgRx     │    │  Methods     │    │  Directives│  │
│  └──────────┘    └──────────────┘    └───────────┘  │
│       ▲                │                   │         │
│       └────────────────┴───────────────────┘         │
│              Двусторонняя синхронизация               │
└─────────────────────────────────────────────────────┘

Model — данные и бизнес-логика:

// user.model.ts — описание структуры данных
export interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'moderator';
}

// user.service.ts — работа с данными
@Injectable({ providedIn: 'root' })
export class UserService {
  private users: User[] = [];

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users');
  }
}

ViewModel — компонент, посредник между данными и отображением:

@Component({ selector: 'app-user-list', templateUrl: './user-list.component.html' })
export class UserListComponent implements OnInit {
  users: User[] = [];           // данные для отображения
  isLoading = false;            // состояние UI
  selectedUser: User | null = null;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.isLoading = true;
    this.userService.getUsers().subscribe(users => {
      this.users = users;
      this.isLoading = false;
    });
  }

  selectUser(user: User) {
    this.selectedUser = user;  // логика ViewModel
  }
}

View — шаблон, чистое отображение:

<div *ngIf="isLoading">Загружаю...</div>
<ul *ngIf="!isLoading">
  <li *ngFor="let user of users" (click)="selectUser(user)">
    {{ user.name }} — {{ user.role }}
  </li>
</ul>
<app-user-detail *ngIf="selectedUser" [user]="selectedUser" />

💙 TypeScript — первоклассный гражданин

Angular не просто поддерживает TypeScript — он требует его. Весь Angular написан на TypeScript. Это не случайно.

// Без TypeScript — угадай что это:
function createComponent(config) {
  return new Component(config);
}

// С TypeScript — всё ясно:
interface ComponentConfig {
  selector: string;
  template: string;
  styles?: string[];
  standalone?: boolean;
}

function createComponent(config: ComponentConfig): ComponentRef {
  return new Component(config);
}

Почему TypeScript в Angular?

Декораторы — @Component, @Injectable, @NgModule — это TypeScript фича
Строгая типизация — находишь ошибки на этапе компиляции, не в runtime
IntelliSense — IDE знает всё о твоём коде
Рефакторинг — переименование переменной обновит все использования
Документация в коде — типы это лучшая документация

// Angular DI полностью опирается на типы TypeScript
@Component({...})
export class OrderComponent {
  // Angular сам найдёт и внедрит OrderService по его типу!
  constructor(
    private orderService: OrderService,
    private router: Router,
    private store: Store<AppState>
  ) {}
}

🎯 Opinionated Framework: один путь — правильный путь

Angular называют opinionated (самоуверенным/настойчивым) фреймворком. Это значит, что у него есть жёсткое мнение о том, как нужно писать код.

❓ Как делать HTTP запросы?
✅ Angular: используй HttpClient
❌ Не Fetch, не Axios — есть HttpClient, и точка.

❓ Как управлять формами?
✅ Angular: Template-driven или Reactive Forms (два подхода, оба Angular)
❌ Не react-hook-form, не formik

❓ Как структурировать приложение?
✅ Angular: модули + компоненты + сервисы + маршруты
❌ Каждый файл делает одно: компонент рендерит, сервис работает с данными

❓ Где хранить бизнес-логику?
✅ Angular: в сервисах, НИКОГДА в компонентах

Плюсы opinionated подхода:

👥 Новый разработчик быстро понимает чужой Angular код
📋 Code review проще — есть стандарт
🏢 В команде меньше споров
📚 Документация покрывает всё

Минусы:

🔒 Меньше гибкости
📈 Крутая кривая обучения
🔧 Иногда много шаблонного кода (boilerplate)

⚡ Zone.js и Change Detection

Это магия Angular — как он знает, что нужно обновить DOM?

Пользователь нажал кнопку
         ↓
Zone.js перехватил событие
         ↓
Angular запустил Change Detection
         ↓
Angular сравнил старые и новые значения
         ↓
Обновил только изменившиеся части DOM

Zone.js — библиотека, которая “патчит” все асинхронные API браузера:

// Zone.js незаметно оборачивает:
setTimeout(() => {
  this.message = 'Привет!';
  // Zone.js знает: что-то изменилось, пора проверить!
}, 1000);

// То же с промисами:
fetch('/api/data').then(data => {
  this.items = data;
  // Zone.js: нужно перерисовать!
});

// И с событиями:
button.addEventListener('click', () => {
  this.count++;
  // Zone.js: компонент изменился!
});

Change Detection — алгоритм проверки:

// По умолчанию (CheckAlways) — проверяет каждый компонент при любом событии
@Component({ changeDetection: ChangeDetectionStrategy.Default })

// OnPush — проверяет только при изменении @Input или явном вызове
@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
export class OptimizedComponent {
  @Input() data: any;  // OnPush проверит только когда data изменится
}

🆕 В Angular 16+ появились Signals — новый способ реактивности, который постепенно заменит Zone.js!

🌐 Экосистема Angular

Angular — это не только фреймворк, это целая вселенная инструментов:

Angular CLI 🔧

npm install -g @angular/cli
ng new my-project
ng generate component users/user-list
ng build --configuration=production

Командная строка для создания, генерации и сборки Angular проектов.

Angular Material 🎨

import { MatButtonModule, MatTableModule, MatDialogModule } from '@angular/material';

// Готовые UI компоненты в стиле Material Design:
// кнопки, таблицы, формы, диалоги, меню, иконки...

Angular CDK 🧰

import { DragDropModule, OverlayModule, A11yModule } from '@angular/cdk';

// Низкоуровневые примитивы:
// drag&drop, overlay, accessibility, virtual scroll...

Angular Universal (SSR) 🖥️

// Server-Side Rendering для SEO и производительности
// Приложение рендерится на сервере → HTML → браузер
// Angular 17: встроенная поддержка SSR без доп. пакета

NgRx 📦

// Redux для Angular — управление глобальным состоянием
import { Store } from '@ngrx/store';
import { loadUsers } from './users.actions';

@Component({...})
export class UsersComponent {
  users$ = this.store.select(selectAllUsers);
  constructor(private store: Store) {
    this.store.dispatch(loadUsers());
  }
}

Nx Monorepo 🏗️

nx generate @nx/angular:app admin-portal
nx generate @nx/angular:lib shared-ui
nx affected:build  # собирает только изменённые части

🏢 Когда выбирать Angular?

Angular — это правильный выбор, если:

✅ Большая команда (5+ разработчиков) Единый стиль кода без постоянных обсуждений архитектуры.

✅ Долгосрочный проект (2+ года) Angular поддерживается Google, обратная совместимость соблюдается строго.

✅ Enterprise приложение Сложные формы, ролевая система, большой объём данных — Angular справляется.

✅ Команда любит строгую типизацию TypeScript везде, никаких any в серьёзных проектах.

✅ Нужна полная экосистема Не хочешь собирать стек из 10 отдельных библиотек.

❌ Маленький проект (лендинг, простой сайт) Избыточно. Лучше Vue или просто HTML/CSS/JS.

❌ Команда из 1-2 разработчиков Boilerplate и строгая структура замедлят работу.

❌ Нужна максимальная гибкость React даст больше свободы в выборе подходов.

🗂️ Структура Angular проекта

Типичное Angular приложение выглядит так:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── core/                    # Singleton сервисы, guards
│   │   │   ├── services/
│   │   │   │   ├── auth.service.ts
│   │   │   │   └── api.service.ts
│   │   │   └── core.module.ts
│   │   ├── shared/                  # Общие компоненты и пайпы
│   │   │   ├── components/
│   │   │   │   └── button/
│   │   │   ├── pipes/
│   │   │   └── shared.module.ts
│   │   ├── features/                # Функциональные модули
│   │   │   ├── users/
│   │   │   │   ├── user-list/
│   │   │   │   │   ├── user-list.component.ts
│   │   │   │   │   ├── user-list.component.html
│   │   │   │   │   └── user-list.component.scss
│   │   │   │   ├── user-detail/
│   │   │   │   ├── user.service.ts
│   │   │   │   └── users.module.ts
│   │   │   └── dashboard/
│   │   ├── app.component.ts         # Корневой компонент
│   │   ├── app.component.html
│   │   ├── app.module.ts            # Корневой модуль
│   │   └── app-routing.module.ts   # Маршруты
│   ├── assets/                      # Статические файлы
│   ├── environments/                # Настройки окружений
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── index.html                   # Точка входа HTML
│   ├── main.ts                      # Точка входа TypeScript
│   └── styles.scss                  # Глобальные стили
├── angular.json                     # Конфигурация Angular CLI
├── tsconfig.json                    # Конфигурация TypeScript
└── package.json                     # Зависимости

Это Core/Shared/Features архитектура — один из самых популярных подходов в Angular проектах. Каждая папка имеет чёткую ответственность.

Практика

Попробуйте концепцию в интерактивном редакторе: