Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Видеокурс
Видеокурс "Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)
Видео урок

Рейтинг:

Издательство WebForMySelf Издательство: WebForMySelf

Страница автора - Владилен Минин - Webformyself Автор курса: Владилен Минин

Видеокурс Тематика: Веб – разработка | Создание сайтов и блогов

Автор: Владилен Минин

«Angular – необходимый инструмент для профессионального веб-разработчика». Что самое главное в профессии веб-разработчика?  На наш взгляд, самое важное – это постоянная актуализация своих знаний и изучение появляющихся новых технологий, полезных фреймворков, актуальных библиотек и т.д. Веб-мастера, которые игнорируют появление новых технологий, рискуют отстать от современной веб-разработки и стать невостребованными на этом конкурентном рынке. Одна из таких технологий – это Angular! Angular — это JavaScript-фреймворк с открытым исходным кодом. Создан он компанией Google для создания клиентских приложений. Прежде всего, он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. 

Смотреть видео: 

Angular 4. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

БЛОК 1. Теория. ВВЕДЕНИЕ И УСТАНОВКА

Это первый вступительный блок в курс по Angular где вы познакомитесь с базовыми знаниями и понятиями, которые будут использоваться в курсе. Вы узнаете, что такое Angular, где он используется, какие задачи он решает и почему стоит учить именно его. Вы узнаете, чем отличается Angular 2 от Angular 4 и какую версию будем проходить мы в курсе. Далее вы узнаете, как очень просто установить Angular на компьютер и запустить первый проект на нем уже в режиме разработки. И далее мы рассмотрим полностью структуру проекта, для того, чтобы вы полностью понимали, что за что отвечает, и вам было просто работать.

  • Урок 1. Что такое Angular
  • Урок 2. Установка Angular
  • Урок 3. Обзор структуры проекта

БЛОК 2. Теория. СИНТАКСИС

В данном блоке вы познакомитесь с базовыми понятиями и структурами, которые есть во фреймворке Angular. Начнем мы с изучения того, как вообще Angular работает и запускается в браузере. Далее мы детальнее посмотрим на то, что такое компоненты, как их создавать несколькими способами и как они работают. Далее вы познакомитесь с уникальным синтаксисом Angular, узнаете, что такое “2 way binding”, директивы и пайпы.

  • Урок 1. Создание компонента
  • Урок 2. Шаблоны и стили компонента
  • Урок 3. Селекторы в компонентах
  • Урок 4. Связка компонента и шаблона. Свойства
  • Урок 5. Связка компонента и шаблона. События
  • Урок 6. Связка компонента и шаблона. Двухстороннее связывание
  • Урок 7. Директива ngIf else
  • Урок 8. Директива ngFor
  • Урок 9. Директивы ngStyle и ngClass
  • Урок 10. Пайпы

БЛОК 3. Теория. КОМПОНЕНТЫ

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

  • Урок 1. Передача параметров в компонент
  • Урок 2. Получение данных из компонента
  • Урок 3. Область видимости CSS
  • Урок 4. Доступ к DOM элементам
  • Урок 5. Передача HTML-кода компоненту
  • Урок 6. Жизненный цикл компонента

БЛОК 4. Теория. ДИРЕКТИВЫ

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

  • Урок 1. Создание директивы
  • Урок 2. Использование Renderer
  • Урок 3. Работа с событиями
  • Урок 4. Передача параметров
  • Урок 5. Директива ngSwitch

БЛОК 5. Теория. ПАЙПЫ

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

Пайпы – это такие конструкции, которые помогают преобразовывать HTML-код в удобный нам формат. Например, с помощью них обычный new Date в Javascript мы можем привести в нужный формат всего лишь за пару символов. Или мы можем управлять строками, циклами, объектами, и так далее.

  • Урок 1. Использование пайпов
  • Урок 2. Создание своего пайпа
  • Урок 3. Создание динамического фильтра
  • Урок 4. Оптимизация пайпов
  • Урок 5. Async пайп

