Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.
Відеозаписи лекцій без зворотного зв'язку та участі викладача. Ви отримаєте доступ до матеріалів одразу після оплати.
Цей курс не потребує жодних попередніх знань з 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 вважає, що вона може зробити рендеринг ще швидшим.
- Веб-розробники
- Frontend розробники (будь-який рівень)
- Фрілансери
Опис курсу
Вступ
Про цей курс
Що потрібно для проходження курсу
Що таке Angular
Як проходити курс
Основи та синтаксис
Як створити додаток
Огляд усіх папок і файлів
Передача параметрів з компонентів
Створення свого компонента
Створення компонента з Angular CLI
Шаблони та стилі
Інтерполяція
Що таке bindings
Як працює Event Bindings
Way Binding
Директива ngStyle
Динамічні класи з ngClass
Відображення за умовою з ngIf else
Директива ngSwitch
Цикли з ngFor
Що таке труби
Компоненти в деталях
Як створювати компоненти
Передача параметрів
Передача параметрів з компонентів
Доступ до HTML елементів
Передача HTML у компонент
Доступ до контенту з ContentChild
Життєвий цикл (lifecycle hooks)
Стратегія виявлення змін
Стилі з ViewEncapsulation
Директиви
Як створити директиву
Отримання доступу до елемента
Додавання події?
Передача параметрів у директиву
Як працює HostBinding
Створення структурної директиви
Пайпи
Робота з числами
Паї? пи для рядків
Як знаходити інформацію в документації
Паї? пи для дати
Ще паї? пи?
Створення свого паю?
Генерація паї?па з CLI
Фільтрація списків
Оптимізація паїв.
Паи?п async
Сервіси
Створення сервісу
Декоратор Injectable
Локальні сервіси
Область видимості сервісів
Зв'язок сервісів
Форми та валідація
Вступний
Створення форми
Створення контролів
Валідатори
Візуалізація стані?
Відображення повідомленні? помилок
Створення груп
Динамічне оновлення форми
Робота з групою?
Створення свого валідатора
Асинхронні валідатори
Очищення форми
Створення своєї ngModel
Робота із сервером (HttpClient)
Вступні?
Отримання даних і виведення в шаблон
Створення об'єктів з POST
RxJS оператори та індикатор завантаження
Видалення елементів
Перенесення логіки в сервіс
Модифікація елементів з PUT
Обробка помилок
Додавання headers
Робота з параметрами
Параметр observe
Перехоплення запитів з інтерсептором
Модифікація запитів і оброблення відповідей
Мультисторінковість із роутингом
Що таке роутинг
Реєстрація роутів
Динамічна зміна сторінок
Активне посилання
Програмна навігація
Динамічні роути
Обробка параметрів
Робота з параметрами
Вкладені сторінки
Редирект і обробка помилок
Захист сторінок
Захист дочірніх роутів
Як працюють Resolvers
Як працюють модулі
Вступ
Що є в модулях
Створення окремого модуля
Ліниве завантаження модулів?
Новий синтаксис імпорту
Зміна стратегії завантаження
Додаткові можливості
Динамічні компоненти. Частина
Динамічні компоненти. Частина
SEO. Робота з тегами
PWA модуль
Unit тестування
Введення в Unit тести
Тестування рядків і масивів
Тестування Angular компонента
Тестування EventEmitter
Тестування форми
Тестування сервісу
Додавання елементів
Тестування confirm методу
Статистика покриття тестів
Інтеграційне тестування
Налаштування?
Тестування шаблону та своїх властивостей
Події та класи
Додавання Dependency Injection
Генерування тестів
Тестування роутера
Тестування параметрів url
Пошук динамічних директив
Тестування посилання в шаблоні
Асинхронність
Тестування директив
Анімації
Налаштування анімації?
Визначення стану?
Додавання переходу
Складні переходи
Поява та зникнення
Групування анімації?
Доступ до дочірніх елементів
Кроки анімації
Події анімації
Бібліотека ng-animate
Практика. Створення блогу
Створення програми
Створення головного layout
Модуль панелі адміністратора
Оформлення головної сторінки
Сторінка поста
Структура admin layout
Сторінка входу. Урок
Сторінка входу. Урок
Сервіс для авторизації
Налаштування firebase
Зберігання токена
Обробка помилок
Захист роутів
Форма створення поста
Підключення плагіна редактора
Створення поста
Створення інтерсептора
Виведення списку постів
Папір для фільтрації списку
Видалення поста
Сторінка редагування поста
Редагування поста
Створення плагіна у повідомленні?
Реєстрація локалізації
Виведення постів
Відображення поста
Додавання PWA
Деплої? додатки
Бонус. Typescript для Angular
Базові типи
Робота з функціями
Робота з класами
Інтерфейси та об'єкти
Інтерфейси та класи
Генерик типи
Бонус. Основи RxJS
Як працює RxJS
Оптимізація стрімів
Як використовувати оператори
Створення свого стріму
Як працює Subject
Усього 17 годин відеолекцій
Відгуки
Відгуків немає, поки що.