Курс 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. Компоненти "Розумний і тупий
Архітектура всього додатка, поділ компонентів на батьківські та дочірні

42. Фільтрація завдань
Пошук, фільтрація завдання за різними категоріями з можливістю скидання

43. Додавання завдання
Додавання нового завдання з усіма полями, випадаючими списками, датою

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

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

46. Статистика
Статистика за кожною категорією в кількості завдань і відсотках

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

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

49. Кількість завдань
Відображення кількості невиконаних завдань біля кожної категорії

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

50. Компонент Intro
Відображення привітальних довідкових повідомлень користувачеві з виділенням областей екрана

51. Бічне слайд-меню
Можливість приховування/відкриття бічного меню з анімацією, щоб збільшити область роботи із завданнями

52. Мобільна веб-версія
Доопрацювання верстки додатка, щоб веб проект відкривався коректно на мобільних пристроях, використання Google Chrome для тестування

53. Картки завдань
Відображення завдань у вигляді карток для мобільних пристроїв, планшетів

54. Налагодження та заміри продуктивності Angular додатка
Как правильно выполнять отладку приложения, искать «узкие» места, замерять скорость работы

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

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

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