Оглавление
Angular
Фреймворк от Google для больших приложений: компоненты, сигналы, сервисы, маршруты и формы.
1.Начало работы
- Что такое AngularФреймворк Angular: из чего состоит приложение, чем он отличается от библиотек и когда его стоит выбрать.
- Установка и новый проектУстановка Angular CLI, создание проекта командой ng new и обзор его папок и файлов.
- ng serve и команды CLIСервер разработки ng serve, генерация файлов через ng generate и другие команды Angular CLI.
- КомпонентыИз чего состоит компонент Angular: класс, декоратор @Component, шаблон и стили, и как вывести компонент на страницу.
2.Шаблоны и сигналы
- Синтаксис шаблонов и интерполяцияКак вывести данные компонента в шаблон: интерполяция, выражения, вызовы методов и ограничения шаблонов.
- Привязка свойств и событийКвадратные скобки передают значение в свойство элемента, круглые подписывают метод на событие.
- Сигналы: signal, computed, effectРеактивные значения Angular: сигнал хранит данные, computed вычисляет из них новые, effect выполняет действие при изменении.
- Управляющие блоки @if, @for, @switchУсловный вывод и списки в шаблоне Angular: блоки @if, @else, @for с track и @empty, @switch.
3.Компоненты вместе
- Входные данные: input()Как передать данные из родительского компонента в дочерний с помощью функции input().
- Выходные события: output()Как дочерний компонент сообщает родителю о действии пользователя с помощью output().
- Двусторонняя привязка: model()Как родитель и дочерний компонент вместе меняют одно значение: функция model() и запись [( )].
- Проекция содержимого: ng-contentКак передать в компонент готовую разметку: тег ng-content, несколько слотов и атрибут select.
- Жизненный цикл компонентаЧто происходит с компонентом от создания до удаления: ngOnInit, ngOnChanges, ngOnDestroy и DestroyRef.
4.Сервисы и HTTP
- Сервисы и внедрение зависимостейКак вынести общую логику в сервис, получить его в компоненте через inject() и что значит providedIn: 'root'.
- HttpClient: загрузка данныхПодключение HttpClient, сервис для запросов к API и вывод списка статей блога в компоненте.
- Основы RxJS для AngularМинимум RxJS, который нужен в Angular: Observable, subscribe, pipe с операторами, пайп async и toSignal.
- HttpClient: отправка данных и ошибкиPOST-запрос для создания статьи, состояние загрузки и обработка ошибок сервера в Angular.
- Перехватчики HTTPФункции-перехватчики HttpInterceptorFn: общий заголовок для всех запросов, журнал запросов и регистрация через withInterceptors.
5.Маршрутизация
- Маршрутизация: настройка и маршрутыМаршруты в Angular: файл app.routes.ts, тег router-outlet, ссылки routerLink, перенаправления и страница 404.
- Параметры маршрута и навигацияМаршрут /posts/:id, ссылки с параметрами, чтение id через input() или ActivatedRoute и переход из кода через Router.
- Вложенные маршруты и ленивая загрузкаДочерние маршруты children со вторым router-outlet и загрузка страниц по требованию через loadComponent и loadChildren.
- Защитники маршрутовФункции-защитники CanActivateFn: как закрыть страницу от гостей и перенаправить их на вход.
6.Формы
- Формы на шаблонахШаблонные формы Angular: FormsModule, директива ngModel, отправка через ngSubmit и сброс формы.
- Реактивные формыРеактивные формы Angular: FormGroup и FormControl в классе, привязка formGroup и formControlName, FormBuilder.
- Проверка данных формыВалидаторы Angular: Validators.required и minLength, сообщения об ошибках, блокировка кнопки и свой валидатор.
7.Инструменты и выпуск
- Пайпы: встроенные и своиПайпы форматируют значения прямо в шаблоне: date, currency, uppercase, slice, а также собственный пайп через ng generate pipe.
- Атрибутные директивыСвоя директива Angular: ng generate directive, селектор-атрибут, свойство host для событий и стилей, входной параметр.
- Стили и инкапсуляцияСтили компонента и глобальные стили, привязки class и style, селектор :host и режимы ViewEncapsulation.
- Основы тестированияКоманда ng test, файлы .spec.ts, тест сервиса через TestBed.inject и тест компонента через TestBed.createComponent.
- Сборка и публикацияКоманда ng build, папка dist, base href, файлы окружения и настройка сервера для одностраничного приложения.