Angular 4 c Нуля до Профи
Опубликовано: 23.08.2018
Теория Angular
(наведите курсор мыши на урок, чтобы смотреть детально)
Блок 1.
Теория.
Введение и установка
Это первый вступительный блок в курс по Angular где вы познакомитесь с базовыми знаниями и понятиями, которые будут использоваться в курсе.
Вы узнаете, что такое Angular, где он используется, какие задачи он решает и почему стоит учить именно его. Вы узнаете, чем отличается Angular 2 от Angular 4 и какую версию будем проходить мы в курсе.
Презентация видеокурса «Angular 4 c Нуля до Профи»
Далее вы узнаете, как очень просто установить Angular на компьютер и запустить первый проект на нем уже в режиме разработки. И далее мы рассмотрим полностью структуру проекта, для того, чтобы вы полностью понимали, что за что отвечает, и вам было просто работать.
Урок 1. Что такое Angular 
В этом уроке вы узнаете, что такое Angular, где он используется, какие задачи он решает и почему стоит учить именно его. Вы узнаете, чем отличается Angular 2 от Angular 4 и какую версию будем проходить мы в курсе.
Урок 2. Установка Angular 
В данном уроке вы узнаете, как очень простым способом установить Angular на компьютер и запустить первый проект на нем уже в режиме разработки.
Урок 3. Обзор структуры проекта 
В этом уроке мы рассмотрим полностью структуру проекта и каждый из его файлов. Вы узнаете, что за что отвечает и поймете, где необходимо вносить изменения.
Блок 2.
Теория.
СинтаксисВ данном блоке вы познакомитесь с базовыми понятиями и структурами, которые есть во фреймворке Angular.
Начнем мы с изучения того, как вообще Angular работает и запускается в браузере. Далее мы детальнее посмотрим на то, что такое компоненты, как их создавать несколькими способами и как они работают.
Далее вы познакомитесь с уникальным синтаксисом Angular, узнаете, что такое “2 way binding”, директивы и пайпы.
Урок 1. Создание компонента 
В данном уроке вы узнаете, как работают компоненты, какие базовые настройки у них есть и увидите 2 способа, как можно их создавать.
Урок 2. Шаблоны и стили компонента 
В данном уроке вы более детально познакомитесь с настройками компонента и узнаете, как можно по-разному задавать шаблоны и стили.
Урок 3. Селекторы в компонентах 
В этом уроке мы рассмотрим еще одну базовую настройку компонента – селектор.
Урок 4. Связка компонента и шаблона. Свойства 
В этом уроке вы узнаете, как связывать шаблон и компонент – как выводить динамические данные для отображения и как связывать компоненты.
Урок 5. Связка компонента и шаблона. События 
В данном уроке вы узнаете, как можно делать обратную связку шаблона и компонента, как получить какие-то данные в компоненте, если мы что-то меняем или делаем в шаблоне.
Урок 6. Связка компонента и шаблона. Двухстороннее связывание 
В данном уроке вы познакомитесь с очень мощной возможностью, которую нам предоставляет Angular - 2 way data binding.
Урок 7. Директива ngIf else 
В этом уроке вы познакомитесь с таким понятием как директивы, с сущностями во фреймворке, которые позволяют крайне удобно манипулировать шаблоном. И данный урок посвящен директиве, которая помогает показывать или скрывать элементы.
Урок 8. Директива ngFor 
В данном уроке вы узнаете про еще одну очень важную директиву, которая очень удобно позволяет выводить однотипные данные в цикле прямо в шаблоне.
Урок 9. Директивы ngStyle и ngClass 
В данном уроке мы рассмотрим еще 2 директивы, которые позволяют динамически менять стили и классы у любых элементов.
Урок 10. Пайпы 
В этом уроке вы узнаете, что такое пайпы и мы рассмотрим некоторые встроенные из них.
Блок 3.
Теория.
КомпонентыС этого блока, мы начнем детальное изучение каждой из сущности Angular.
Данный блок посвящен компонентам – одной из самых основных сущностей фреймворка.
В блоке мы детальнее поговорим про настройку компонентов. Вы узнаете, как их связывать параметрами, как оптимизировать работу компонентов, как обращаться к внутренним элементам. Узнаете, что такое жизненный цикл компонентов, и как его использовать.
Урок 1. Передача параметров в компонент 
В данном уроке вы узнаете, каким образом можно передавать параметры в свой собственный компонент.
Урок 2. Получение данных из компонента 
В данном уроке вы узнаете, как получать нужные данные из своего компонента.
Урок 3. Область видимости CSS 
В этом уроке вы познакомитесь с одним нововведением во фреймворке – область видимости CSS. Благодаря данной возможности пропадает вся необходимость в различных методологиях верстки и пересечения названий классов. Вы научитесь управлять данной возможностью.
Урок 4. Доступ к DOM элементам 
В данном уроке вы узнаете, как получать доступ к DOM элементам внутри компонента не просто через javascript, а используя оптимизированный способ, который нам предоставляет Angular.
Урок 5. Передача HTML-кода компоненту 
В данном уроке вы узнаете, как можно передавать HTML-код своему компоненту. Также вы узнаете, как получить к нему доступ.
Урок 6. Жизненный цикл компонента 
В данном уроке вы узнаете, что такое жизненный цикл у компонента, как его правильно использовать, а также познакомитесь со всеми его этапами.
Блок 4.
Теория.
ДирективыВ этом блоке вы детально познакомитесь с директивами.
Помимо встроенных директив, Angular предоставляет нам возможность создавать свои собственные директивы. И, в основном, в данном блоке мы будем говорить именно про создание.
Вы узнаете несколько способов, как создавать директивы, какие есть варианты для манипуляции над элементами внутри директив, как получать параметры в директиве и как добавлять прослушку различных событий.
Урок 1. Создание директивы 
В данном уроке вы узнаете, как можно создавать свои директивы несколькими способами.
Урок 2. Использование Renderer 
В данном уроке вы узнаете, что такое Renderer и почему нужно использовать именно их, а не nativeElement. Так же вы познакомитесь с новым интерфейсом Renderer2.
Урок 3. Работа с событиями 
В этом уроке вы узнаете, как работать с различными событиями в директивах, например, клик, наведение мыши. Вы узнаете, почему для этого правильно использовать декоратор.
Урок 4. Передача параметров 
В данном уроке вы узнаете, как правильно передавать параметры в директиву и как выставлять параметры по умолчанию.
Урок 5. Директива ngSwitch В данном уроке мы разберем еще одну полезную директиву, которая появилась в Angular 4 для более удобного условного отображения HTML-элементов.
Блок 5.
Теория.
ПайпыБлок посвящен очень важной части Angular – пайпам. Помимо стандартных пайпов мы разберем, как создавать свои и разберем несколько областей их применения.
Пайпы – это такие конструкции, которые помогают преобразовывать HTML-код в удобный нам формат. Например, с помощью них обычный new Date в Javascript мы можем привести в нужный формат всего лишь за пару символов. Или мы можем управлять строками, циклами, объектами, и так далее.
Урок 1. Использование пайпов 
В данном уроке вы более детально познакомитесь со стандартными пайпами в Angular.
Урок 2. Создание своего пайпа 
В этом уроке вы узнаете два способа создания пайпов.
Урок 3. Создание динамического фильтра 
В данном уроке вы узнаете, как можно создать фильтр пайпов, который позволит в динамическом режиме менять содержимое HTML-списка.
Урок 4. Оптимизация пайпов 
В данном уроке вы узнаете, как можно оптимизировать работу пайпов и познакомитесь с такими понятиями как pure и impure пайпы.
Урок 5. Async пайп 
В этом уроке речь пойдет про еще один встроенный пайп в Angular - async пайп, который очень сильно помогает в работе с асинхронными событиями, например, со стримами RxJS, промисами и т.д.
Блок 6.
Теория.
СервисыВ данном блоке вы узнаете, что такое сервисы и как они используются в Angular.
Мы начнем с того, что разберем, как мы можем создавать сервисы и далее рассмотрим взаимодействие компонентов через сервис.
Вы узнаете, как использовать сервис внутри сервиса, сколько экземпляров сервисов вообще есть в приложении и как, и где правильно их подключать.
Урок 1. Создание сервиса 
В данном уроке вы узнаете, как правильно создавать сервисы и как их использовать в компонентах.
Урок 2. Связь компонентов через сервис 
В этом уроке вы узнаете про то, сколько экземпляров сервисов может быть на проекте, какие потенциальные ошибки могут быть из-за этого, и как их исправить.
Урок 3. Использование сервиса в сервисе 
Часто возникает задача, когда нужно подключить один сервис в другой. В этом уроке мы разберем, как это осуществить.
Блок 7.
Теория.
ФормыВ блоке мы разберем 2 подхода по работе с формами внутри Angular: 1) когда мы делаем валидацию внутри шаблона; 2) когда мы делаем валидацию внутри компонента – в typescript коде.
Также мы рассмотрим способы создания своих собственных синхронных и асинхронных валидаторов.
Одна из самых популярных тем в Angular – это работа с HTML-формами. Теперь для того, чтобы проверить правильность введенных данных нам не нужно ждать ответа сервера: мы все будем проверять на ходу, динамически и моментально. Например, если форма будет требовать от пользователя ввести почтовый адрес, то он не сможет отправить форму на сервер, пока не введет корректный формат. Или если уже такой email занят, то он так же получит моментальный ответ.
Angular предоставляет нам крайне простые и удобные инструменты по реализации подобных валидаций на ходу: мы можем проверять любые состояния, добавлять любые сообщения об ошибке или успехе, добавлять нужные цвета или классы буквально за пару строк кода!
Урок 1. Вводный 
В данном уроке вы узнаете про то, какие есть подходы в Angular по работе с формами.
Урок 2. TD Создание формы 
С этого урока мы начнем разбор первого подхода – шаблонного, где научимся инициализировать формы.
Урок 3. TD Валидация формы 1 
В этом уроке вы узнаете, как можно валидировать нужные поля, если в них есть ошибки.
Урок 4. TD Валидация формы 2 
В этом уроке мы продолжим валидацию полей, и поговорим про то, как получить доступ уже к конкретным контролам и вывести красивое сообщение об ошибке.
Урок 5. TD Значения по умолчанию 
В этом уроке мы рассмотрим возможность по добавлению значений по умолчанию в контролы формы.
Урок 6. TD Группировка форм 
В данном уроке вы узнаете, как можно группировать логические контролы формы в группу и работать с ними.
Урок 7. TD Динамическое изменение формы 
В этом уроке вы узнаете, как можно в шаблонном подходе управлять формой программно.
Урок 8. R Создание формы 
В этом уроке мы начнем рассматривать следующий способ создания форм в Angular используя реактивный подход.
Урок 9. R Валидация формы 
В данном уроке вы узнаете, как валидировать контролы формы через компонент, ничего не меняя в шаблоне.
Урок 10. R Группировка форм 
В данном уроке вы узнаете, как сгруппировать некоторые логические контролы в группу.
Урок 11. R Создание валидатора 
В данном уроке вы узнаете, как можно создавать свои валидаторы для контролов и как правильно их регистрировать.
Урок 12. R Создание асинхронного валидатора 
В данном уроке вы узнаете, как создавать асинхронные валидаторы и как их применять и подключать к контролам.
Блок 8.
Теория.
HTTPДанный блок посвящен очень важной теме для SPA – асинхронное и фоновое общение с сервером.
В данном блоке вы познакомитесь с умной Angular реализацией AJAX, узнаете, что такое REST API. Мы рассмотрим множество возможностей, как можно оптимизировать работу с сервером: начиная с выбора метода по отправке запроса и заканчивая темой, как добавлять различные хедеры в запрос.
Также мы плотнее познакомимся с концепцией Observable, научимся обрабатывать выходные данные и рассмотрим, как мы можем обрабатывать различные ошибки сервера.
Урок 1. Настройка сервера 
В данном уроке мы настроим json-server, который будет нам отдавать данные из базы данных.
Урок 2. Получение данных. Метод GET 
В этом уроке вы узнаете, как начать использовать http-класс, и мы сделаем первый get-запрос для получения данных.
Урок 3. Вывод данных в шаблон 
В данном уроке мы рассмотрим, как парсить полученные данные с сервера и выводить их в шаблон.
Урок 4. Добавление элементов. Метод POST 
В этом уроке вы познакомитесь со следующим методом http-объекта – post, предназначенный для создания объектов в базе данных.
Урок 5. Изменение элементов. Метод PUT 
В этом уроке мы рассмотрим следующий метод, который позволяет редактировать уже существующие записи в базе данных.
Урок 6. Удаление элементов. Метод DELETE 
В этом уроке мы рассмотрим еще один метод, который необходим для удаления объектов.
Урок 7. Добавление хедеров 
В данном уроке вы узнаете, как добавлять разные хедеры в http-запросы.
Урок 8. Обработка ошибок 
В этом уроке вы узнаете, как правильно используя Observable обрабатывать серверные ошибки и уведомлять пользователей.
Урок 9. Async пайп 
В данном уроке вы узнаете, как с помощью async пайпа можно упростить вывод данных пришедших с сервера в шаблон.
Блок 9.
Теория.
РоутингДанный блок посвящен роутингу - инструменту, который позволяет моментально переключать страницы сайта.
В блоке вы узнаете, как создавать роуты, как правильно их регистрировать, как делать базовую навигацию между страницами и зачем для этого нужны специальные директивы.
Далее вы детально увидите хитрости и тонкие моменты работы с роутами, например, отличие относительного или абсолютного пути. Узнаете, как сделать двойной роутинг, научитесь делать редирект и познакомитесь с таким понятием как guard.
Урок 1. Создание роутов 
В данном уроке вы узнаете, как можно создать роуты, какие интерфейсы для этого используются и какие особенности нужно учитывать при их создании.
Урок 2. Создание роутинг модуля 
В этом уроке вы увидите, как и зачем создать отдельный роутинг модуль.
Урок 3. Навигация между страницами 
В этом уроке вы научитесь делать базовую навигацию между страницами и поймете разницу между относительным и абсолютным способом навигации.
Урок 4. Программная навигация 
В данном уроке вы узнаете, как можно переключаться между страницами программно, и какие специальные классы для этого имеются.
Урок 5. Параметры адресной строки. Урок 1 
В данном уроке вы узнаете, как передавать различные параметры при навигации, как их обрабатывать и регистрировать.
Урок 6. Параметры адресной строки. Урок 2 
В этом уроке вы узнаете еще про несколько способов передачи различных параметров через url.
Урок 7. Встроенные роуты 
В данном уроке вы узнаете, как можно встраивать роуты в роуты и делать дочернюю перелинковку.
Урок 8. Редирект и обработка ошибок 
В этом уроке вы узнаете, как делать редирект с роутов и как сделать страницу «404».
Урок 9. Защищенные роуты 
В этом уроке вы узнаете про то, как сделать доступность тех или иных роутов по условию, и познакомитесь с концепцией Guard.
Блок 10.
Теория.
МодулиДанный блок посвящен очень важной части Angular - модулям.
Модули – это основополагающие сущности фреймворка, с помощью которых мы можем группировать различные элементы и оптимизировать наше приложение.
Урок 1. Создание модуля 
В данном уроке вы увидите, как можно создать новый модуль.
Урок 2. Создание общего модуля 
В этом уроке вы узнаете, как можно создать модуль для общих частей нашего приложения, для последующей оптимизации, и какие особенности есть у подобных модулей.
Урок 3. Ленивая загрузка 
В данном уроке вы узнаете, как с помощью средств Angular сделать ленивую загрузку, то есть по требованию определенного модуля и, тем самым, сильно оптимизировать скорость загрузки приложения.
Урок 4. Предзагрузка модулей 
В этом уроке вы узнаете, как выбрать определенную стратегию для ленивой загрузки модулей – вы познакомитесь с концепцией фоновой загрузки модуля для еще большей оптимизации скорости работы приложения.
Блок 11.
Теория.
АнимацииДанный блок посвящен анимациям и методам работы с ними.
Команда Angular предоставила очень удобный и невероятно гибкий подход к созданию прогрессивных анимаций на современной технологии Web Animations, которая только недавно начала поддерживаться в браузерах.
В данном блоке вы научитесь создавать анимации любой сложности используя удобный интерфейс, который нам предоставляет Angular.
Урок 1. Создание анимации 
В данном вводном уроке вы познакомитесь с общей концепцией анимаций, мы установим нужный модуль и создадим первую простую анимацию.
Урок 2. Множество состояний 
В данном уроке мы начнем усложнять анимации путем добавления множества точек остановок или состояний.
Урок 3. Сложный переход 
В этом уроке вы узнаете, как можно оптимизировать и сделать более гибким процесс перехода – управлять им в абсолютно любой момент времени.
Урок 4. Пустое состояние 
В данном уроке вы узнаете про то, как добавить анимацию на те элементы, которых еще не существует в DOM.
Урок 5. Специальные символы 
В этом уроке вы узнаете про специальные зарезервированные символы, которые позволяют сделать работу с анимациями более удобной.
Урок 6. Детальное управление анимацией 
В этом уроке мы разберем еще 2 метода, которые позволяют группировать и управлять процессом транзиций.
Урок 7. События 
В этом уроке вы узнаете, как вешать обработчики событий на анимации и узнавать, когда анимация закончилась или началась, получая из нее определенные данные.
Блок 12.
Теория.
Юнит тестыВ данном блоке мы с вами рассмотрим не прямой функционал фреймворка, а его возможность для тестирования того функционала, который мы будем создавать.
Данный блок будет являться вступительным в тему юнит тестирования, где вы познакомитесь с основными понятиями и научитесь писать тесты для пайпов, сервисов, директив в компонент.
Урок 1. Запуск тестов 
В данном уроке вы узнаете, как запускать юнит тесты и сможете «читать» информацию о статусе их выполнения.
Урок 2. Тестирование компонента 
В данном уроке вы научитесь писать базовые тесты для компонента.
Урок 3. Тестирование сервиса. Инъекция 
В данном уроке вы узнаете, как делать инъекцию сервисов в компонент в рамках тестов.
Урок 4. Тестирование методов сервиса 
В данном уроке вы научитесь тестировать методы сервиса и их связку с компонентом.
Урок 5. Асинхронное тестирование 
В данном уроке вы узнаете, как тестировать асинхронные функции из сервисов и какие удобные инструменты для этого команда Angular нам предоставила.
Урок 6. Тестирование пайпа 
В этом уроке вы научитесь тестировать пайпы.
Урок 7. Тестирование директивы 
В данном уроке вы научитесь тестировать наши собственные директивы.
Практика
(наведите курсор мыши на урок, чтобы смотреть детально)
Часть 2.
Разработка сервиса -
Домашняя бухгалтерияЭтот блок целиком посвящен практическому применению всех 12 теоретических блоков по Angular.
В рамках данной практики нами будет создано приложение «Домашняя бухгалтерия», с большим количеством разнообразного функционала.
Вы узнаете, как создавать большие динамические системы, применяя лишь те знания, что вы обрели в теоретических блоках.
В рамках данного блока мы с полного нуля создадим мощное Single Page приложение, которое будет работать исключительно на Angular.
Мы с вами будем использовать настоящую базу данных, общение с сервером, большое количество различных валидаций, защищенный роутинг, оптимизацию модулей и ленивую динамическую фоновую загрузку частей приложения, динамические поиски, отрисовку графиков, синхронизирование 2-х и более асинхронных стримов, применение анимаций и оптимизацию работы кода и многое-многое другое.
Эти знания дадут вам полное понимание того, как строятся реальные реактивные сайты абсолютно любой сложности.
Урок 1. Вводный 
В данном уроке мы с вами рассмотрим задачу, поставленную перед практическим блоком.
Урок 2. Настройка рабочего окружения 
В данном уроке мы настроим полностью новый проект, включая препроцессоры.
Урок 3. Подключение стилей 
В данном уроке вы узнаете, как подключить уже готовую тему на проект.
Урок 4. Модуль авторизации 
В данном уроке мы начнем делать модуль авторизации и зададим базовую структуру.
Урок 5. Регистрация роутов + подключение шаблона 
В данном уроке мы перенесем шаблоны в компоненты и зарегистрируем необходимые роуты для модуля авторизации.
Урок 6. Страница логина. Валидация 
В данном уроке мы полностью запрограммируем страницу логина с полной валидацией и возможность отображением всех ошибок.
Урок 7. Страница логина. Получение данных с сервера 
В данном уроке мы с вами создадим сервис для получения данных с базы данных для страницы логина.
Урок 8. Страница логина. Авторизация 
В данном уроке мы сделаем возможность авторизации пользователя в систему.
Урок 9. Страница регистрации 
В данном уроке мы запрограммируем полностью страницу регистрации с полной валидацией данных, используюя реактивный подход.
Урок 10. Создание асинхронного валидатора 
В данном уроке мы создадим асинхронный валидатор для моментальной проверки уже существующего почтового адреса в базе данных.
Урок 11. Создание модуля системы 
В данном уроке мы создадим базовую структуру модуля уже самой системы.
Урок 12. Перенос шаблонов 
В этом уроке мы перенесем верстку всех страниц в компоненты.
Урок 13. Создание левого меню 
В данном уроке мы запрограммируем левое меню системы.
Урок 14. Создание хедера 
В этом уроке мы запрограммируем шапку нашей системы, плюс мы создадим собственную директиву для того, чтобы отображать выпадающие меню.
Урок 15. Страница счета. Получение данных 
В этом уроке мы начнем программировать страницы системы и для страницы счета начнем получать данные с сервера.
Урок 16. Создание базового класса для API 
В данном уроке мы создадим базовый класс для общения с сервером, для того, чтобы в будущем избавиться от большого количества кода и оптимизировать сервисы, которые общаются с сервером.
Урок 17. Страница счета. Вывод данных 
В данном уроке мы выведем все данные полученные с сервера в шаблон.
Урок 18. Создание пайпа формата дат и времени 
В данном уроке мы создадим пайп, который будет очень удобно нам позволять форматировать дату и время в любой нужный нам формат, использую библиотеку moment js.
Урок 19. Страница записей. Создание шаблона 
В данном уроке мы приступим к программированию новой страницы. И начнем мы с декомпозиования цельной страницы на компоненты.
Урок 20. Страница записей. Добавление категорий 
В данном уроке мы реализуем возможность по добавлению категорий в базу данных с полной валидацией, используя шаблонный подход.
Урок 21. Страница записей. Редактирование категорий 
В данном уроке мы напишем еще один компонент, который динамически позволит менять и редактировать категории.
Урок 22. Страница записей. Добавление события 1 
В данном уроке мы начнем делать компонент, который позволит нам создавать события либо траты, либо дохода.
Урок 23. Страница записей. Добавление события 2 
В данном уроке мы закончим делать компонент, который позволит нам создавать события либо траты, либо дохода.
Урок 24. Страница планирования 
В этом уроке мы целиком запрограммируем страницу планирования, где будем синхронизировать 3 асинхронных стрима и выводить их в шаблон.
Урок 25. Страница истории. Шаблон 
В данном уроке мы приступим к созданию страницы истории. И начнем мы с декомпозиции страницы на отдельные компоненты.
Урок 26. Страница истории. График 
В данном уроке мы создадим график. Вы узнаете, как это сделать с помощью сторонних библиотек.
Урок 27. Страница истории. Список 
В этом уроке мы выведем в шаблон список всех событий.
Урок 28. Страница истории. Поиск 
В данном уроке мы создадим свой пайп, который позволит нам динамически фильтровать по разным полям список событий.
Урок 29. Страница истории. Детальная страница 
В данном уроке мы создадим отдельную страницу, которая будет отображать каждое событие отдельно.
Урок 30. Страница истории. Фильтр 1 
В этом уроке мы начнем создавать модальное окно сложного фильтра.
Урок 31. Страница истории. Фильтр 2 
В данном уроке мы закончим создавать сложный фильтр. Мы наладим его взаимодействие с графиком и списком всех событий.
Урок 32. Ленивая загрузка модуля 
В этом уроке мы начнем оптимизировать наше приложение путем фоновой динамической подгрузки модуля.
Урок 33. Защита роутов 
В данном уроке мы реализуем защиту нашей системы - человек, который будет незалогиген, не сможет пользоваться функционалом системы.
Урок 34. Страница «404» 
В данном уроке мы сделаем страницу «404» для того, чтобы обезопасить наше приложение от потенциальных ошибок.
Урок 35. Красивый лоадер 
В этом уроке вы узнаете, как сделать красивый элемент лоадера, вместо обычной статической надписи.
Урок 36. Анимации 
В данном уроке мы напишем несколько пользовательских анимаций. Также вы узнаете, как анимировать роуты.
Урок 37. SEO опитмизация 
В данном уроке вы узнаете, как сделать SEO оптимизацию разных страниц приложения.
Урок 38. Финальная сборка 
В этом заключительном уроке мы сделаем минифицированную сборку всего проекта, после чего его можно будет заливать на хостинг.