Angular 4 c Нуля до Профи


Angular 4 c Нуля до Профи

Поставьте свою оценку:

Информация о курсе :

Тематика : JavaScript, jQuery и Ajax

Тип материала : Видеокурс

Версия продукта : Цифровая

Год выпуска : 2020

Краткое описание :

Подробнее:

Работает в крупной международной компании как Senior Front-End Developer. Программированием занимается более 6 лет, 4 из которых были посвящены javascript. Также он является Team Lead во многих внутренних проектах компании и участвует в обучении студентов front-end разработке и других front-end специалистов профессиональному javascript’у и новым фреймворкам, например React / Redux или Angular 2. Суммарно было обучено уже более 100 высококвалифицированных специалистов.

Angular – незаменимый инструмент для профессионального веб-разработчика

Angular — это относительно новый и, пожалуй, на сегодняшний день наиболее перспективный JavaScript-фреймворк с открытым исходным кодом. А создателем его является мировой лидер в инновациях и стандартах веб-разработки – компания Google.

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

В то же время Angular это не новая версия AngularJS, а принципиальной новый фреймворк. Целью фреймворка является разработка браузерных приложений на основе MVC-шаблона, а также упрощение тестирования и разработки.

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

Если вы все еще думаете, что JavaScript – это язык второстепенный, необходимый лишь для написания скриптов, если думаете, что сайты должны создаваться на PHP, то позвольте мне рассказать вам про то, что такое Angular 4, и как этот курс поменяет ваше мнение с устаревшего подхода на самые актуальные технологии 2020 года.

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

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

Сейчас если вы не учитываете быстродействие и динамичность сайта, он не выживет в современном вебе.

Требования к разработке так же выросли в разы. Если вы не умеете создавать отзывчивый user interface, оптимизировать приложение и пользуетесь подходом создания сайтов 5-летней давности, то конкурировать будет крайне непросто.

Этот видеокурс от Владлена Минина, решит все вышеперечисленные проблемы!

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

Фрилансерам
Фрилансеры, которые хотят повысить свой профессиональный уровень, обогатить багаж своих знаний новой перспективной технологией.

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

Данный курс содержит в себе БОЛЕЕ 30 ЧАСОВ обучающих материалов, которые последовательно и очень подробно научат вас самым актуальным технологиям на текущий момент и которые будут актуальными ближайшие несколько лет.

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

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

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

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

На момент своего выхода материалы видеокурса являются предельно актуальными и востребованными на российском рынке Front-End разработки – по состоянию на сентябрь 2020 года на рынке попросту не хватает людей с подобным навыком.

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

Вы с полного нуля создадите мощное Single Page приложение «Домашняя бухгалтерия», которое будет работать исключительно на Angular, с большим количеством разнообразного функционала!

ЧАСТЬ 1. Теория

РАЗДЕЛ 01. Теория. ВВЕДЕНИЕ И УСТАНОВКА
РАЗДЕЛ 02. Теория. СИНТАКСИС
РАЗДЕЛ 03. Теория. КОМПОНЕНТЫ
РАЗДЕЛ 04. Теория. ДИРЕКТИВЫ
РАЗДЕЛ 05. Теория. ПАЙПЫ
РАЗДЕЛ 06. Теория. СЕРВИСЫ
РАЗДЕЛ 07. Теория. ФОРМЫ
РАЗДЕЛ 08. Теория. HTTP
РАЗДЕЛ 09. Теория. РОУТИНГ
РАЗДЕЛ 10. Теория. МОДУЛИ
РАЗДЕЛ 11. Теория. АНИМАЦИИ
РАЗДЕЛ 12. Теория. ЮНИТ ТЕСТЫ

Складчина [webformyself] angular 4 c нуля до профи для современной веб-разработки (2020)

Manarne

Арестант

[WebForMySelf] Angular 4 c Нуля до Профи для современной веб-разработки (2020)

Данный курс посвящен самому популярному JavaScript фреймворку Angular от компании Google.

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

