Курс Angular 8

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

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

Данный курс не требует никаких предварительных знаний по Angular или другим фреймворкам. Все дано с нуля

Курс содержит в себе 14 часов обучающих материалов, которые последовательно и очень подробно научат вас самым актуальным знаниям по прекрасной Frontend технологии Angular от компании Google.

Из предварительных знаний только основы. Остальное в курсе рассказывается с самого нуля, включая TypeScript и RxJS

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

Курс состоит из двух больших блоков: теоретического и практического.

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

В теоретическом блоке собрано все, что только может вам понадобится при разработке с Angular.

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

Почему Angular это круто?

Модули

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

Компоненты

Компоненты отвечают за внешний вид и за взаимодействие с пользователем. Компоненты – это часть пользовательского интерфейса, они представляют основные «строительные блоки» приложения Angular. Идея компонентов состоит в том, чтобы разделить пользовательские интерфейсы на составные части.

Двустороннее связывание

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

Компания Google

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

Ключевые возможности Angular

Создание реактивных приложений

Благодаря Angular появилась возможность максимально быстро и просто создавать динамические реактивные приложения (обычные веб-сайты). Такие приложения работают без перезагрузки страницы и при переходе на новую страницу она появляется моментально, в отличие от обычных сайтов. Любое взаимодействие с пользователем происходит асинхронно в фоновом режиме, что ускоряет взаимодействие и увеличивает удобство использование сайта.

Директивы

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

Отложенная загрузка

Основная задача Angular Team по оптимизации быстродействия приложения была в том, чтобы добиться автоматической отложенной загрузки. Это гарантирует нашим приложениям только то, что необходимо для текущей страницы. Ленивая загрузка также была включена при маршрутизации в приложениях.

Быстрый рендеринг

По сравнению с первой версией приложения на последней версии Angular работают в 2,5 раза быстрее, а перерисовка в 4,2 раза быстрее – за счет использования технологии shadow DOM. Команда Angular считает, что она может сделать рендеринг еще более быстрым.

Описание курса

Введение

О данном курсе
Что потребуется для прохождения курса
Что такое Angular
Как проходить курс

Основы и синтаксис

Как создать приложение
Обзор всех папок и фаи?лов
Передача параметров из компонентов
Создание своего компонента
Создание компонента с Angular CLI
Шаблоны и стили
Интерполяция
Что такое bindings
Как работает Event Bindings
Way Binding
Директива ngStyle
Динамические классы с ngClass
Отображение по условию с ngIf else
Директива ngSwitch
Циклы с ngFor
Что такое pipes

Компоненты в деталях

Как создавать компоненты
Передача параметров
Передача параметров из компонентов
Доступ до HTML элементов
Передача HTML в компонент
Доступ до контента с ContentChild
Жизненныи? цикл (lifecycle hooks)
Change Detection Strategy
Стили с ViewEncapsulation

Директивы

Как создать директиву
Получение доступа до элемента
Добавление событии?
Передача параметров в директиву
Как работает HostBinding
Создание структурнои? директивы

Пайпы

Работа с числами
Паи?пы для строк
Как находить информацию в документации
Паи?пы для даты
Еще паи?пы
Создание своего паи?па
Генерация паи?па с CLI
Фильтрация списков
Оптимизация паи?пов
Паи?п async

Сервисы

Создание сервиса
Декоратор Injectable
Локальные сервисы
Область видимости сервисов
Связь сервисов

Формы и валидация

Вводный
Создание формы
Создание контролов
Валидаторы
Визуализация состоянии?
Отображение сообщении? ошибок
Создание групп
Динамическое обновление формы
Работа с группои?
Создание своего валидатора
Асинхронные валидаторы
Очистка формы
Создание своей ngModel

Работа с сервером (HttpClient)

Вводныи?
Получение данных и вывод в шаблон
Создание объектов с POST
RxJS операторы и индикатор загрузки
Удаление элементов
Перенос логики в сервис
Модификация элементов с PUT
Обработка ошибок
Добавление headers
Работа с параметрами
Параметр observe
Перехват запросов с интерсептором
Модификация запросов и обработка ответов

Мультистраничность с роутингом

Что такое роутинг
Регистрация роутов
Динамическая смена страниц
Активная ссылка
Программная навигация
Динамические роуты
Обработка параметров
Работа с параметрами
Вложенные страницы
Редирект и обработка ошибок
Защита страниц
Защита дочерних роутов
Как работают Resolvers

Как работают модули

Введение
Что есть в модулях
Создание отдельного модуля
Ленивая загрузка модулеи?
Новый синтаксис импорта
Изменение стратегии загрузки

Дополнительные возможности

Динамические компоненты. Часть
Динамические компоненты. Часть
SEO. Работа с тегами
PWA модуль

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

Введение в Unit тесты
Тестирование строк и массивов
Тестирование Angular компонента
Тестирование EventEmitter
Тестирование формы
Тестирование сервиса
Добавление элементов
Тестирование confirm метода
Статистика покрытия тестов
Интеграционное тестирование
Настрои?ка
Тестирование шаблона и свои?ств
Cобытия и классы
Добавление Dependency Injection
Генерирование тестов
Тестирование роутера
Тестирование параметров url
Поиск динамических директив
Тестирование ссылки в шаблоне
Асинхронность
Тестирование директив

Анимации

Настрои?ка анимации?
Определение состоянии?
Добавление transition
Сложные переходы
Появление и исчезновение
Группировка анимации?
Доступ до дочерних элементов
Шаги анимации
События анимации
Библиотека ng-animate

Практика. Создание блога

Создание приложения
Создание главного layout
Модуль панели администратора
Оформление главнои? страницы
Страница поста
Структура admin layout
Страница входа. Урок
Страница входа. Урок
Сервис для авторизации
Настрои?ка firebase
Хранение токена
Обработка ошибок
Защита роутов
Форма создание поста
Подключение плагина редактора
Создание поста
Создание интерсептора
Вывод списка постов
Паи?п для фильтрации списка
Удаление поста
Страница редактирования поста
Редактирование поста
Создание плагина сообщении?
Регистрация локализации
Вывод постов
Отображение поста
Добавление PWA
Деплои? приложения

Бонус. Typescript для Angular

Базовые типы
Работа с функциями
Работа с классами
Интерфеи?сы и объекты
Интерфеи?сы и классы
Генерик типы

Бонус. Основы RxJS

Как работает RxJS
Оптимизация стримов
Как использовать операторы
Создание своего стрима
Как работает Subject

Всего 17 часов видеолекций