Angular — DI, RxJS и формы
Маршрут Angular
| Шаг | Статья |
|---|---|
| 1 | Первая программа |
| 2 | Обзор |
| 3 | Вы здесь |
Внедрение зависимостей (DI)
Сервис — класс с @Injectable(); Angular создаёт экземпляр и передаёт в конструктор:
@Injectable({ providedIn: 'root' })
export class NotesService {
constructor(private http: HttpClient) {}
list() {
return this.http.get<Note[]>('/api/notes');
}
}
@Component({ /* ... */ })
export class NotesComponent {
notes$ = this.notesService.list();
constructor(private notesService: NotesService) {}
}
providedIn: 'root' — один экземпляр на приложение.
HttpClient и RxJS
HTTP-методы возвращают Observable, не Promise:
this.http.get<Note[]>('http://127.0.0.1:3000/notes').subscribe({
next: (data) => (this.notes = data),
error: (err) => console.error(err),
});
В шаблоне с async pipe подписка закрывается автоматически:
<li *ngFor="let note of notes$ | async">{{ note.text }}</li>
Основы RxJS — map, filter, switchMap (отмена старого запроса при новом поиске).
Маршрутизация
export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'notes', component: NotesComponent },
{ path: '**', component: NotFoundComponent },
];
<a routerLink="/notes">Заметки</a>
<router-outlet />
Формы
| Тип | Когда |
|---|---|
| Template-driven | Простые формы, ngModel |
| Reactive | Сложная валидация, FormBuilder |
Reactive example:
form = this.fb.group({
text: ['', [Validators.required, Validators.maxLength(2000)]],
});
<form [formGroup]="form" (ngSubmit)="save()">
<input formControlName="text" />
</form>
Standalone-компоненты
Современный Angular без NgModule для каждой фичи:
@Component({
standalone: true,
imports: [CommonModule, RouterLink],
template: `...`,
})
export class NotesComponent {}
Практика — Первая программа на Angular.
Связанные материалы
- Angular — архитектура платформы
- Справочник по Angular — справочник
- TypeScript
Расширение темы
Что важно понимать на практике
Тема архитектура Angular редко ограничивается только определением и одним примером. В реальной работе важно понимать контекст: зачем это нужно бизнесу, какие есть ограничения, и как решение ведет себя при росте нагрузки. Полезный ориентир: любой новый термин должен быть привязан к конкретному сценарию, где он приносит измеримую пользу.
Рабочий подход для новичка
- Сначала собрать минимальный рабочий пример.
- Затем усложнить его: добавить негативный сценарий и обработку ошибок.
- После этого проверить читаемость и поддержку: понятные имена, единый стиль, комментарии только там, где без них трудно.
- В конце — зафиксировать выводы и правила, чтобы команда использовала один подход.
Типичные ошибки
- Слишком ранняя оптимизация до понимания базового сценария.
- Смешение нескольких задач в одном большом модуле.
- Отсутствие критериев качества, из-за чего решение сложно проверить.
- Копирование кода без объяснения, почему выбран именно этот путь.
Мини-практика
Возьмите небольшой фрагмент по теме архитектура Angular и улучшите его в три шага: сначала сделайте рабочим, затем устойчивым к ошибкам, затем удобным для чтения другим разработчиком. Так формируется инженерное мышление: также "чтобы запускалось", но и "чтобы поддерживалось".
Как проверять качество результата
- Понимает ли другой человек решение без устных пояснений.
- Есть ли пример входных данных и ожидаемый результат.
- Очевидно ли, где расширять решение дальше.
- Не нарушен ли единый стиль раздела и терминов.
Если эти пункты выполняются, материал становится полезным также для знакомства с темой, но и для ежедневной практики.
Дополнительный пример
Контекст -> Решение -> Проверка -> Выводы
Такой шаблон можно применять почти к любой инженерной задаче: он помогает не терять логику и быстрее объяснять решение команде.
Углубление и сценарии применения
Сценарий 1 базовый
Сначала фиксируйте самый простой рабочий сценарий, где тема приносит понятный результат. Затем добавляйте проверку входных данных и явную обработку ошибок. Такой порядок помогает избежать хрупкой архитектуры.
Сценарий 2 командная разработка
Когда с материалом работает несколько человек, договоритесь о единых соглашениях: структура файлов, правила именования, формат примеров и критерии готовности. Это уменьшает число конфликтов и ускоряет ревью.
Сценарий 3 масштабирование
При росте проекта полезно заранее определить границы модулей, точки расширения и ответственность между слоями. Даже простая диаграмма зависимостей помогает увидеть узкие места до того, как они станут проблемой в продакшене.
Антипаттерны
- Монолитный модуль без разделения ответственности.
- Отсутствие тестовых примеров и проверяемых критериев результата.
- Скрытые зависимости, о которых знает только автор.
- Документация, которая не совпадает с текущей реализацией.
Что добавить в личный конспект
- Короткое определение термина своими словами.
- Один рабочий пример с ожидаемым результатом.
- Два частых сбоя и способ их предотвращения.
- Мини-шпаргалку по проверке качества перед публикацией.
Так материал превращается из "прочитал и забыл" в инструмент, который можно использовать в работе и обучении.
Углубление и сценарии применения
Сценарий 1 базовый
Сначала фиксируйте самый простой рабочий сценарий, где тема приносит понятный результат. Затем добавляйте проверку входных данных и явную обработку ошибок. Такой порядок помогает избежать хрупкой архитектуры.
Сценарий 2 командная разработка
Когда с материалом работает несколько человек, договоритесь о единых соглашениях: структура файлов, правила именования, формат примеров и критерии готовности. Это уменьшает число конфликтов и ускоряет ревью.
Сценарий 3 масштабирование
При росте проекта полезно заранее определить границы модулей, точки расширения и ответственность между слоями. Даже простая диаграмма зависимостей помогает увидеть узкие места до того, как они станут проблемой в продакшене.
Антипаттерны
- Монолитный модуль без разделения ответственности.
- Отсутствие тестовых примеров и проверяемых критериев результата.
- Скрытые зависимости, о которых знает только автор.
- Документация, которая не совпадает с текущей реализацией.
Что добавить в личный конспект
- Короткое определение термина своими словами.
- Один рабочий пример с ожидаемым результатом.
- Два частых сбоя и способ их предотвращения.
- Мини-шпаргалку по проверке качества перед публикацией.
Так материал превращается из "прочитал и забыл" в инструмент, который можно использовать в работе и обучении.
Углубление и сценарии применения
Сценарий 1 базовый
Сначала фиксируйте самый простой рабочий сценарий, где тема приносит понятный результат. Затем добавляйте проверку входных данных и явную обработку ошибок. Такой порядок помогает избежать хрупкой архитектуры.
Сценарий 2 командная разработка
Когда с материалом работает несколько человек, договоритесь о единых соглашениях: структура файлов, правила именования, формат примеров и критерии готовности. Это уменьшает число конфликтов и ускоряет ревью.
Сценарий 3 масштабирование
При росте проекта полезно заранее определить границы модулей, точки расширения и ответственность между слоями. Даже простая диаграмма зависимостей помогает увидеть узкие места до того, как они станут проблемой в продакшене.
Антипаттерны
- Монолитный модуль без разделения ответственности.
- Отсутствие тестовых примеров и проверяемых критериев результата.
- Скрытые зависимости, о которых знает только автор.
- Документация, которая не совпадает с текущей реализацией.
Что добавить в личный конспект
- Короткое определение термина своими словами.
- Один рабочий пример с ожидаемым результатом.
- Два частых сбоя и способ их предотвращения.
- Мини-шпаргалку по проверке качества перед публикацией.
Так материал превращается из "прочитал и забыл" в инструмент, который можно использовать в работе и обучении.
Термины простыми словами
- SLA — согласованный срок реакции и решения по обращению.
- Инцидент — сбой, который нарушает работу сервиса.
- Мастер-данные — ключевые справочники, общие для разных процессов.
- TCO — полная стоимость владения решением за выбранный период.