Курс по Angular

Собрание

Первая встреча традиционно считается вводной. На ней мы знакомимся, проверяем подключение, обсуждаем организационные вопросы, способы взаимодействия с преподавателем и процесс обучения.

Окружение и дополнительные библиотеки

Знакомимся с angular-cli и экосистемой Angular. Создаем и настраиваем новый Angular-проект со стадии пустого репозитория. Разбираем настройки окружения и компиляцию Angular-приложения.

Устанавливаем вспомогательные библиотеки для качественной и быстрой разработки (форматировщики кода, линтеры, библиотека ui-компонентов).

Компоненты и работа с шаблонами

Разбираем базовую конфигурацию компонента: selector, tempalte/tempalteUrl, styles/styleUrls, encapsulation.

А также синтаксис шаблонов Angular (в контексте компонента): как работает интерполяция, связывание и прослушивание событий в шаблоне.

Взаимодействие компонентов

Разбираем механизм обмена данных родительского и дочернего компонента через свойства Input и Output, и механизм двустороннего привязывания (two way binding).

Рассмотрим способы обращения к сущностям, используемым в шаблоне:

• Шаблонные переменные
• Декоратор ViewChild со всеми тонкостями работы с ним, а также деккоратор ViewChildren

Контент компонента. Вставка шаблона

Разбираем механизмы взаимодействия с контентом, переданным компоненту:

• Статичное проецирование контента - тэг ng-content
• Декоратор ContentChild для получения сущностей из контента, а также деккоратор ContentChildren

Разберем такой элемент, как ng-template, взаимодействие с ним через сущность TemplateRef, сущность ViewContainerRef и как при помощи последней создавать View из шаблона.

Directives

Разберем работу атрибутивных директив, изучим декораторы HostListener и HostBinding, напишем директиву для "бесконечного" скролла.

Разберем работу структурных директив, научимся работать с контекстом шаблона, разберем "сахарный" синтаксис структурных директив. Напишем свои структурные директивы для карусели и пагинации.

Также рассмотрим базовые атрибутивные (ngClass) и структурные (ngIf и ngFor) директивы, и лучшие практики по работе с ними.

Change Detection. Pipe

Разберем механизм обнаружения изменений в Angular, узнаем, какую роль в данном механизме играет библиотека Zone.js. Изучим стандартные стратегии Change Detection: Default и OnPush, и разберем механизмы для написания кастомной стартегии обнаружения изменений.

Изучим пайпы, их область применения, различия между pure и impure пайпами. Разберем дефолтные пайпы в Angular: json, async, currency. А также напишем собственный пайп для фильтрации данных.

Dependency Injection. Service. Работа с запросами

Разберем механизм DI в Angular, узнаем, для чего он нужен и какие проблемы решает, познакомимся с Injector сущностью, разберем способы подключения зависимостей, возможность их получения через механизм DI, а также иерархию поиска зависимостей. Узнаем зачем нужен декоратор Injectable и какие возможности он предоставляет, рассмотрим лучшие практики по созданию собственных токенов в приложении.

Разберем отправку запросов при помощи механизмов Angular, и какую роль в запросах играет Interceptor

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

Навигация

Разберем, что такое SPA, и как Angular работает с url. Рассмотрим и составим конфигурацию навигации. Изучим lazy loading, как он может помочь в оптимизации приложения и что делает preloadingStrategy. Реализуем навигацию внутри приложения, рассмотрим абсолютную и относительную навигацию в приложении. Изучим params в url, а также queryParams.

Изучим "защитников" навигации (Guards), разберем их типы, отличия и тонкости.

Формы

Изучим ControlValueAccessor, и зачем он нужен в Angular. Напишем свой кастомный инпут.

Разберем механизмы template-driven forms и reactive forms, как они устроены, нюансы работы с ними и как они связаны с ControlValueAccessor.

Изучим синхронную и асинхронную валидацию форм в контексте template-driven forms и reactive forms. Рассмотрим возможности для кастомизации состояния инпута.

Реализуем форму, состоящую из нескольких инпутов и разберем специфику работы с ней при применении template-driven forms и reactive forms.

Redux-архитектура. NgRx

Познакомимся с паттерном Redux и его реактивной реализацией - NgRx, изучим основные концепции.

Интегрируем NgRx в свой проект, научимся формировать состояние приложения и обновлять его, а также разберем агрегацию данных при помощи селекторов

Рассмотрим обработку асинхронных событий и сторонних эффектов (side effects).

Тестирование

Разберем пирамиду тестирования, рассмотрим TDD/BDD-разработку. Познакомимся с фреймворком для тестирования и тест-ранером, подключаемым в Angular по дефлоту. Изучим утилиту для настройки тестового окружения для Angular - TestBed

Разберем тестирование сервисов, как общие практики, так и специфику тестирования HttpClient. Также разберем тестирование компонентов/директив/пайпов, в том числе специфику тестирования с использованием шаблона.