Практический обучающий курс, где вы с нуля создадите большой проект Angular, начиная с установки ПО, заканчивая полным функционалом. Быстрый старт для новичков.
Длительность: ~ 14 часов, 79 уроков
Время на изучение: ~ 3 недели
Это cовременный и популярный фреймворк, созданный в Google и основанный на языке JavaScript/TypeScript. Входит в топ по запросам в интернете (наряду с React).
Скорее всего вы слышите это название постоянно, теперь самое время научиться на нем разрабатывать. Здесь можно посмотреть примеры сайтов на Angular. В этой статье я подробно описал в каких случаях пользуюсь Angular и как он может связываться, например, с Java или другими технологиями.
В общем если не хотите отстать от рынка - нужно обязательно изучать Angular, тем более он не сильно сложный (по сравнению с тем же React).
Вы можете брать любой готовый HTML дизайн и переносить его в свое приложение. Ваш проект будет выглядеть красиво как для десктоп, так и для мобильных устройств.
В самом фреймворке уже изначально поддерживается реактивный код на TypeScript, чтобы вы могли создавать асинхронные вызовы. Ваш UI будет отзывчивым.
Вам бесплатно будут доступны различные готовые UI компоненты, поэтому вы сможете реализовать любой функционал. Также можете подключать любые сторонние библиотеки.
В данный момент пока еще спрос превышает предложение, поэтому вилка зарплат хорошая, даже для джуниоров. Но каждый месяц рынок заполняется новыми специалистами, поэтому нельзя сильно медлить.
Если будете знать Angular - легко найдете работу практически в любом регионе, а особенно в крупных. Это сейчас очень популярная технология и многие пытаются перенести туда свои проекты.
Angular позволяет легко создавать веб проекты с асинхронными вызовами и красивым дизайном, причем работать это будет на любом хостинге. Поэтому любой веб проект или сайт можно делать на этом фреймворке и вы сможете подрабатывать на фрилансе.
Что изучать: React или Angular?
Это очень частый вопрос от новичков. React и Angular - два конкурента, которые основаны на JavaSсript/TypeScript. В идеале конечно надо знать оба. Я советую начать с Angular, он легче для новичков. Подробно расписал в статье "Что изучать: React или Angular?"
Умирает ли Java?
Многие задают вопрос, что теперь делать с Java, умрет ли он из-за JavaScript фреймворков? На самом деле Java будет востребована еще очень долго, т.к. это один из главных языков для серверных технологий. Частая комбинация: Angular на frontend + Java на backend - все это работает через RESTful запросы в формате JSON. Если будете уметь работать в такой связке - вы будете очень востребованным на рынке труда. Сегодня знать Java и TypeScript - это уже очень продвинутый уровень.
Если у вас нет минимальных знаний как создавать веб страницы в HTML - пройдите материалы (можно выучить за пару вечеров). Материалы для новичков:
https://www.w3schools.com/html/
Также вы должны знать, как применять CSS стили, добавлять дизайн к компонентам, описывать селекторы, подключать CSS файлы и т.д. Пройдите этот быстрый курс:
https://www.w3schools.com/css
Что такое веб страница, браузер, url - эти элементарные понятия у вас должны быть. Если вы создавали веб приложения на другом языке - это поможет в изучении
Можно посмотреть бесплатные материалы на эту тему
TypeScript используется в Angular как основной язык разработки.
Вы будете изучать его по ходу создания приложения, чтобы лучше запоминать сразу на практике.
НО! Мы не будем изучать TypeScript "от и до", а только то, что требуется по задаче. Нет смысла без конкретной задачи изучать весь синтаксис, т.к. многое забудется, если не закреплять практикой.
Вы создадите собственную версию приложения "Планировщик дел" (Todo), в котором по шагам реализуете основные функции:
1) Интерактивное отображение задач
2) Добавление/удаление/редактирование задач
3) Добавление/удаление/редактирование категорий
4) Добавление/удаление/редактирование приоритетов
5) Отображение цвета приоритетов
6) Статистика по всем задачам
7) Поиск и фильтрация задач
8) Количество задач для каждой категории
9) Боковое слайд-меню
10) Настройки приложения
11) Справочное интро при первом запуске
12) Работа с календарем для установки даты
13) Добавление дизайн-шаблона в проект
14) Добавление material-компонентов
15) Мобильная версия приложения
16) И многое другое...
Видеодемонстрация приложения
(нажмите Play и разверните на весь экран)
* Поcмотрите вживую как работает приложение
Основной фреймворк, в котором будет создаваться все приложение. Предоставляет готовые решения для создания как небольших, так и крупных веб приложений.
Отображение веб страниц и добавление стилей, селекторов, отладка кода в Google Chrome, добавление анимации
Язык разработки, основанный на Java Script, но более строгий и типизированный. Будете изучать сразу по ходу создания приложения на практике
Разметка страницы, создание responsive дизайна, использование сеточной системы и готовых селекторов CSS.
Реактивный стиль создания кода, который поддерживается в Angular сразу "из коробки" - асинхронные вызовы, уменьшение кода.
Хранение версий кода/проекта в локальном и удаленном репозиториях, связывание со средой IntelliJ IDEA Ultimate
Среда разработки (можно trial-версию), которая поддерживает Angular и TypeScript: подстановка кода, рефакторинг, генерация и многое другое..
Любое веб приложение должно уметь открываться на мобильных устройствах и корректно отображаться (компоненты, разметка)
Вы возьмете готовый дизайн-шаблон и перенесете его в свой Angular проект, чтобы не создавать весь дизайн с нуля
12 мин
Введение в технологию, основные плюсы-минусы
и отличия от других решений
15 мин
Подготовка к созданию проекта, рекомендуемые настройки
для комфортной работы
14 мин
Подготовка всего окружения Angular, скриптов, программ,
чтобы можно было начинать создавать проекты
5 мин
Разделение приложения и понимание как все работает,
зачем нужны клиент-серверные отношения
10 мин
Создание и запуск вашего первого Angular проекта,
использование IDEA вместо консоли
5 мин
Как открывать готовые Angular проекты, чтобы
у вас все сразу заработало
16 мин
Структура папок, файлов, JSON - настроек любого
Angular проекта
17 мин
Зачем нужно использовать Git/GitHub,
основные возможности и рекомендации
25 мин
Как хранить свой код в локальном и удаленном
репозиториях, создание и загрузка кода
10 мин
Какой функционал вы будете реализовывать с нуля,
основные возможности, границы действий
5 мин
Планирование внешнего вида и разметки, кнопок, полей
где какие компоненты будут находиться
3 мин
Правильный подход для разделения всего приложения
на более мелкие части - Angular компоненты
8 мин
Чтобы не создавать дизайн с нуля (долго) - вы можете
использовать любой бесплатный и платный шаблон
и перенести его в свой проект
12 мин
Библиотеки для разметки и визуальных компонентов,
которые вы будете использовать в своем проекте
22 мин
Пошаговые действия, чтобы превратить обычный
HTML-шаблон в проект Angular
18 мин
Создание и формирование тестовых данных
для отображения в приложении
15 мин
Добавление сторонних библиотек для
расширения стандартного функционала
18 мин
Использование инструментов Angular
для связывания кода и UI
32 мин
Вывод всех категорий на страницу приложения,
чтобы можно было фильтровать задачи
11 мин
Фильтрация задач по категориям, обновление
страницы и списков
19 мин
Использование преимуществ реактивного кода
для получения и отображения данных
21 мин
Отображение всех данных задачи
с помощью компонентов Angular
5 мин
Завершение задачи (выполнение) и отображение с
соответствующим стилем
4 мин
Подитог прошедших уроков, закрепление основ
и базовых принципов Angular
30 мин
Применение готового компонента таблицы
для отображения задач в нужном стиле
20 мин
Добавление сортировки и постраничности
в компонент таблицы с задачами
10 мин
Основные этапы работы компонентов,
перехват методов
23 мин
Применение паттерна DAO
в Angular проекте
10 мин
Формализация интерфейса доступа к данным
с помощью паттерна DAO
16 мин
Декоратор для передачи входящих данных
дочернему компоненту
20 мин
Декоратор для исходящих данных от дочернего
компонента к родительскому
22 мин
Применение диалоговых окон для
отображения и редактирования данных
26 мин
Изменение названия задачи с помощью
диалогового окна
12 мин
Заполнение выпадающих списков категорий и приоритетов
для фильтрации или редактирования задачи
12 мин
Добавление окна подтверждения для
критичных операций (удаление)
6 мин
Визуальный компонент для выбора даты и
сохранение в задаче
11 мин
Преобразование даты в нужный текст с помощью
собственного трансформатора
17 мин
Доступные кнопки редактирования, удаления,
завершение сразу из списка задач
4 мин
Виртуальная категория для хранения
всех значений (пустых, заполненных)
21 мин
Изменение данных категории, автоматическое обновление списка задач
8 мин
Архитектура всего приложение, разделение компонентов
на родительские и дочерние
22 мин
Поиск, фильтрация задачи по разным
категориям с возможностью сброса
23 мин
Добавление новой задачи со всеми полями,
выпадающими списками, датой
10 мин
Функционал по поиску категорий в
левом боковом меню списка
18 мин
Оптимизация HTML и сборка компонентов
из скачанного дизайн-шаблона
13 мин
Статистика по каждой категории в
количестве задач и процентах
9 мин
Добавление "шапки" в приложении, где будут
находиться быстрые ссылки для действий
24 мин
Использование цветов приоритета для
визуального разделения задач в списке
24 мин
Отображение количества невыполненных задач
возле каждой категории
22 мин
Отображение приветственных справочных сообщений
пользователю с выделением областей экрана
16 мин
Возможность скрытия/открытия бокового меню с анимацией,
чтобы увеличить область работы с задачами
20 мин
Доработка верстки приложения, чтобы веб проект
открывался корректно на мобильных устройствах,
использование Google Chrome для тестирования
17 мин
Отображение задач в виде карточек
для мобильных устройств, планшетов
32 мин
Как правильно выполнять отладку приложения,
искать "узкие" места, замерять скорость работы
16 мин
Зачем нужны и как запускать разные типы компляторов, какой можно использовать при разработке, а какой в режиме "production"
10 мин
Пошаговый пример установки приложения на хостинг, чтобы любой в интернете мог посмотреть ваше приложение (полезно для собеседований)
20 мин
Что изучать и куда разваивать дальше, чтобы стать профессиональным Angular разработчиком - план изучения
Изучаете основные темы урока по видео - сначала без создания кода, чтобы просто усвоить информацию
Смотрите готовый исходный код из урока-лекции - желательно его переписывать с нуля самостоятельно
В конце лекции - получаете домашнее задание, которое нужно попытаться выполнить самостоятельно.
Получаете готовый проект-решение домашнего задания, для сравнения со своим вариантом
Разбор исходного кода по решению домашнего задания, пошаговое выполнение всех действий для получения результатов
Текстовый вид презентации из лекции, для повторения и удобного открытия гиперссылок (чтобы вручную не писать в браузере)
Каждый проект содержит большое количество комментариев по коду. Это нужно для того, чтобы даже новичок мог разобраться в происходящем.
Вы сможете идти по коду и смотреть пошагово что происходит в данный момент.
Комментарии есть как в исходных кодах-лекциях, так и в решениях дом. заданий.
Среда разработки IntelliJ IDEA - одна из лучших и популярных на данный момент. Вы будете использовать ее для создания проекта, кода, генерации компонентов Angular - в общем всю разработки будете вести в IDEA.
Батыршинов Тимур, 33 года: основатель обучающего центра «JavaBegin». Главный тренер.
За 7 лет обучил более 46000 человек (онлайн и оффлайн).
Опыт разработки — более 14 лет.
Автор более 50 курсов по разным направлениям Java: основы, веб, Android, Spring, Angular и многие другие.
Доступ к материалам и поддержке - неограничен. Можете изучать и возвращаться к урокам в любое время.
Да, сможете изучать на любом компьютере, независимо от операционной системы. Можно даже смотреть видео на мобильных устройствах, но сам код придется создавать на компьютере/ноутбуке.
Примерно 2-3 недели - это время, чтобы получить главный фундамент Angular и далее его развивать. За 2-3 недели вы создадите свое крупное приложение и сможете показывать его на собеседованиях.
Для некоторых комплектов курса - есть возможность задавать вопросы в комментариях к каждому уроку либо в закрытой группе телеграм, куда имеют доступ только клиенты данного курса. На вопросы могут отвечать как сам автор, так и другие клиенты.
Все исходные коды есть, по каждому уроку можно будет открывать в IntelliJ IDEA. Но я рекомендую все равно набирать весь код вручную, чтобы лучше запомнить его.
Вам нужно выбрать комплект курса, нажать кнопку покупки и ввести свои данные. На последнем шаге вы сможете выбрать любой удобный способ оплаты, в том числе из Украины.
Можно, но это будет стоить дороже (примерно на 30%), чем если бы вы сразу купили нужный комплект. Особенно, если покупаете курс в дни скидок.
Если оплачиваете онлайн платежом (картой или электронного кошелька) или через банк - то конвертация происходит автоматически по курсу вашего банка.
Если оплачиваете наличными (через банкомат или терминал) - нужно выполнить конвертацию самостоятельно. Подробная инструкция находится в способах оплаты.
Да. Периодически выходят различные дополнения, связанные с решением недочетов или ошибок, обновляется исходный код. Вся информация будет приходить вам на email.
Да, особенно если покупаете по акции со скидкой - многие так делают. Изучение курса можете начинать в любое время. Вопросы сможете задавать также в любое время.
Для некоторых пакетов курса доступна поддержка по всем вопросам во время изучения курса. Вопросы можно задавать в любое время, на них будут отвечать как сами ученики, так и автор курса.
Где можно задавать вопросы:
1) В закрытой телеграм группе
2) В комментариях под каждым уроком
Кто хочет изучать самостоятельно
Кто хочет изучать сам
+ доп. уроки
Поддержка по вопросам, общение в группе
+ индивидуальная
поддержка
* После оплаты в течение 24-х часов вы получите всю информацию.
P.S. Не нашли подходящий способ оплаты? Напишите нам