Angular для начинающих

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

СМОТРЕТЬ ЦЕНЫ ОНЛАЙН ДЕМО

Длительность: ~ 14 часов, 79 уроков
Время на изучение: ~ 3 недели

Что такое Angular?


Это cовременный и популярный фреймворк, созданный в Google  и основанный на языке JavaScript/TypeScript. Входит в топ по запросам в интернете (наряду с React).


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


В общем если не хотите отстать от рынка - нужно обязательно изучать Angular, тем более он не сильно сложный (по сравнению с тем же React).

Почему Angular?

Этот фреймворк стал очень популярным, благодаря своим соотношением "возможности/легкости".

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

С мобильной версткой

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

Реактивный код + Angular

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

Компоненты на все случаи 

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

Зарплаты Angular специалистов

Спрос на Angular-разработчиков

В данный момент пока еще спрос превышает предложение, поэтому вилка зарплат хорошая, даже для джуниоров. Но каждый месяц рынок заполняется новыми специалистами, поэтому нельзя сильно медлить.

Востребованность на рынке труда

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

Возможность заниматься фрилансом

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

Примеры Angular приложений

https://www.madewithangular.com/

Что изучать: React или Angular? 


Это очень частый вопрос от новичков. React и Angular - два конкурента, которые основаны на JavaSсript/TypeScript. В идеале конечно надо знать оба. Я советую начать с Angular, он легче для новичков. Подробно расписал в статье "Что изучать: React или Angular?"

Умирает ли Java? 


Многие задают вопрос, что теперь делать с Java, умрет ли он из-за JavaScript фреймворков? На самом деле Java будет востребована еще очень долго, т.к. это один из главных языков для серверных технологий. Частая комбинация: Angular на frontend + Java на backend - все это работает через RESTful запросы в формате JSON. Если будете уметь работать в такой связке - вы будете очень востребованным на рынке труда. Сегодня знать Java и TypeScript - это уже очень продвинутый уровень.

Что нужно знать
для изучения Angular

Чтобы материалы усваивались легче,
желательно иметь базовые знания

01.

HTML

Если у вас нет минимальных знаний как создавать веб страницы в HTML - пройдите материалы (можно выучить за пару вечеров). Материалы для новичков:
https://www.w3schools.com/html/

02.

CSS

Также вы должны знать, как применять CSS стили, добавлять дизайн к компонентам, описывать селекторы, подключать CSS файлы и т.д. Пройдите этот быстрый курс:
https://www.w3schools.com/css

03.

Любой опыт веб приложений

Что такое веб страница, браузер, url - эти элементарные понятия у вас должны быть. Если вы создавали веб приложения на другом языке - это поможет в изучении
Можно посмотреть бесплатные материалы на эту тему

ОТКРЫТЬ САЙТ 

Язык разработки TypeScript

В данном курсе вы будете использовать новый и популярный язык разработки TypeScript. Он основан на Java Script, но имеет многие преимущества, взятые из современных языков (Java, Kotlin, Swift и др.): строгая типизация, поддержка ООП, проверка на этапе компиляции и многое другое.

TypeScript поддерживается во всех современных IDE, включая подсказки, завершение кода, рефакторинг. 

Angular + TypeScript

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

НО! Мы не будем изучать TypeScript "от и до", а только то, что требуется по задаче. Нет смысла без конкретной задачи изучать весь синтаксис, т.к. многое забудется, если не закреплять практикой.

Какое приложение вы создадите?

Вы создадите собственную версию приложения "Планировщик дел" (Todo), в котором по шагам реализуете основные функции:

1) Интерактивное отображение задач
2) Добавление/удаление/редактирование задач
3) Добавление/удаление/редактирование категорий
4) Добавление/удаление/редактирование приоритетов
5) Отображение цвета приоритетов
6) Статистика по всем задачам
7) Поиск и фильтрация задач
8) Количество задач для каждой категории
9) Боковое слайд-меню
10) Настройки приложения
11) Справочное интро при первом запуске
12) Работа с календарем для установки даты
13) Добавление дизайн-шаблона в проект
14) Добавление material-компонентов
15) Мобильная версия приложения
16) И многое другое...