БЛОК 6. Теория. СЕРВИСЫ

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

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

  • Урок 1. Создание сервиса
  • Урок 2. Связь компонентов через сервис
  • Урок 3. Использование сервиса в сервисе

БЛОК 7. Теория. ФОРМЫ

В блоке мы разберем 2 подхода по работе с формами внутри Angular: 1) когда мы делаем валидацию внутри шаблона; 2) когда мы делаем валидацию внутри компонента – в typescript коде. Также мы рассмотрим способы создания своих собственных синхронных и асинхронных валидаторов. Одна из самых популярных тем в Angular – это работа с HTML-формами. Теперь для того, чтобы проверить правильность введенных данных нам не нужно ждать ответа сервера: мы все будем проверять на ходу, динамически и моментально. Например, если форма будет требовать от пользователя ввести почтовый адрес, то он не сможет отправить форму на сервер, пока не введет корректный формат. Или если уже такой email занят, то он так же получит моментальный ответ. Angular предоставляет нам крайне простые и удобные инструменты по реализации подобных валидаций на ходу: мы можем проверять любые состояния, добавлять любые сообщения об ошибке или успехе, добавлять нужные цвета или классы буквально за пару строк кода!

  • Урок 1. Вводный
  • Урок 2. TD Создание формы
  • Урок 3. TD Валидация формы 1
  • Урок 4. TD Валидация формы 2
  • Урок 5. TD Значения по умолчанию
  • Урок 6. TD Группировка форм
  • Урок 7. TD Динамическое изменение формы
  • Урок 8. R Создание формы
  • Урок 9. R Валидация формы
  • Урок 10. R Группировка форм
  • Урок 11. R Создание валидатора
  • Урок 12. R Создание асинхронного валидатора

БЛОК 8. Теория. HTTP

Данный блок посвящен очень важной теме для SPA – асинхронное и фоновое общение с сервером. В данном блоке вы познакомитесь с умной Angular реализацией AJAX, узнаете, что такое REST API. Мы рассмотрим множество возможностей, как можно оптимизировать работу с сервером: начиная с выбора метода по отправке запроса и заканчивая темой, как добавлять различные хедеры в запрос. Также мы плотнее познакомимся с концепцией Observable, научимся обрабатывать выходные данные и рассмотрим, как мы можем обрабатывать различные ошибки сервера.

  • Урок 1. Настройка сервера
  • Урок 2. Получение данных. Метод GET
  • Урок 3. Вывод данных в шаблон
  • Урок 4. Добавление элементов. Метод POST
  • Урок 5. Изменение элементов. Метод PUT
  • Урок 6. Удаление элементов. Метод DELETE
  • Урок 7. Добавление хедеров
  • Урок 8. Обработка ошибок
  • Урок 9. Async пайп

БЛОК 9. Теория. РОУТИНГ

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

  • Урок 1. Создание роутов
  • Урок 2. Создание роутинг модуля
  • Урок 3. Навигация между страницами
  • Урок 4. Программная навигация
  • Урок 5. Параметры адресной строки. Урок 1
  • Урок 6. Параметры адресной строки. Урок 2
  • Урок 7. Встроенные роуты
  • Урок 8. Редирект и обработка ошибок
  • Урок 9. Защищенные роуты

БЛОК 10. Теория. МОДУЛИ

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

  • Урок 1. Создание модуля
  • Урок 2. Создание общего модуля
  • Урок 3. Ленивая загрузка
  • Урок 4. Предзагрузка модулей

БЛОК 11. Теория. АНИМАЦИИ

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

  • Урок 1. Создание анимации
  • Урок 2. Множество состояний
  • Урок 3. Сложный переход
  • Урок 4. Пустое состояние
  • Урок 5. Специальные символы
  • Урок 6. Детальное управление анимацией
  • Урок 7. События

