Курс Angular для початківців

Мова викладання в курсі – російська. Незабаром буде доступна українська версія цього курсу.

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

Що таке Angular?

Це сучасний і популярний фреймворк, створений у 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 розробником – план вивчення