Все курсы

Продвинутый курс по Angular

Этот онлайн-курс посвящён профессиональной разработке веб-приложений с помощью Angular.

Программа

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

Вы будете получать информацию, писать код, показывать его, получать обратную связь и советы, и затем – двигаться дальше.

Мы внимательно следим за развитием Angular и будем использовать самые новые подходы.

Курс можно условно разделить на три части.

  1. Angular изнутри, знание важных деталей работы фреймворка.
  2. Реактивный подход c Rxjs, Redux (ngRx).
  3. Тесты, сборка, безопасность.

Детали программы смотрите далее.

Основные темы программы

  • Первая часть курса
  • Вторая часть курса
  • Третья часть курса

Первая часть курса

  1. Сложные компоненты, директивы, пайпы

    • View и Content. Работа с ViewChildren/ContentChildren
    • Экспорт контроллера директивы (ExportAs)
    • Наследование компонентов и переопределение шаблонов
    • Структурные директивы. ViewRef/TemplateRef
    • Динамические компоненты. ComponentFactoryResolver и NgComponentOutlet
    • Impure pipes
    • Angular Elements для изолированных компонетов
  2. Dependency injection в деталях

    • Рецепты для провайдеров
    • Отличие Providers и ViewProviders
    • Использование Injector отдельно от Angular
    • Приципы работы инжекторов: Reflective и Static
  3. Change Detection механизм

    • ZoneJS/ NgZone для удобного управления асинхронностью
    • Однонаправленое дерево механизма обновления состояния
    • Статегия OnPush и иммутабельные объекты
    • Как работать с Observables или markForCheck
    • Делаем свою стратегию обновлений: attach/detach
  4. Продвинутая работа с роутером

    • Ленивая загрузка(lazy loading) и предзагрузка модулей
    • Анимация смены стейта

По окончанию первой части курса вы понимаете, как разработать простое приложение на Angular.

Вторая часть

  1. Реактивное программирование и RxJs

    • Observables: создание и использование
    • Subjects: применение и типы
    • Работа с расписанием (Schedulers)
  2. ngRx

    • Основы Redux
    • ngRx Store
    • ngRx Selectors для более удобной работы со Store
    • помещаем асинхронность в рамки Redux - ngRx Effects

Третья часть

  1. Сборка

    • Секреты angular-cli
    • Schematics
    • Ivy – рендерер Angular7
    • Unit-тесты для реактивных сущностей
  2. Angular & PWA

    • Service Workers для поддержки offline
    • Получение обновлений
    • Push notifications
  3. Серверный рендеринг (SSR)

    • Настройка пререндеринга на сервере
    • Повторное использование данных SSR
  4. Безопасность

    • Блокировка доступа с помощью canActivate
    • Ограничение доступа через HTTP интерсепторы
    • ACL для организации сложной системы доступа
    • Auth0 для авторизации, JWT токены
    • Защита от XSS и XSRF атак
    • Политики доверенных ресурсов

Как проходит обучение?

Курс будет проходить по схеме 6 + 2, т.е. 6 занятий, возможен недельный перерыв, затем ещё 2. Так оптимально, чтобы все участники имели время подумать над предложенными подходами и что-то написать с их использованием. Первая встреча традиционно является собранием.

На каждом занятии мы изучаем что-то новое. После встречи даётся домашнее задание.

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

Мы изучаем как сам Angular, так и вспомогательные библиотеки RxJs, ngRx и zone.js

Результат обучения

  1. Вы хорошо понимаете тонкости реактивного подхода Angular.
  2. Вы знаете, как создавать большие многомодульные проекты.
  3. Вы разбираетесь в возможностях фреймворка в плане организации безопасноти.
  4. Вы умеете использовать сторонние библиотеки и создавать свои.
  5. Вам не кажется сложным переход к Redux стейт машине.
  6. Вы пишете автоматизированные юнит и функциональные тесты.

Гарантия

  • Если объяснения будут вам непонятны
  • Если курсы не дадут вам новых знаний и умений
  • Если вы не сможете подключиться к системе онлайн-обучения

…то вы сможете получить деньги назад.

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

Преподаватели

PhotoСтепан Суворов

JavaScript разработчик и консультант, спикер, активный участник фронтенд сообщества. Занимаюсь программированием более 12 лет(из них 8 лет страстно увлечен JavaScript, 5 лет исследований и экспериментов с Angular).

CTO @ StudyTube, https://studytube.nl.

PhotoИгорь Непипенко

Занимаюсь современной frontend-разработкой с использованием Angular более 5 лет.

Интересуюсь передовыми технологиями web-разработки и использую их в проектах. Более 2 лет веду обучение в области frontend-технологий.

В последние годы работал как Team/Tech Lead в разработке enterprise-приложений для CША.

Являюсь соучредителем и техническим руководителем компании http://jsdaddy.io/. Также имею большой опыт преподавания математических дисциплин в ВУЗе.

Дополнительная информация

  • Для участия в этом курсе необходимо знание Angular. До начала обучения выдаётся вводный видеокурс по основам языка, особенно полезный для тех, кто начинает с нуля.

  • Windows или Mac поддерживаются полностью.

    Под Linux доступно участие онлайн и просмотр видеолекций, но для просмотра записей занятий нужен Dual Boot в Win/MacOS.

    Для онлайн-общения желателен интернет от 256kb/s.

Комментарии

перед тем как писать…
  • Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.