БЛОК 12. Теория. ЮНИТ ТЕСТЫ

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

  • Урок 1. Запуск тестов
  • Урок 2. Тестирование компонента
  • Урок 3. Тестирование сервиса. Инъекция
  • Урок 4. Тестирование методов сервиса
  • Урок 5. Асинхронное тестирование
  • Урок 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. Создание пайпа формата дат и времени
  • Урок 19. Страница записей. Создание шаблона
  • Урок 20. Страница записей. Добавление категорий
  • Урок 21. Страница записей. Редактирование категорий
  • Урок 22. Страница записей. Добавление события 1
  • Урок 23. Страница записей. Добавление события 2
  • Урок 24. Страница планирования
  • Урок 25. Страница истории. Шаблон
  • Урок 26. Страница истории. График
  • Урок 27. Страница истории. Список
  • Урок 28. Страница истории. Поиск
  • Урок 29. Страница истории. Детальная страница
  • Урок 30. Страница истории. Фильтр 1
  • Урок 31. Страница истории. Фильтр 2
  • Урок 32. Ленивая загрузка модуля
  • Урок 33. Защита роутов
  • Урок 34. Страница «404»
  • Урок 35. Красивый лоадер
  • Урок 36. Анимации
  • Урок 37. SEO опитмизация
  • Урок 38. Финальная сборка

Практический блок включает в себя следующие технологии Angular 4:

  • Компоненты
  • Роуты
  • Ленивая загрузка
  • Защищенные роуты
  • Валидация форм
  • Шаблонный подход (вход в систему)
  • Реактивный подход (регистрация, асинхронные валидаторы для проверки email)
  • Подключение плагинов (отрисовка графика)
  • Свои пайпы (динамический поиск по разным полям)
  • Встроенные папы (валюта, время, дата)
  • Вывод списка
  • Детальное отображение элемента
  • Работа с динамическими данными
  • с помощью RxJs
  • Использование сервисов
  • Работа с сервером (REST API)
  • Создание директивы (дропдаун)
  • Анимации к элементам
  • SEO оптимизация
Содержание:

БЛОК 1. Теория. ВВЕДЕНИЕ И УСТАНОВКА

Это первый вступительный блок в курс по Angular где вы познакомитесь с базовыми знаниями и понятиями, которые будут использоваться в курсе. Вы узнаете, что такое Angular, где он используется, какие задачи он решает и почему стоит учить именно его. Вы узнаете, чем отличается Angular 2 от Angular 4 и какую версию будем проходить мы в курсе. Далее вы узнаете, как очень просто установить Angular на компьютер и запустить первый проект на нем уже в режиме разработки. И далее мы рассмотрим полностью структуру проекта, для того, чтобы вы полностью понимали, что за что отвечает, и вам было просто работать.

  • Урок 1. Что такое Angular
  • Урок 2. Установка Angular
  • Урок 3. Обзор структуры проекта

БЛОК 2. Теория. СИНТАКСИС

В данном блоке вы познакомитесь с базовыми понятиями и структурами, которые есть во фреймворке Angular. Начнем мы с изучения того, как вообще Angular работает и запускается в браузере. Далее мы детальнее посмотрим на то, что такое компоненты, как их создавать несколькими способами и как они работают. Далее вы познакомитесь с уникальным синтаксисом Angular, узнаете, что такое “2 way binding”, директивы и пайпы.

  • Урок 1. Создание компонента
  • Урок 2. Шаблоны и стили компонента
  • Урок 3. Селекторы в компонентах
  • Урок 4. Связка компонента и шаблона. Свойства
  • Урок 5. Связка компонента и шаблона. События
  • Урок 6. Связка компонента и шаблона. Двухстороннее связывание
  • Урок 7. Директива ngIf else
  • Урок 8. Директива ngFor
  • Урок 9. Директивы ngStyle и ngClass
  • Урок 10. Пайпы

БЛОК 3. Теория. КОМПОНЕНТЫ

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

  • Урок 1. Передача параметров в компонент
  • Урок 2. Получение данных из компонента
  • Урок 3. Область видимости CSS
  • Урок 4. Доступ к DOM элементам
  • Урок 5. Передача HTML-кода компоненту
  • Урок 6. Жизненный цикл компонента