Видеодемонстрация приложения
(нажмите Play и разверните на весь экран)


ОТКРЫТЬ ПРИЛОЖЕНИЕ ОНЛАЙН

* Поcмотрите вживую как работает приложение

Какие технологии
будете использовать

Angular

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

HTML, CSS

Отображение веб страниц и добавление стилей, селекторов, отладка кода в Google Chrome, добавление анимации

TypeScript

Язык разработки, основанный на Java Script, но более строгий и типизированный. Будете изучать сразу по ходу создания приложения на практике

Bootstrap

Разметка страницы, создание responsive дизайна, использование сеточной системы и готовых селекторов CSS.

RxJS

Реактивный стиль создания кода, который поддерживается в Angular сразу "из коробки" - асинхронные вызовы, уменьшение кода. 

Git/GitHub

Хранение версий кода/проекта в локальном и удаленном репозиториях, связывание со средой IntelliJ IDEA Ultimate

IntelliJ IDEA Ultimate

Среда разработки (можно trial-версию), которая поддерживает Angular и TypeScript: подстановка кода, рефакторинг, генерация и многое другое..

Мобильная версия

Любое веб приложение должно уметь открываться на мобильных устройствах и корректно отображаться (компоненты, разметка)

Перенос дизайна

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

Базовые уроки

Настройка и установка окружения,
введение в технологии Angular

1. Что такое Angular?

12 мин

Введение в технологию, основные плюсы-минусы
и отличия от других решений

2. Установка и настройка IntelliJ IDEA

15 мин

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

3. Установка Angular и всего ПО

14 мин

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

4. Frontend и Backend

5 мин

Разделение приложения и понимание как все работает,
зачем нужны клиент-серверные отношения

5. Создание Angular проекта

10 мин

Создание и запуск вашего первого Angular проекта,
использование IDEA вместо консоли

6. Открытие проекта в IDEA

5 мин

Как открывать готовые Angular проекты, чтобы
у вас все сразу заработало

7. Структура Angular проекта

16 мин

Структура папок, файлов, JSON - настроек любого
Angular проекта

8. Git/GitHub

17 мин

Зачем нужно использовать Git/GitHub,
основные возможности и рекомендации 

9. Добавление Git в проект

25 мин

Как хранить свой код в локальном и удаленном
репозиториях, создание и загрузка кода

10. Функционал приложения Todo

10 мин

Какой функционал вы будете реализовывать с нуля,
основные возможности, границы действий

11. Планирование UI

5 мин

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

12. Разделение UI на компоненты

3 мин

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

13. Выбор дизайна

8 мин

Чтобы не создавать дизайн с нуля (долго) - вы можете 
использовать любой бесплатный и платный шаблон
и перенести его в свой проект

14. Bootstrap и Material

12 мин

Библиотеки для разметки и визуальных компонентов,
которые вы будете использовать в своем проекте

15. Перенос HTML шаблона в проект Angular

22 мин

Пошаговые действия, чтобы превратить обычный
HTML-шаблон в проект Angular

16. Тестовые данные

18 мин

Создание и формирование тестовых данных
для отображения в приложении

17. Подключение библиотек

15 мин

Добавление сторонних библиотек для
расширения стандартного функционала

18. Добавление компонента и сервиса

18 мин

Использование инструментов Angular 
для связывания кода и UI

19. Отображение категорий

32 мин

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

20. Выборка задач по категории

11 мин

Фильтрация задач по категориям, обновление
страницы и списков

21. Реактивное программирование

19 мин

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

22. Отображение данных задачи

21 мин

Отображение всех данных задачи
с помощью компонентов Angular

23. Выполнение задачи

5 мин

Завершение задачи (выполнение) и отображение с 
соответствующим стилем

24. Базовые понятия

4 мин

Подитог прошедших уроков, закрепление основ
и базовых принципов Angular

