Все курсы

Курс по Angular

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

Angular
Ближайшая группа
Перейти к записи

Цели курса

  • Быстро и качественно начать создавать приложения с использованием современного Angular.
  • Отлаживать уже существующие приложения и проводить их улучшение.
  • Научиться использовать ряд вспомогательных библиотек, часто дополняющих Angular.

Как организовано обучение?

Курс идёт 6 недель.

До начала обучения: вводные материалы

Мы будем использовать систему Git/GitHub для обмена исходным кодом, так делает большинство проектов. Для тех, кому это в новинку - дадим крэш-курс и поможем разобраться.

Онлайн-занятия с преподавателем 2 раза в неделю

Занятие проходит в формате вебинара. Запись занятия доступна через 15 минут после окончания. Вы также сохраняете доступ к записям после окончания курса.

Домашние задания, обратная связь по ним

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

Чат

Между занятиями доступен групповой чат для общения и вопросов преподавателю.

Курсовой проект

Делаем курсовой проект: интернет-магазин. Большую часть кода для проекта пишете вы.

Результат

Вы хорошо знаете Angular, свободно разрабатываете и отлаживаете приложения.

Вы умеете проектировать и создавать сложные интерфейсы.

Сертификат

По окончанию курсов вы получаете сертификат в электронном виде на русском и английском языках.

Хотя сертификатам в нашей профессии обычно не придают значения. Главное - знания и умения, которые вы получите, если будете полноценно участвовать в курсе.

img

Программа по занятиям

Программа может быть дополнительно адаптирована под темп обучения и вопросы группы.

Собрание

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

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

Знакомимся с 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. Также разберем тестирование компонентов/директив/пайпов, в том числе специфику тестирования с использованием шаблона.

Курсовой проект

Интернет магазин.

  • Одностраничное приложение с динамической подгрузкой страниц.
  • Redux-архитектура.
  • Фильтрация товаров по нескольким критериям с сохранением состояния.
  • Слайдер, tooltip, и ряд других графических компонентов на Angular.

Предварительные требования

  • Знакомство с HTML/CSS: верстать макеты не понадобится, но основные теги, позиционирование, margin/padding надо знать.
  • Знание современного JavaScript.
  • Интернет 256кб/с или быстрее для видео.

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

Photo
Егор СидоровВедёт курс с 17 февраля 2022

Front-end | Angular разработчик в Tinkoff, занимаюсь разработкой чата для обслуживания и CMS для контроля качества. В Angular-разработке уже более 5 лет.

Также обучаю разработке в финтехе и провожу собеседования по Angular.

Что говорят о курсе участники?

Мы занимаемся обучением с 2007 года. За это время у нас обучились тысячи разработчиков из разных стран и компаний.

Все отзывы являются честными. Мы не модерируем их.

Курс регулярно обновляется. Все отзывы относятся к последней версии курса.

Гарантия

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

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

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

Для компаний

У нас большой опыт работы с самыми разными компаниями: как маленькими, так и IT-гигантами.

  • При записи нужно выбрать способ оплаты "счёт на компанию", и документы будут автоматически сгенерированы: договор, акт и счёт, есть лицензия.
  • Для зарубежных компаний выдаём инвойс на английском языке.

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

Если остались вопросы – посмотрите в часто задаваемых, напишите в комментариях внизу этой страницы или на почту help@javascript.ru (ответ обычно в течение дня), а если срочно — задайте по телефону +7-903-5419441.

Комментарии

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