БЛОК 4. Теория. ДИРЕКТИВЫ

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

  • Урок 1. Создание директивы
  • Урок 2. Использование Renderer
  • Урок 3. Работа с событиями
  • Урок 4. Передача параметров
  • Урок 5. Директива ngSwitch

БЛОК 5. Теория. ПАЙПЫ

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

Пайпы – это такие конструкции, которые помогают преобразовывать HTML-код в удобный нам формат. Например, с помощью них обычный new Date в Javascript мы можем привести в нужный формат всего лишь за пару символов. Или мы можем управлять строками, циклами, объектами, и так далее.

  • Урок 1. Использование пайпов
  • Урок 2. Создание своего пайпа
  • Урок 3. Создание динамического фильтра
  • Урок 4. Оптимизация пайпов
  • Урок 5. Async пайп

БЛОК 6. Теория. СЕРВИСЫ

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

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

  • Урок 1. Создание сервиса
  • Урок 2. Связь компонентов через сервис
  • Урок 3. Использование сервиса в сервисе

БЛОК 7. Теория. ФОРМЫ

В блоке мы разберем 2 подхода по работе с формами внутри Angular: 1) когда мы делаем валидацию внутри шаблона; 2) когда мы делаем валидацию внутри компонента – в typescript коде. Также мы рассмотрим способы создания своих собственных синхронных и асинхронных валидаторов. Одна из самых популярных тем в Angular – это работа с HTML-формами. Теперь для того, чтобы проверить правильность введенных данных нам не нужно ждать ответа сервера: мы все будем проверять на ходу, динамически и моментально. Например, если форма будет требовать от пользователя ввести почтовый адрес, то он не сможет отправить форму на сервер, пока не введет корректный формат. Или если уже такой email занят, то он так же получит моментальный ответ. Angular предоставляет нам крайне простые и удобные инструменты по реализации подобных валидаций на ходу: мы можем проверять любые состояния, добавлять любые сообщения об ошибке или успехе, добавлять нужные цвета или классы буквально за пару строк кода!

  • Урок 1. Вводный
  • Урок 2. TD Создание формы
  • Урок 3. TD Валидация формы 1
  • Урок 4. TD Валидация формы 2
  • Урок 5. TD Значения по умолчанию
  • Урок 6. TD Группировка форм
  • Урок 7. TD Динамическое изменение формы
  • Урок 8. R Создание формы
  • Урок 9. R Валидация формы
  • Урок 10. R Группировка форм
  • Урок 11. R Создание валидатора
  • Урок 12. R Создание асинхронного валидатора

БЛОК 8. Теория. HTTP

Данный блок посвящен очень важной теме для SPA – асинхронное и фоновое общение с сервером. В данном блоке вы познакомитесь с умной Angular реализацией AJAX, узнаете, что такое REST API. Мы рассмотрим множество возможностей, как можно оптимизировать работу с сервером: начиная с выбора метода по отправке запроса и заканчивая темой, как добавлять различные хедеры в запрос. Также мы плотнее познакомимся с концепцией Observable, научимся обрабатывать выходные данные и рассмотрим, как мы можем обрабатывать различные ошибки сервера.

  • Урок 1. Настройка сервера
  • Урок 2. Получение данных. Метод GET
  • Урок 3. Вывод данных в шаблон
  • Урок 4. Добавление элементов. Метод POST
  • Урок 5. Изменение элементов. Метод PUT
  • Урок 6. Удаление элементов. Метод DELETE
  • Урок 7. Добавление хедеров
  • Урок 8. Обработка ошибок
  • Урок 9. Async пайп