Основные уроки

Сложный функционал с добавлением
сторонних библиотек

25. Таблица с задачами

30 мин

Применение готового компонента таблицы
для отображения задач в нужном стиле

26. Сортировка и постраничность

20 мин

Добавление сортировки и постраничности
в компонент таблицы с задачами

27. Жизненный цикл компонента

10 мин

Основные этапы работы компонентов,
перехват методов

28. DAO

23 мин

Применение паттерна DAO
в Angular проекте

29. Реализация DAO

10 мин

Формализация интерфейса доступа к данным
с помощью паттерна DAO

30. @Input

16 мин

Декоратор для передачи входящих данных
дочернему компоненту

31. @Output

20 мин

Декоратор для исходящих данных от дочернего
компонента к родительскому

32. Диалоговые окна

22 мин

Применение диалоговых окон для
отображения и редактирования данных

33. Редактирование названия

26 мин

Изменение названия задачи с помощью
диалогового окна

34. Выпадающий список

12 мин

Заполнение выпадающих списков категорий и приоритетов
для фильтрации или редактирования задачи

35. Окно подтверждения

12 мин

Добавление окна подтверждения для 
критичных операций (удаление)

36. Выбор даты

6 мин

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

37. Формат даты

11 мин

Преобразование даты в нужный текст с помощью
собственного трансформатора

38. Действия над задачей

17 мин

Доступные кнопки редактирования, удаления, 
завершение сразу из списка задач

39. Категория Все

4 мин

Виртуальная категория для хранения
всех значений (пустых, заполненных)

40. Редактирование категории

21 мин

Изменение данных категории, автоматическое обновление списка задач

41. Smart and Dumb components

8 мин

Архитектура всего приложение, разделение компонентов
на родительские и дочерние

42. Фильтрация задач

22 мин

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

43. Добавление задачи

23 мин

Добавление новой задачи со всеми полями,
выпадающими списками, датой

44. Поиск категорий

10 мин

Функционал по поиску категорий в 
левом боковом меню списка

45. Изменение HTML

18 мин

Оптимизация HTML и сборка компонентов
из скачанного дизайн-шаблона

46. Статистика

13 мин

Статистика по каждой категории в
количестве задач и процентах

47. Header

9 мин

Добавление "шапки" в приложении, где будут
находиться быстрые ссылки для действий

48. Приоритеты и цвета

24 мин

Использование цветов приоритета для 
визуального разделения задач в списке

49. Количество задач

24 мин

Отображение количества невыполненных задач
возле каждой категории

Дополнительные уроки

Дополнительные уроки к основному функционалу
(мобильная версия, установка на хостинг, поиск "медленных" мест, куда двигаться дальше)

50. Компонент Intro

22 мин

Отображение приветственных справочных сообщений
пользователю с выделением областей экрана

51. Боковое слайд-меню

16 мин

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

52. Мобильная веб-версия 

20 мин

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

53. Карточки задач

17 мин

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

54. Отладка и замеры производительности Angular приложения

32 мин

Как правильно выполнять отладку приложения,
искать "узкие" места, замерять скорость работы

55. Компиляторы и типы компиляций проекта

16 мин

Зачем нужны и как запускать разные типы компляторов, какой можно использовать при разработке, а какой в режиме "production"

56. Публикация Angular приложения на хостинге

10 мин

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

57. Какие направления изучать дальше, чтобы стать профессионалом

20 мин

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

Что содержится в уроках

Если просто изучать теорию (читать документацию, статьи) - без практики выветрится около 80% информации.

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

Вы будете с нуля создавать весь код и постепенно привыкать к синтаксису и принципам.

Видео - лекция


Изучаете основные темы урока по видео - сначала без создания кода, чтобы просто усвоить информацию

Исходный код лекции


Смотрите готовый исходный код из урока-лекции - желательно его переписывать с нуля самостоятельно

Домашнее задание


В конце лекции - получаете домашнее задание, которое нужно попытаться выполнить самостоятельно.

Исходный код решения домашнего задания


Получаете готовый проект-решение домашнего задания, для сравнения со своим вариантом

Видео - объяснение решения


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

PDF презентация урока-лекции


Текстовый вид презентации из лекции, для повторения и удобного открытия гиперссылок (чтобы вручную не писать в браузере)

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

Вы сможете идти по коду и смотреть пошагово что происходит в данный момент.

Комментарии есть как в исходных кодах-лекциях, так и в решениях дом. заданий.

Среда разработки IntelliJ IDEA - одна из лучших и популярных на данный момент. Вы будете использовать ее для создания проекта, кода, генерации компонентов Angular - в общем всю разработки будете вести в IDEA.

Как проходит обучение

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

Уроки доступны только онлайн, поэтому доступ к интернету обязателен.

Материалы можно изучать в любое время без ограничений.

Об авторе

Батыршинов Тимур, 33 года: основатель обучающего центра «JavaBegin». Главный тренер.

За 7 лет обучил более 46000 человек (онлайн и оффлайн).

Опыт разработки — более 14 лет.

Автор более 50 курсов по разным направлениям Java: основы, веб, Android, Spring, Angular и многие другие.

Вопросы

Доступ к материалам и поддержке - неограничен. Можете изучать и возвращаться к урокам в любое время.

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

Примерно 2-3 недели - это время, чтобы получить главный фундамент Angular и далее его развивать. За 2-3 недели вы создадите свое крупное приложение и сможете показывать его на собеседованиях.

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

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

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

Можно, но это будет стоить дороже (примерно на 30%), чем если бы вы сразу купили нужный комплект. Особенно, если покупаете курс в дни скидок.

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

Если оплачиваете наличными (через банкомат или терминал) - нужно выполнить конвертацию самостоятельно. Подробная инструкция находится в способах оплаты.

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

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

Отзывы

Посмотрите отзывы учеников по различным курсам и тренингам,
какие они получили результаты.

Закрытая телеграм группа и комментарии

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

Где можно задавать вопросы:

1) В закрытой телеграм группе

2) В комментариях под каждым уроком

Стоимость

Исходный код: октябрь 2019 г. (Angular 8)

Скидка действует до 5 октября включительно.
До конца акции осталось:

* Первые 50 клиентов получают 3 бонусных курса

Минимум

Кто хочет изучать самостоятельно

  2900
рублей
КУПИТЬ

Стандарт

Кто хочет изучать сам
+ доп. уроки

  3900
рублей
КУПИТЬ

Расширенный

Поддержка по вопросам, общение в группе

  4900
рублей
КУПИТЬ

Премиум

+ индивидуальная
поддержка

  6900
рублей

  • Расширенный +
  • Личные 2 встречи по скайпу (1 час) с автором курса
КУПИТЬ

* После оплаты в течение 24-х часов вы получите всю информацию.

Способы оплаты

Выбирайте любой удобный способ оплаты
(можно изменять в любое время по ссылке из письма)

Картой VISA, MasterCard

(онлайн оплата)

Платежная система Webmoney

(онлайн оплата)

Платежная система Яндекс.Деньги

(онлайн оплата)

Платежная система QIWI

(онлайн оплата или через любой терминал)

Платежная система PayPal

(онлайн оплата)

"Сбербанк Онлайн" или "Тинькофф Кредитные системы"

(онлайн оплата)

Приват24 (Украина)

(онлайн оплата)

Для жителей Казахстана

(Казком или Kaspi - homebank, банкоматы, кассы, терминалы)

Безналичный расчет для физ. и юр.лиц

(через банк)


Денежные переводы из любой страны

(наличными через банк)

Салоны сотовой связи

(наличными)

Любой банкомат "Сбербанка"

(наличными)


P.S. Не нашли подходящий способ оплаты? Напишите нам

ИП Батыршинов Тимур
Сырымгалиевич

ИИН 851110300087

Контакты

Email: support@javabegin.ru
Служба поддержки

Ссылки

Другие курсы