Посмотрите видео и узнайте о курсе подробнее

Подробное содержание курса:

Часть 1. Теория Angular

БЛОК 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. Премиум курс по EcmaScript 6
БОНУС 2. Премиум курс по TypeScript
БОНУС 3. Премиум курс по Webpack
БОНУС 4. Премиум курс по RxJS (Reactive — Extensions)
БОНУС 5. Премиум курс по NodeJS
БОНУС 6. Курс по JavaScript
БОНУС 7. Перенос проекта на хостинг. Домен

WebForMyself Angular 4 с Нуля до Профи (2020) — WebForMySelf

Andrew

Данный курс содержит в себе БОЛЕЕ 30 ЧАСОВ обучающих материалов, которые последовательно и очень подробно научат вас самым актуальным технологиям на текущий момент и которые будут актуальными ближайшие несколько лет.

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

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

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

БЛОК 1. Теория. ВВЕДЕНИЕ И УСТАНОВКА
Урок 1. Что такое Angular
Урок 2. Установка Angular
Урок 3. Обзор структуры проекта

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

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

БЛОК 4. Теория. ДИРЕКТИВЫ
Урок 1. Создание директивы
Урок 2. Использование Renderer
Урок 3. Работа с событиями
Урок 4. Передача параметров
Урок 5. Директива ngSwitch

БЛОК 5. Теория. ПАЙПЫ
Урок 1. Использование пайпов
Урок 2. Создание своего пайпа
Урок 3. Создание динамического фильтра
Урок 4. Оптимизация пайпов
Урок 5. Async пайп

БЛОК 6. Теория. СЕРВИСЫ
Урок 1. Создание сервиса
Урок 2. Связь компонентов через сервис
Урок 3. Использование сервиса в сервисе

БЛОК 7. Теория. ФОРМЫ
Урок 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
Урок 1. Настройка сервера
Урок 2. Получение данных. Метод GET
Урок 3. Вывод данных в шаблон
Урок 4. Добавление элементов. Метод POST
Урок 5. Изменение элементов. Метод PUT
Урок 6. Удаление элементов. Метод DELETE
Урок 7. Добавление хедеров
Урок 8. Обработка ошибок
Урок 9. Async пайп

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

БЛОК 10. Теория. МОДУЛИ
Урок 1. Создание модуля
Урок 2. Создание общего модуля
Урок 3. Ленивая загрузка
Урок 4. Предзагрузка модулей

БЛОК 11. Теория. АНИМАЦИИ
Урок 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 оптимизация