БЛОК 9. Теория. РОУТИНГ

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

  • Урок 1. Создание роутов
  • Урок 2. Создание роутинг модуля
  • Урок 3. Навигация между страницами
  • Урок 4. Программная навигация
  • Урок 5. Параметры адресной строки. Урок 1
  • Урок 6. Параметры адресной строки. Урок 2
  • Урок 7. Встроенные роуты
  • Урок 8. Редирект и обработка ошибок
  • Урок 9. Защищенные роуты

БЛОК 10. Теория. МОДУЛИ

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

  • Урок 1. Создание модуля
  • Урок 2. Создание общего модуля
  • Урок 3. Ленивая загрузка
  • Урок 4. Предзагрузка модулей

БЛОК 11. Теория. АНИМАЦИИ

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

  • Урок 1. Создание анимации
  • Урок 2. Множество состояний
  • Урок 3. Сложный переход
  • Урок 4. Пустое состояние
  • Урок 5. Специальные символы
  • Урок 6. Детальное управление анимацией
  • Урок 7. События

БЛОК 12. Теория. ЮНИТ ТЕСТЫ

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

  • Урок 1. Запуск тестов
  • Урок 2. Тестирование компонента
  • Урок 3. Тестирование сервиса. Инъекция
  • Урок 4. Тестирование методов сервиса
  • Урок 5. Асинхронное тестирование
  • Урок 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. Создание пайпа формата дат и времени
  • Урок 19. Страница записей. Создание шаблона
  • Урок 20. Страница записей. Добавление категорий
  • Урок 21. Страница записей. Редактирование категорий
  • Урок 22. Страница записей. Добавление события 1
  • Урок 23. Страница записей. Добавление события 2
  • Урок 24. Страница планирования
  • Урок 25. Страница истории. Шаблон
  • Урок 26. Страница истории. График
  • Урок 27. Страница истории. Список
  • Урок 28. Страница истории. Поиск
  • Урок 29. Страница истории. Детальная страница
  • Урок 30. Страница истории. Фильтр 1
  • Урок 31. Страница истории. Фильтр 2
  • Урок 32. Ленивая загрузка модуля
  • Урок 33. Защита роутов
  • Урок 34. Страница «404»
  • Урок 35. Красивый лоадер
  • Урок 36. Анимации
  • Урок 37. SEO опитмизация
  • Урок 38. Финальная сборка

Практический блок включает в себя следующие технологии Angular 4:

  • Компоненты
  • Роуты
  • Ленивая загрузка
  • Защищенные роуты
  • Валидация форм
  • Шаблонный подход (вход в систему)
  • Реактивный подход (регистрация, асинхронные валидаторы для проверки email)
  • Подключение плагинов (отрисовка графика)
  • Свои пайпы (динамический поиск по разным полям)
  • Встроенные папы (валюта, время, дата)
  • Вывод списка
  • Детальное отображение элемента
  • Работа с динамическими данными
  • с помощью RxJs
  • Использование сервисов
  • Работа с сервером (REST API)
  • Создание директивы (дропдаун)
  • Анимации к элементам
  • SEO оптимизация

Видеокурс
Видео урок


Видеокурс "Препроцессоры SASS и LESS. Автоматизация Front-end разработки". (Владилен Минин - Webformyself)


Это уникальный видеокурс на рынке Рунета, который во всех подробностях дает теоретическое и практическое освещение всех возможностей двух наиболее популярных и востребованных на рынке CSS-препроцессоров SASS и LESS в рамках единого курса.....


Страница курса - Препроцессоры SASS и LESS. Автоматизация Front-end разработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6". (Владилен Минин - Webformyself)


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


Страница курса - FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "WordPress-Мастер: разработка тем для WordPress". (Андрей Кудлай - Webformyself)


Видеокурс «WordPress-Мастер: разработка тем для WordPress» состоит из трех частей: одной теоретической и двух практических. Приобретая данный курс, вы получаете целостный продукт, в котором есть все необходимое для изучения и работы с WordPress......


