[HTML Academy] Онлайн‑курс Angular для опытных разработчиков

[HTML Academy] Онлайн‑курс Angular для опытных разработчиков



Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени.​

После завершения курса вы узнаете особенности и тонкости работы с фреймворком Angular, его отличия от других фреймворков, и научитесь работать с ним, даже если раньше никогда его не использовали.

Курс подойдет тем, кто уже умеет работать с JavaScript и ES6.

Спойлер: Программа курса

Раздел 1
Angular. Введение

В первом разделе мы рассмотрим краткую историю Angular, узнаем, что такое TypeScript, возможно ли обойтись без него, и познакомимся с интерфейсом командной строки, который позволит избавится от рутины при организации кода. После этого мы создадим приложения, вокруг которых будет строиться обучение.

• Фреймворки и библиотеки.
• Angular. История. Краткий гид по версиям.
• Обзор инструментов CLI.
• Создание Hello World приложения.
• Запуск приложения.
• Обзор структуры проекта.
• Навигация по проекту с помощью IDE.
• Введение в TypeScript.
• Что такое TS. Какие решает задачи.
• TS и Angular. Есть ли жизнь без TS.
• TS. Типы данных, модификаторы доступа.
• Классы, интерфейсы, енумы.
• Дженерики.
• Усложняем приложение (демонстрация TS в действии).

Раздел 2
Компоненты и модули

Изучим основные строительные блоки для организации визуальной составляющей приложения, что происходит в компоненте за время его жизни, и как компоненты могут «общаться» между собой. Узнаем, как разделить приложения на модули. После разобьём наше приложение на модули и компоненты.

• Компоненты в Angular.
• Создание компонентов. Передача параметров в компоненты и наружу. Прокидывание контента.
• Жизненный цикл компонента.
• События.
• Компоненты и HTML.
• Стилизация содержимого компонентов и host-контейнера.
• Датабиндинг.
• Умные и глупые компоненты.
• Модули в Angular.

Раздел 3
Директивы, пайпы

Поймём, как можно стилизовать элементы разметки из шаблона, менять разметку директивами и форматировать отображаемые значения пайпами. Узнаем, как они работают, и создадим свои. После добавим в компоненты наших приложений немного условностей для отображения.

• Введение в директивы.
• Встроенные директивы (ngIf, ngFor, ngStyle, ngClass).
• Как устроены структурные директивы.
• Создание директив.
• События.
• Передача параметров.
• Доступ к свойствам и событиям контейнера, управление контейнером и его стилизация.
• Что такое pipe.
• Встроенные pipe.
• Создание собственных pipe.

Раздел 4
Работа с формами

Узнаем разные подходы в создании форм, и какого подхода придерживаются при построении крупных приложений. Научимся валидировать, обрабатывать и синхронизировать вводимые пользователем данные. Добавим больше интерактивного взаимодействия пользователя с нашим приложением.

• Создание форм в Angular.
• Template Driven Forms.
• Reactive forms.
• Валидация форм.
• Синхронно и асинхронно.
• Собственные валидаторы.
• Связанные поля в форме.
• FormBuilder.
• ngModel.

Раздел 5
Сервисы, DI, Состояние приложения и RxJS

Изучим паттерн DI, узнаем, что такое дерево инжекторов, и зачем оно нужно. Создадим свои сервисы и поймём, почему логику лучше хранить не в компоненте. Познакомимся с библиотекой RxJS и организуем сервисы для хранения состояний.

• Концепция сервисов.
• Паттерн DI.
• Создание сервисов и их жизненные циклы.
• Дерево инжекторов.
• Сервисы для организации логики компонентов и передачи данных между ними.
• Поведенческий паттерн Observer.
• Обзор библиотеки RxJs.
• Subjects.
• RxJS операторы.
• Сервисы для хранения состояния.

Раздел 6
Работа с сетью

Изучим REST, научимся организовывать код для взаимодействия с сервером, применим паттерн адаптер в контексте наших приложений и используем перехватчики при взаимодействии с бэкендом. После совместим полученные данные с состоянием нашего приложения.

• REST. Взаимодействие с сервером.
• Интерсепторы.
• Сервис для логирования.
• Организация сервисов для взаимодействия с сервером.
• Паттерн адаптер.
• Сервисы адаптеры.

Раздел 7
Маршрутизация и аутентификация

Узнаем, как организовать маршрутизацию в Angular, как перехватывать пользователя при переходе на другие страницы и как ограничивать доступ пользователя на страницы. Научимся создавать параллельные маршруты и поймём, зачем это может быть нужно.

• Маршрутизация в приложении.
• Добавление маршрутизации в проект.
• Статичные маршруты.
• Динамические маршруты. Обработка параметров.
• Перенаправления.
• Приватные маршруты.
• Организация параллельных роутов.
• Аутентификация в приложении.

Раздел 8
Тестирование и отладка Angular-приложений

Познакомимся с методологиями тестирования и инструментами, которые помогут нам протестировать приложение. Осознаем важность тестирования и почему им нельзя пренебрегать. Затем напишем первые тесты на Jasmine и Protractor и воспользуемся утилитой для того, чтобы посмотреть насколько наше приложение покрыто тестами.

• Введение в тестирование. Виды тестов.
• Обзор фреймворков для тестирования.
• Тестирование компонент.
• Тестирование директив.
• Тестирование пайп.
• Тестирование сервисов.
• E2E тестирование на Protractor.

Раздел 9
Оптимизация и архитектура

Узнаем, как оптимизировать работу и загрузку приложения. Что делать, чтобы не утекала память. И как лучше всего строить приложение, на что обращать внимание, и какова цена пренебрежения к архитектуре. После этого организуем приоритетность загружаемых модулей, оптимизируем обновление компонентов и избавимся от утечек памяти.

• Профилирование приложения.
• Управление обновлением компонентов.
• Важность разбиения приложения на модули и ленивая загрузка.
• Стратегии загрузки приложения.
• Однонаправленный поток данных и иммутабельность.
• Перерисовка списков.
• ngOnDestroy и отписка.
• Что же дальше?

Спойлер: Организатору

Нужен организатор, который сможет выдать курс в HTML-виде.
Конкретно в каком виде нужен материал смотрите здесь: https://v14.skladchik.org/threads/html-academy-Навык-«Работа-с-dom-в-javascript»-Тариф-«Полный-комплект».283903/

Продажник