Курс Angular 8

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

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

Цей курс не потребує жодних попередніх знань з Angular або інших фреймворків. Все дано з нуля

Курс містить у собі 14 годин навчальних матеріалів, які послідовно і дуже докладно навчать вас найактуальнішим знанням з прекрасної Frontend технології Angular від компанії Google.

З попередніх знань тільки основи. Решта в курсі розповідається з самого нуля, включно з TypeScript і RxJS.

Практиці передує 13 теоретичних блоків, де максимально докладно розібрано і систематизовано у вигляді покрокової цілісної системи всі тонкощі фреймворку на різних прикладах.

Курс складається з двох великих блоків: теоретичного та практичного.

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

У теоретичному блоці зібрано все, що тільки може вам знадобиться при розробці з Angular.

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

Чому Angular це круто?

Модулі

Одразу варто зазначити, що Angular складається з модулів. З набору необхідних модулів і будується наш повністю готовий застосунок, який ми з повного нуля розроблятимемо в нашому новому навчальному курсі (про це докладніше нижче). Наш додаток, взагалі кажучи, теж є модулем.

Компоненти

Компоненти відповідають за зовнішній вигляд і за взаємодію з користувачем. Компоненти – це частина призначеного для користувача інтерфейсу, вони являють собою основні “будівельні блоки” додатка Angular. Ідея компонентів полягає в тому, щоб розділити користувацькі інтерфейси на складові частини.

Двостороннє зв’язування

Angular надає таку функціональність, як двостороннє зв’язування, що дає змогу динамічно змінювати дані в одному місці інтерфейсу під час зміни даних моделі в іншому. Так само в Angular присутні шаблони, маршрутизація тощо.

Компанія Google

Підтримка такої компанії, як google заздалегідь свідчить про те, що ця технологія використовуватиме найсучасніші та найефективніші можливості мови для надання найкрутішого результату роботи ваших додатків.

Ключові можливості Angular

Створення реактивних додатків

Завдяки Angular з’явилася можливість максимально швидко і просто створювати динамічні реактивні додатки (звичайні веб-сайти). Такі додатки працюють без перезавантаження сторінки і при переході на нову сторінку вона з’являється моментально, на відміну від звичайних сайтів. Будь-яка взаємодія з користувачем відбувається асинхронно у фоновому режимі, що прискорює взаємодію і збільшує зручність використання сайту.

Директиви

Є однією з ключових можливостей Angular. Вони дають змогу розробнику описати поведінку окремих елементів і розширити синтаксис HTML. До складу Angular входить лише базовий набір директив. Однак, їх можна розширити своїми власними напрацюваннями. Правильно створені директиви можуть використовуватися і в інших проєктах. Деякі розробники навіть практикують викладати свої колекції компонент у публічний доступ.

Відкладене завантаження

Основне завдання Angular Team з оптимізації швидкодії застосунку полягало в тому, щоб домогтися автоматичного відкладеного завантаження. Це гарантує нашим додаткам тільки те, що необхідно для поточної сторінки. Ледаче завантаження також було ввімкнено під час маршрутизації в додатках.

Швидкий рендеринг

Порівняно з першою версією додатки на останній версії Angular працюють у 2,5 раза швидше, а перемальовування в 4,2 раза швидше – завдяки використанню технології shadow DOM. Команда Angular вважає, що вона може зробити рендеринг ще швидшим.

Опис курсу

Вступ

Про цей курс
Що потрібно для проходження курсу
Що таке Angular
Як проходити курс

Основи та синтаксис

Як створити додаток
Огляд усіх папок і файлів?лов
Передача параметрів з компонентів
Створення свого компонента
Створення компонента з Angular CLI
Шаблони та стилі
Інтерполяція
Що таке bindings
Як працює Event BindingsWay BindingДректива ngStyingДинамічні класи з ngClassОбраження умови працює Event Bindings
Way Binding
Директива ngStyle
Динамічні класи з ngClass
Відображення за умовою з ngIf else
Директива ngSwitch
Цикли з ngFor
Що таке pipes

Компоненти в деталях

