Angular 2 & TypeScript Полезности
Полезные и необходимые подсказки для Angular 2 и TypeScript, начиная с самых основ и заканчивая созданием полноценного CRUD HTTP-клиента.
Все полезности предоставлены в формате программного кода, размещенного на GitHub, с достаточным количеством
комментарием для лучшего понимания. Каждый пример оформлен в виде отдельного Angular-приложения, которое
устанавливается и запускается стандартными командами npm install
и nmp start
соответственно.
Содержание полезностей:
-
TypeScript
- Типы данных
- Функции
- Классы
- Интерфейсы
- Декоратор свойств
- Декоратор классов
- Angular 2 – Простое связывание данных
- Основы компонентов Angular 2
- Barrel-файлы
-
Примеры
компонентов
- Компоненты
- CSS-стили
- Ввод данных
- Вывод данных
- Свойства компонентов
- Проекция ng-content
- Жизненный цикл
- ngOnInit
- ngOnChanges
- ngOnChanges доп. пример
- ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked, ngOnDestroy
- Контент и дочерние блоки
- ViewChild
- ViewChildren
- ContentChildren
- Компоненты
-
Директивы
- Привязка данных
- Интерполяция
- Свойства
- События
- Атрибуты
- CSS-классы
- CSS-стили
- Двустороннее связывание данных
- ngModel
- Имитация ngModel
- Встроенные директивы
- ngClass
- ngStyle
- ngIf
- ngSwitch
- ngFor
- Шаблонизация
- ngIf
- ngSwitch
- ngFor
- Template Reference Variable
- Привязка данных
-
Сервисы
- Внедрение зависимости
- Без зависимости
- Зависимость при создании экземпляра класса
- Фабрика зависимостей
- Простой сервис
- Иерархия сервисов
- Провайдеры
- Сокращенная нотация регистрации провайдера
- useExisting
- useValue
- useFactory
- OpaqueToken
- Optional
- Injector
- Неявное создание зависимости
- Внедрение зависимости
-
Роутинг
- Простой роутинг
- Дочерние маршруты
- Опциональные параметры
- Роутинг дочерних маршрутов
- Редирект
- Защита доступа
- Пример аутентификации
- canDeactivate и подтверждение отмены действия
- Resolving
-
Формы
- Template подход
- Создание формы
- CSS-классы
- Стилизация
- Сообщения об ошибках
- Вывод нескольких сообщений об ошибках
- ngSubmit
- Обработка ошибок
- Reactive подход
- FormGroup & FormControl
- Validators
- FormBuilder
- Reactive Form
- Кастомные валидаторы
- Template подход
-
HTTP
- Пример простого HTTP-клиента
- JSONP
- CRUD HTTP-клиент – Observable
- CRUD HTTP-клиент – Promise
Весь код доступен в репозитории проекта по ссылке https://github.com/sbogdanov108/angular2_cheatsheet.
При создании статьи были использованы следующие источники: