Курс Angular для начинающих

Язык преподавания в курсе – русский. Вскоре будет доступна украинская версия этого курса.

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

Что такое Angular?

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

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

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

Почему Angular?

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

Что нужно знать для изучения 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) И многое другое…

[fvplayer id=”103″]

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

1. Что такое Angular?
Введение в технологию, основные плюсы-минусы и отличия от других решений

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Базовые понятия
Итог прошедших уроков, закрепление основ и базовых принципов Angular

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

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

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

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

27. Жизненный цикл компонента
Основные этапы работы компонентов, перехват методов

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

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

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

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

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

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

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

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

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

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

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

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

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

41. Smart and Dumb components
Архитектура всего приложение, разделение компонентов на родительские и дочерние

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

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

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

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

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

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

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

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

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

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

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

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

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

54. Отладка и замеры производительности Angular приложения
Как правильно выполнять отладку приложения, искать “узкие” места, замерять скорость работы

55. Компиляторы и типы компиляций проекта
Зачем нужны и как запускать разные типы компляторов, какой можно использовать при разработке, а какой в режиме “production”

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

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