Цель заброшена
Автор не отписывался в цели 7 лет 2 месяца 2 дня
Изучить курс: Angular 4 c Нуля до Профи
Недавно получил анонс что 25 сентября выйдет курс от издательство WebForMySelf по фреймворку Angular версий 4. Примерно 1-2 месяца назад активно искал подобный курс и ничего не нашёл. Поэтому изучил основы на английском языке, но с трудом. Поэтому сейчас воспользуюсь возможностью изучить данный курс. Вообще он стоит 6 470 руб, но как обычно к релизу есть скидка, поэтому куплю данный курс за 3 882 рублей. Вообще после всех курсов от WebForMySelf смог начать работать в области которую изучил, поэтому уверен что данный курс тоже будет отличный. И от данного автора тоже прошёл курс по React, и объясняет очень доходчиво.
Если кто-то тоже будет изучать, пишите!
Критерий завершения
успешно изучил все уроки
Личные ресурсы
время, деньги
-
Теория. ВВЕДЕНИЕ И УСТАНОВКА
- Это первый вступительный блок в курс по Angular где вы познакомитесь с базовыми знаниями и понятиями, которые будут использоваться в курсе.
- Вы узнаете, что такое Angular, где он используется, какие задачи он решает и почему стоит учить именно его. Вы узнаете, чем отличается Angular 2 от Angular 4 и какую версию будем проходить мы в курсе.
- Далее вы узнаете, как очень просто установить Angular на компьютер и запустить первый проект на нем уже в режиме разработки. И далее мы рассмотрим полностью структуру проекта, для того, чтобы вы полностью понимали, что за что отвечает, и вам было просто работать
-
Что такое Angular
-
Установка Angular
-
Обзор структуры проекта
-
Теория. СИНТАКСИС
- В данном блоке вы познакомитесь с базовыми понятиями и структурами, которые есть во фреймворке Angular.
- Начнем мы с изучения того, как вообще Angular работает и запускается в браузере. Далее мы детальнее посмотрим на то, что такое компоненты, как их создавать несколькими способами и как они работают.
- Далее вы познакомитесь с уникальным синтаксисом Angular, узнаете, что такое “2 way binding”, директивы и пайпы.
-
Создание компонента
-
Шаблоны и стили компонента
-
Селекторы в компонентах
-
Связка компонента и шаблона. Свойства
-
Связка компонента и шаблона. События
-
Связка компонента и шаблона. Двухстороннее связывание
-
Директива ngIf else
-
Директива ngFor
-
Директивы ngStyle и ngClass
-
Пайпы
-
Теория. КОМПОНЕНТЫ
- С этого блока, мы начнем детальное изучение каждой из сущности Angular.
- Данный блок посвящен компонентам – одной из самых основных сущностей фреймворка.
- В блоке мы детальнее поговорим про настройку компонентов. Вы узнаете, как их связывать параметрами, как оптимизировать работу компонентов, как обращаться к внутренним элементам. Узнаете, что такое жизненный цикл компонентов, и как его использовать.
-
Передача параметров в компонент
-
Получение данных из компонента
-
Область видимости CSS
-
Доступ к DOM элементам
-
Передача HTML-кода компоненту
-
Жизненный цикл компонента
-
Теория. ДИРЕКТИВЫ
- В этом блоке вы детально познакомитесь с директивами.
- Помимо встроенных директив, Angular предоставляет нам возможность создавать свои собственные директивы. И, в основном, в данном блоке мы будем говорить именно про создание.
- Вы узнаете несколько способов, как создавать директивы, какие есть варианты для манипуляции над элементами внутри директив, как получать параметры в директиве и как добавлять прослушку различных событий.
-
Создание директивы
-
Использование Renderer
-
Работа с событиями
-
Передача параметров
-
Директива ngSwitch
-
Теория. ПАЙПЫ
- Блок посвящен очень важной части Angular – пайпам. Помимо стандартных пайпов мы разберем, как создавать свои и разберем несколько областей их применения.
- Пайпы – это такие конструкции, которые помогают преобразовывать HTML-код в удобный нам формат. Например, с помощью них обычный new Date в Javascript мы можем привести в нужный формат всего лишь за пару символов. Или мы можем управлять строками, циклами, объектами, и так далее.
-
Использование пайпов
-
Создание своего пайпа
-
Создание динамического фильтра
-
Оптимизация пайпов
-
Async пайп
-
Теория. СЕРВИСЫ
- В данном блоке вы узнаете, что такое сервисы и как они используются в Angular.
- Мы начнем с того, что разберем, как мы можем создавать сервисы и далее рассмотрим взаимодействие компонентов через сервис.
- Вы узнаете, как использовать сервис внутри сервиса, сколько экземпляров сервисов вообще есть в приложении и как, и где правильно их подключать.
-
Создание сервиса
-
Связь компонентов через сервис
-
Использование сервиса в сервисе
- В данном блоке вы узнаете, что такое сервисы и как они используются в Angular.
-
Теория. ФОРМЫ
- В блоке мы разберем 2 подхода по работе с формами внутри Angular: 1) когда мы делаем валидацию внутри шаблона; 2) когда мы делаем валидацию внутри компонента – в typescript коде.
- Также мы рассмотрим способы создания своих собственных синхронных и асинхронных валидаторов.
- Одна из самых популярных тем в Angular – это работа с HTML-формами. Теперь для того, чтобы проверить правильность введенных данных нам не нужно ждать ответа сервера: мы все будем проверять на ходу, динамически и моментально. Например, если форма будет требовать от пользователя ввести почтовый адрес, то он не сможет отправить форму на сервер, пока не введет корректный формат. Или если уже такой email занят, то он так же получит моментальный ответ.
- Angular предоставляет нам крайне простые и удобные инструменты по реализации подобных валидаций на ходу: мы можем проверять любые состояния, добавлять любые сообщения об ошибке или успехе, добавлять нужные цвета или классы буквально за пару строк кода!
-
Вводный
-
TD Создание формы
-
TD Валидация формы 1
-
TD Валидация формы 2
-
TD Значения по умолчанию
-
TD Группировка форм
-
TD Динамическое изменение формы
-
R Создание формы
-
R Валидация формы
-
R Группировка форм
-
R Создание валидатора
-
R Создание асинхронного валидатора
-
Теория. HTTP
- Данный блок посвящен очень важной теме для SPA – асинхронное и фоновое общение с сервером.
- В данном блоке вы познакомитесь с умной Angular реализацией AJAX, узнаете, что такое REST API. Мы рассмотрим множество возможностей, как можно оптимизировать работу с сервером: начиная с выбора метода по отправке запроса и заканчивая темой, как добавлять различные хедеры в запрос.
- Также мы плотнее познакомимся с концепцией Observable, научимся обрабатывать выходные данные и рассмотрим, как мы можем обрабатывать различные ошибки сервера.
-
Настройка сервера
-
Получение данных. Метод GET
-
Вывод данных в шаблон
-
Добавление элементов. Метод POST
-
Изменение элементов. Метод PUT
-
Удаление элементов. Метод DELETE
-
Добавление хедеров
-
Обработка ошибок
-
Async пайп
- Данный блок посвящен очень важной теме для SPA – асинхронное и фоновое общение с сервером.
-
Теория. РОУТИНГ
- Данный блок посвящен роутингу - инструменту, который позволяет моментально переключать страницы сайта.
- В блоке вы узнаете, как создавать роуты, как правильно их регистрировать, как делать базовую навигацию между страницами и зачем для этого нужны специальные директивы.
- Далее вы детально увидите хитрости и тонкие моменты работы с роутами, например, отличие относительного или абсолютного пути. Узнаете, как сделать двойной роутинг, научитесь делать редирект и познакомитесь с таким понятием как guard.
-
Создание роутов
-
Создание роутинг модуля
-
Навигация между страницами
-
Программная навигация
-
Параметры адресной строки. Урок 1
-
Параметры адресной строки. Урок 2
-
Встроенные роуты
-
Редирект и обработка ошибок
-
Защищенные роуты
-
Теория. МОДУЛИ
- Данный блок посвящен очень важной части Angular - модулям.
- Модули – это основополагающие сущности фреймворка, с помощью которых мы можем группировать различные элементы и оптимизировать наше приложение.
-
Создание модуля
-
Создание общего модуля
-
Ленивая загрузка
-
Предзагрузка модулей
- Данный блок посвящен очень важной части Angular - модулям.
-
Теория. АНИМАЦИИ
- Данный блок посвящен анимациям и методам работы с ними.
- Команда Angular предоставила очень удобный и невероятно гибкий подход к созданию прогрессивных анимаций на современной технологии Web Animations, которая только недавно начала поддерживаться в браузерах.
- В данном блоке вы научитесь создавать анимации любой сложности используя удобный интерфейс, который нам предоставляет Angular.
-
Создание анимации
-
Множество состояний
-
Сложный переход
-
Пустое состояние
-
Специальные символы
-
Детальное управление анимацией
-
События
-
Теория. ЮНИТ ТЕСТЫ
- В данном блоке мы с вами рассмотрим не прямой функционал фреймворка, а его возможность для тестирования того функционала, который мы будем создавать.
- Данный блок будет являться вступительным в тему юнит тестирования, где вы познакомитесь с основными понятиями и научитесь писать тесты для пайпов, сервисов, директив в компонент.
-
Запуск тестов
-
Тестирование компонента
-
Тестирование сервиса. Инъекция
-
Тестирование методов сервиса
-
Асинхронное тестирование
-
Тестирование пайпа
-
Тестирование директивы
-
Разработка сервиса - ДОМАШНЯЯ БУХГАЛТЕРИЯ
-
Вводный
-
Настройка рабочего окружения
-
Подключение стилей
-
Модуль авторизации
-
Регистрация роутов + подключение шаблона
-
Страница логина. Валидация
-
Страница логина. Получение данных с сервера
-
Страница логина. Авторизация
-
Страница регистрации
-
Создание асинхронного валидатора
-
Создание модуля системы
-
Перенос шаблонов
-
Создание левого меню
-
Создание хедера
-
Страница счета. Получение данных
-
Создание базового класса для API
-
Страница счета. Вывод данных
-
Создание пайпа формата дат и времени
-
Страница записей. Создание шаблона
-
Страница записей. Добавление категорий
-
Страница записей. Редактирование категорий
-
Страница записей. Добавление события 1
-
Страница записей. Добавление события 2
-
Страница планирования
-
Страница истории. Шаблон
-
Страница истории. График
-
Страница истории. Список
-
Страница истории. Поиск
-
Страница истории. Детальная страница
-
Страница истории. Фильтр 1
-
Страница истории. Фильтр 2
-
Ленивая загрузка модуля
-
Защита роутов
-
Страница «404»
-
Красивый лоадер
-
Анимации
-
SEO опитмизация
-
Финальная сборка
-
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