Як створювати компоненти
Передавання параметрів
Передавання параметрів із компонентів
Доступ до HTML-елементів
Передавання HTML у компонент
Доступ до контенту з ContentChild
Життєвий цикл (lifecycle hooks)
Change Detection Strategy
Стилі з ViewEncapsulation

Директиви

Як створити директиву
Отримання доступу до елемента
Додавання події
Передання параметрів у директиву
Як працює HostBinding
Створення структурної директиви

Пайпи

Робота з числами
Пайпи для рядків
Як знаходити інформацію в документації
Пайпи для дати
Ще пайпи?пи
Створення свого паї?па
Генерація паї?па з CLI
Фільтрація списків
Оптимізація паї?пов
Паї?п async

Сервіси

Створення сервісу
Декоратор Injectable
Локальні сервіси
Область видимості сервісів
Зв’язок сервісів

Форми та валідація

Вступний
Створення форми
Створення контролів
Валідатори
Візуалізація стану
Відображення повідомленні? помилок
Створення груп
Динамічне оновлення форми
Робота з групами
Створення свого валідатора
Асинхронні валідатори
Очищення форми
Створення своєї ngModel

Робота із сервером (HttpClient)

Вступні?
Отримання даних і виведення в шаблон
Створення об’єктів з POST
RxJS оператори та індикатор завантаження
Видалення елементів
Перенесення логіки в сервіс
Модифікація елементів з PUT
Обробка помилок
Додавання headers
Робота з параметрами
Параметр observe
Перехоплення запитів з інтерсептором
Модифікація запитів і обробка відповідей

Мультисторінковість із роутингом

Що таке роутинг
Реєстрація роутів
Динамічна зміна сторінок
Активне посилання
Програмна навігація
Динамічні роути
Опрацювання параметрівРобота з параметрамиВкладені сторінкиРедирект помилокЗахист дочірніх роутівКак працюють Resolvers параметрів
Робота з параметрами
Вкладені сторінки
Редирект і обробка помилок
Захист сторінок
Захист дочірніх роутів
Як працюють Resolvers

Як працюють модулі

Вступ
Що є в модулях
Створення окремого модуля
Ліниве завантаження модулів?
Новий синтаксис імпорту
Зміна стратегії завантаження

Додаткові можливості

Динамічні компоненти. Частина
Динамічні компоненти. Частина
SEO. Робота з тегами
PWA модуль

Unit тестування

Вступ до Unit тестів
Тестування рядків і масивів
Тестування Angular компонента
Тестування EventEmitter
Тестування форми
Тестування сервісу
Додавання елементів
Тестування confirm методу
Статистика покриття тестів
Інтеграційне тестування
Настроювання?ка
Тестування шаблону і свої?ств
Події та класи
Додавання Dependency Injection
Генерування тестів
Тестування роутера
Тестування параметрів url
Пошук динамічних директив
Тестування посилання в шаблоні
Асинхронність
Тестування директив

Анімації

Налаштування анімації?
Визначення стану?
Додавання transition
Складні переходи
Поява та зникнення
Групування анімації?
Доступ до дочірніх елементів
Кроки анімації
Події анімації
Бібліотека ng-animate

Практика. Створення блогу

Створення додатка
Створення головного layout
Модуль панелі адміністратора
Оформлення головної сторінки
Сторінка поста
Структура admin layout
Сторінка входу. Урок
Сторінка входу. Урок
Сервіс для авторизації
Налаштування?ка firebase
Зберігання токена
Обробка помилок
Захист роутів
Форма створення поста
Підключення підключення плагіна редактора
Створення поста
Створення інтерсептора
Виведення списку постів
Паи?п для фільтрації списку
Видалення поста
Сторінка редагування поста
Редагування поста
Створення плагіна повідомлення?
Реєстрація локалізації
Виведення постів
Відображення посту
Додавання PWA
Деплої? додатки

Бонус. Typescript для Angular

Базові типи
Робота з функціями
Робота з класами
Інтерфейси та об’єкти
Інтерфейси та класи
Генеричні типи

Бонус. Основи RxJS

Як працює RxJS
Оптимізація стрімів
Як використовувати оператори
Створення свого стріму
Як працює Subject

Всього 17 годин відеолекцій