Видеокурс «Angular 4 c Нуля до Профи. Полное руководство для современной веб-разработки». (Владилен Минин — 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 и ng >БЛОК 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 оптимизация

Angular 4 с Нуля до Профи (2020) PCRec

Название: Angular 4 с Нуля до Профи
Автор: WebForMyself, Владилен Минин
Год: 2020
Жанр: Видеокурс
Язык: Русский
Продолжительность: 38:05:22

Описание:
Данный курс содержит в себе более 30 часов материалов, которые последовательно и очень подробно расскажут вам о самых актуальных технологиях на текущий момент и которые будут актуальными ближайшие несколько лет. Помимо самой технологии в курс входит 6 бонусных блоков, которые содержат необходимые материалы для успешного старта изучения курса. Курс начинается с самых основ (в виде NodeJS и 6 бонусных курсов для понимания современной инфраструктуры) и заканчивается созданием с нуля полностью рабочего реактивного приложения, где показаны все шаги по его созданию. Практике предшествует 12 теоретических блоков (а это ни много ни мало 80 видеоуроков!), где максимально подробно разобраны и систематизированы все тонкости фреймворка на различных примерах. В отличие от курсов-роликов на YouTube, большинство из которых, являются лишь переводом и озвучкой англоязычной документации, этот видеокурс является практическим. В практической части разрабатывается полноценное веб-приложение. На момент своего выхода материалы видеокурса являются предельно актуальными и востребованными на российском рынке Front-End разработки – на рынке попросту не хватает людей с подобным навыком. Отличительными характеристиками всех курсов WebForMyself является структурированная, систематическая, последовательная и грамотная подача материала. И этот курс не исключение.

161 Kbps
Аудио: AAC, 2 ch, 122 Kbps

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

Angular 4 c Нуля до Профи (&#215)

Angular 4 – новый и оптимизированный Javascript фреймворк (рабочая среда) с открытым исходным кодом, работающий на стороне клиента (Front-End), разработанный компанией Google. Angular является наследником фреймворка Angular JS и нацелен на создание одностраничных сайтов и веб-приложений SPA (Single Page Application). Фреймворк Angular это совершенно новый фреймворк, позволяющий разрабатывать и тестировать веб-приложения на основе шаблона MVC.

Первая версия фреймворка Angular появилась ещё в 2009ом году и за всё время его существования было создано много версий и собралось многочисленное сообщество. Последняя актуальная версия на текущий момент – Angular 4 – вышла в марте 2020 года. Несмотря на свою многофункциональность и разнообразие различных модулей, фреймворк прост в изучении и не требует особо глубоких и продвинутых знаний в области веб-разработки. Веб-приложения, работающие на базе фреймворка Angular отличаются своей производительностью и не уступают по скорости и качеству работы другим приложениям.

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

  • создание динамических реактивных приложений с предзагрузкой страниц,
  • внедрение новых директив для расширения возможности HTML-кода,
  • быстрый рендеринг страниц с использованием технологии Shadow DOM,
  • шаблонизация на стороне сервера с использованием Node JS и SEO-оптимизация веб-приложений,
  • адаптация под разные устройства (в т.ч. и мобильные) благодаря инструменту Angular Mobile Toolkit,
  • ленивая или отложенная загрузка данных, необходимых только для текущей страницы,
  • разработка приложений для бизнеса Freebase, которые можно реализовать в течение 10-30 минут.

Исходя из всех этих преимуществ и нововведений в современных направлениях веб-разработки следует вывод: изучение фреймворка Angular 4 сейчас крайне востребовано. Сегодня требования к сайтам увеличиваются. Пользователи всё больше уделяют внимание сайтам, которые загружаются быстро и выглядят привлекательно, динамично и удобно.

Благодаря обучающему курсу Angular 4 с нуля до профи Вы сможете познакомиться с теоретическими и базовыми знаниями по современной веб-разработке и научитесь применять эти знания на практиктическом примере при создании своего собственного сервиса домашней бухгалтерии. Этот курс содержит более 30 часов видео по самым актуальным и востребованным веб-технологиям на текущий момент. Автором курса является Владилен Минин – веб-разработчик и Front-End программист с 6 летним стажем работы в крупной международной компании.

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

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

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

Бонус 1. Премиум курс по EcmaScript 6

Бонус 2. Премиум курс по TypeScript

Бонус 3. Премиум курс по Webpack

Бонус 4. Премиум курс по RxJS (Reactive – Extensions)

Бонус 5. Премиум курс по Node JS

Бонус 6. Курс по JavaScript

Бонус 7. Перенос проекта на хостинг. Домен.

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

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

Angular 4 с Нуля до Профи (2020) PCRec

Название: Angular 4 с Нуля до Профи
Автор: WebForMyself, Владилен Минин
Год: 2020
Жанр: Видеокурс
Язык: Русский
Продолжительность: 38:05:22

Описание:
Данный курс содержит в себе более 30 часов материалов, которые последовательно и очень подробно расскажут вам о самых актуальных технологиях на текущий момент и которые будут актуальными ближайшие несколько лет. Помимо самой технологии в курс входит 6 бонусных блоков, которые содержат необходимые материалы для успешного старта изучения курса. Курс начинается с самых основ (в виде NodeJS и 6 бонусных курсов для понимания современной инфраструктуры) и заканчивается созданием с нуля полностью рабочего реактивного приложения, где показаны все шаги по его созданию. Практике предшествует 12 теоретических блоков (а это ни много ни мало 80 видеоуроков!), где максимально подробно разобраны и систематизированы все тонкости фреймворка на различных примерах. В отличие от курсов-роликов на YouTube, большинство из которых, являются лишь переводом и озвучкой англоязычной документации, этот видеокурс является практическим. В практической части разрабатывается полноценное веб-приложение. На момент своего выхода материалы видеокурса являются предельно актуальными и востребованными на российском рынке Front-End разработки – на рынке попросту не хватает людей с подобным навыком. Отличительными характеристиками всех курсов WebForMyself является структурированная, систематическая, последовательная и грамотная подача материала. И этот курс не исключение.

Скачать торрент Angular 4 с Нуля до Профи (2020) PCRec

Название: Angular 4 с Нуля до Профи
Автор: WebForMyself, Владилен Минин
Год: 2020
Жанр: Видеокурс
Язык: Русский
Продолжительность: 38:05:22

Описание:
Данный курс содержит в себе более 30 часов материалов, которые последовательно и очень подробно расскажут вам о самых актуальных технологиях на текущий момент и которые будут актуальными ближайшие несколько лет. Помимо самой технологии в курс входит 6 бонусных блоков, которые содержат необходимые материалы для успешного старта изучения курса. Курс начинается с самых основ (в виде NodeJS и 6 бонусных курсов для понимания современной инфраструктуры) и заканчивается созданием с нуля полностью рабочего реактивного приложения, где показаны все шаги по его созданию. Практике предшествует 12 теоретических блоков (а это ни много ни мало 80 видеоуроков!), где максимально подробно разобраны и систематизированы все тонкости фреймворка на различных примерах. В отличие от курсов-роликов на YouTube, большинство из которых, являются лишь переводом и озвучкой англоязычной документации, этот видеокурс является практическим. В практической части разрабатывается полноценное веб-приложение. На момент своего выхода материалы видеокурса являются предельно актуальными и востребованными на российском рынке Front-End разработки – на рынке попросту не хватает людей с подобным навыком. Отличительными характеристиками всех курсов WebForMyself является структурированная, систематическая, последовательная и грамотная подача материала. И этот курс не исключение.

161 Kbps
Аудио: AAC, 2 ch, 122 Kbps

Angular 4 с Нуля до Профи (2020)

moonz

Новорег

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

Автор: Владилен Минин
Продолжительность: 38:05:22
Качество видео: PCRec
Вес: 4,72 GB

Скачать торентом: [H > Для просмотра ссылки Войди

БЛОК 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. Премиум курс по EcmaScript 6
    БОНУС 2. Премиум курс по TypeScript
    БОНУС 3. Премиум курс по Webpack
    БОНУС 4. Премиум курс по RxJS (Reactive — Extensions)
    БОНУС 5. Премиум курс по NodeJS
    БОНУС 6. Курс по JavaScript
    БОНУС 7. Перенос проекта на хостинг. Домен

Angular 4 c Нуля до Профи

Видеокурс «Angular 4 c Нуля до Профи»

Ознакомиться с курсом

Видеокурс «Angular 4 c Нуля до Профи»

Полное руководство для современной веб-разработки. Единый фреймворк под мобильные устройства и десктопы: как веб-проекты, так и нативные приложения. Angular 4 c Нуля до Профи. Angular – незаменимый инструмент для профессионального веб-разработчика. Angular – новейший тренд современной веб-разработки. Angular — это относительно новый и, пожалуй, на сегодняшний день наиболее перспективный JavaScript-фреймворк с открытым исходным кодом. А создателем его является мировой лидер в инновациях и стандартах веб-разработки – компания Google. Прежде всего, он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. Данный курс содержит в себе более 30 часов обучающих материалов, которые последовательно и очень подробно научат вас самым актуальным технологиям на текущий момент и которые будут актуальными ближайшие несколько лет.

Другие видеокурсы по теме:

Топ-пост этого месяца:  Основы проектирования интерфейсов курсы, обучение, как стать высококлассным специалистом
Добавить комментарий