Страница курса - WordPress-Мастер: разработка тем для WordPress. (Андрей Кудлай  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Angular 4: быстрый старт, первые результаты". (Владилен Минин - Webformyself)


Данный курс посвящен очень популярной технологии от компании Google-Angular 4.Angular - это javascript фреймворк, который позволяет делать реактивные сайты - Single Page Applications. В процессе данного курса мы рассмотрим базовые возможности Angular 4...


Страница курса - Angular 4: быстрый старт, первые результаты. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Практика верстки сайта-лендинга с нуля до результата". (Денис Булыга - Webformyself)


В данном видеокурсе мы c нуля сверстаем PSD-макет, используя технологии HTML5 и CSS3, научимся вырезать изображения из макета. При верстке будет соблюдена структура проекта, используя для каждого блока отдельный файл со стилями. По результатам данного....


Страница курса - Практика верстки сайта-лендинга с нуля до результата. (Денис Булыга - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "React JS. Основы". (Владилен Минин - Webformyself)


Данный мини-курс посвящен JavaScript библиотеке ReactJS, разработанной компанией Facebook. В этом курсе вы познакомитесь с базовыми возможностями React, начиная с определения концепта компонентов в веб-разработке и заканчивая разработанным приложением....


Страница курса - React JS. Основы. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "React JS с Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


React — обязательный инструмент для современного разработчика React — это библиотека JavaScript с открытым исходным кодом, которая используется для создания пользовательского интерфейса. Она была создана компанией Facebook и представлена разработчикам....


Страница курса - React JS с Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Препроцессоры. Быстрый старт". (Владилен Минин - Webformyself)


Забирайте БЕСПЛАТНО пошаговый мини-курс по основам верстки с использованием CSS-препроцессоров – от одного из наиболее авторитетных издательств Рунета для веб-мастеров. В этом курсе вы на наглядном примере простого сайта с двумя разными темами увидите....


Страница курса - Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Full-Stack практика. Создание JavaScript блога". (Владилен Минин - Webformyself)


Данный курс посвящен теме Full-Stack разработки на JavaScript и знакомства с ней. В курсе мы разработаем небольшой блог, на примере которого мы разберем базовые составляющие Full-Stack разработки. В первую очередь мы реализуем сервер, который будет......


Страница курса - Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Фреймворк VUE JS. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


Курс состоит из 2-х больших блоков: теория и практика. Изучив теоретический блок, вы получите актуальную исчерпывающую теоретическую базу по состоянию на апрель 2018 года (к которой сможете возвращаться при необходимости в будущем – в качестве удобного...


Страница курса - Фреймворк VUE JS. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "VUE JS – быстрый старт, первые результаты." (Владилен Минин - Webformyself)


Данный курс посвящен самому быстрому javascript фреймворку - Vue JS. В рамках данного курса в 6 практических уроках мы создадим динамическое веб-приложение, где пошагово разберем на простых примерах, как работает фреймворк Vue.


Страница курса - VUE JS – быстрый старт, первые результаты. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Создание Telegram бота". (Владилен Минин - Webformyself)


В процессе данного курса вы познакомитесь с основными понятиями, необходимыми, для создания ботов. Вы узнаете, как регистрировать бота в Telegram, получив его токен для выполнения запросов на API Telegram....


Страница курса - Создание Telegram бота. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Telegram-бот мастер. Практический курс создания бота. Телеграм bot". (Владилен Минин - Webformyself)


Данный курс посвящен разработке Telegram-ботов на платформе NodeJS. Курс состоит из 3 частей, которые подробно и структурировано обучат вас создавать ботов с полного нуля....


Страница курса - Telegram-бот мастер. Практический курс создания бота. Телеграм bot. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)


Angular — это JavaScript-фреймворк с открытым исходным кодом. Создан он компанией Google для создания клиентских приложений. Прежде всего, он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений.....


Страница курса - Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "JavaScript. Полное руководство для современной вебразработки". (Владилен Минин - Webformyself)


Данный курс – это полный охват теоретических и практических знаний и навыков по JS – без воды и в концентрированном виде. В курсе собраны лишь самые актуальные и востребованные в 2019 году знания по JS – для современной веб-разработки.


Страница курса - JavaScript. Полное руководство для современной вебразработки. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Фреймворк Nuxt.js. Руководство по FullStack-разработке". (Владилен Минин - Webformyself)


Nuxt.js — это фреймворк высокого уровня, который создан с целью улучшения библиотеки Vue.js. Nuxt — это удобный инструмент, который позволяет быстро и относительно легко создавать действительно сложные приложения. Это основа для более простого создания...


Страница курса - Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "Технология CSS Grid. Руководство по адаптивной верстке". (Денис Булыга - Webformyself)


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


Страница курса - Технология CSS Grid. Руководство по адаптивной верстке. (Денис Булыга  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Server Side Rendering с Nuxt.js. Быстрый старт". (Владилен Минин - Webformyself)


Данный вводный курс расскажет вам про то, что такое Server Side Rendering, почему его стоит изучать и внедрять в свои проекты уже сейчас и какие плюсы вы получите, используя данную технологию. Вы узнаете про фреймворк,позволяющий очень просто создавать...


Страница курса - Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "JavaScript. Быстрый старт". (Владилен Минин - Webformyself)


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


Страница курса - JavaScript. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Фреймворк Bootstrap 4. Быстрый старт". (Андрей Кудлай - Webformyself)


Представляем вам мини-курс «Bootstrap 4. Быстрый старт». Курс включает в себя 9 небольших уроков общей продолжительностью почти 2 часа. В курсе показана верстка макета из PSD с применением CSS-фреймворка Bootstrap 4. Bootstrap – это популярнейший......


Страница курса - Фреймворк Bootstrap 4. Быстрый старт. (Андрей Кудлай - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "Верстка сайта на Grid. Быстрый старт ". (Денис Булыга - Webformyself)


В этом цикле уроков будет показана верстка PSD-макета при помощи современных Web-технологий на чистом HTML и CSS без использования препроцессоров, автоматизации и других дополнительных возможностей. В целом макет является довольно простым, но на его .....


Страница курса - Верстка сайта на Grid. Быстрый старт. (Денис Булыга  - Webformyself)

Видеокурс
Бесплатный видео урок


Бесплатный видеокурс "NodeJS. Быстрый старт". (Владилен Минин - Webformyself)


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


Страница курса - NodeJS. Быстрый старт. (Владилен Минин - Webformyself)

Видеокурс
Видео урок


Видеокурс "NodeJS. Полное руководство". (Владилен Минин - Webformyself)


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


Страница курса - NodeJS. Полное руководство. (Владилен Минин - Webformyself)

Видеокурс
Видеокурс


Видеокурс "React JS, Redux, ES2015 с Нуля до Гуру". (Михаил Русаков, Владилен Минин)


Данный курс-это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения. Вы узнаете о тонкостях работы с "профессиональным" JavaScript,а так же узнаете о нововведениях...


Страница курса - React JS, Redux, ES2015 с Нуля до Гуру. (Владилен Минин)
КОЛЛЕКЦИЯ БЕСПЛАТНОГО ВИДЕО

Если Вы не нашли видео на сайте то воспользуйтесь наши каналом с большим количеством разнообразных видео курсов на различные темы

Смотреть видео Смотреть видео

Видеокурс "Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки". (Владилен Минин - Webformyself)
Страница курса - Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки. (Владилен Минин - Webformyself)

ПОПУЛЯРНЫЕ КНИГИ, КУРСЫ И ТРЕНИНГИ

Видеокурс Бесплатный видеокурс
Видеокурс Видеокурс
Видеокурс Видеокурс
Видеокурс Видеокурс
Видеокурс Бесплатный видеокурс
Видеокурс Видеокурс

БЕСПЛАТНОЕ ВИДЕО, МИНИ - КУРСЫ

Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
Промо ролики видеокурса Angular 4 быстрый старт, первые результаты. (Владилен Минин - Webformyself)