Програмування LUMIFY WORK Angular 12

ЧОМУ ВИВЧАТИ ЦЕЙ КУРС

Цей комплексний курс програмування Angular 12 — це поєднання теоретичного навчання та практичних лабораторних робіт, що включає введення в Angular, а потім TypeScript, компоненти, директиви, служби, HTTP-клієнт, тестування та налагодження.
Курс наповнений корисною та дієвою інформацією, яку ви можете негайно застосувати у своїй роботі. Вивчіть основи базової розробки Angular 12, такі як односторінкові браузерні програми, адаптивні webсайти та гібридні мобільні додатки.
Примітка: Ми також можемо провести навчання з інших версій Angular. Будь ласка, зв'яжіться з нами, щоб зробити запит або зареєструвати свій інтерес.

ЩО ВИ ДІЗНАЄТЕСЯ
Після успішного завершення цього курсу ви зможете:

• Розробляйте односторінкові програми Angular за допомогою Typescript
• Налаштуйте повне середовище розробки Angular
• Створюйте компоненти, директиви, служби, канали, форми та спеціальні засоби перевірки
• Виконуйте розширені завдання пошуку мережевих даних за допомогою Observables Споживайте дані з REST web служби за допомогою клієнта Angular HT TP Обробляти з’єднання push-data за допомогою WebПротокол сокетів
• Працюйте з Angular Pipes для форматування даних
• Використовуйте розширені функції Angular Component Router
• Тестуйте та налагоджуйте програми Angular за допомогою вбудованих інструментів.

ПРЕДМЕТИ КУРСУ

Розділ 1. Знайомство з Angular

• Що таке Angular?
• Основні особливості відповідних випадків використання Angular Framework
• Будівельні блоки програми Angular Базова архітектура програми Angular Встановлення та використання Angular
• Анатомія програми Angular, що запускає програму
• Створення та розгортання Application Angular для нативних мобільних програм
• Резюме

Розділ 2. Введення в TypeScript

• Мови програмування для використання з синтаксисом Angular TypeScript
• Редактори програмування
• Система типів – визначення змінних
• Система типів – визначення масивів
• Основні примітивні типи
• Введіть функції
• Типовий висновок
• Визначення класів
• Методи класу
• Контроль видимості
• Конструктори класів
• Конструктори класів – альтернативні неініціалізовані поля форми
• Інтерфейси
• Робота з модулями ES6
• var проти let
• Функції стрілок
• Стрілка. Рядки шаблону компактного синтаксису
• Дженерики в класі
• Дженерики у функції
• Резюме

Розділ 3. Компоненти

• Що таке компонент?
• Ексample Component
• Створення компонента за допомогою Angular CLI
• Клас компонентів
• Декоратор @Component
• Реєстрація компонента в його шаблоні компонента модуля
• Example: Шаблон HelloComponent
• Example: Клас HelloComponent з використанням компонента
• Запустіть програму
• Ієрархія компонентів
• Кореневий компонент програми
• Bootstrap File
• Хуки життєвого циклу компонентівample Хуки життєвого циклу
• Стилі CSS
• Резюме

Розділ 4. Шаблони компонентів

• Шаблони
• Розташування шаблону
• Синтаксис Moustache {{ }}
• Налаштування властивостей елемента DOM
• Налаштування основного тексту елемента
• Прив'язка подій
• Обробник подій виразу
• Запобігання обробці за замовчуванням
• Директиви щодо атрибутів
• Застосовуйте стилі, змінюючи класи CSS
• Exampфайл: ngClass
• Безпосереднє застосування стилів
• Структурні директиви
• Шаблон умовного виконання
• Example: ngIf
• Цикл за допомогою ngFor
• ngДля локальних змінних
• Маніпулювання колекцією Прample – Видалення елемента
• Відстеження елементів за допомогою ng Для заміни елементів за допомогою елементів групування ngSwitch
• Резюме змінної посилання на шаблон

Розділ 5. Міжкомпонентний зв'язок

• Основи спілкування
• Архітектура потоку даних
• Підготовка дитини до отримання даних
• Надіслати дані від батьків
• Докладніше про налаштування властивостей
• Запуск події з компонента
• @Output() Напрample – дочірній компонент @Output() Наприкладample – батьківський компонент
• Повне двостороннє прив'язування
• Налаштування двостороннього зв’язування даних у батьківському
• Резюме

Розділ 6. Форми, керовані шаблонами

• Форми на основі шаблонів
• Модуль імпорту форм
• Базовий підхід
• Налаштування форми
• Отримання даних користувача
• Опущено атрибут ngForm
• Ініціалізація форми
• Двостороннє прив'язування даних
• Перевірка форми
• Кутові валідатори
• Відображення стану перевірки за допомогою класів Додаткові типи введення
• Прапорці
• Виберіть (розкривний список) поля
• Параметри візуалізації для вибору (розкривного списку) полів дати
• Радіо кнопки
• Резюме

Розділ 7. Реактивні форми

• Реактивні форми закінченіview
• Будівельні блоки
• Імпорт ReactiveFormsModule
• Побудуйте форму
• Створіть шаблон
• Отримання вхідних значень
• Ініціалізація полів введення
• Налаштування значень форми
• Підписка на введення змін
• Перевірка
• Вбудовані валідатори
• Відображення помилки підтвердження
• Спеціальний засіб перевірки
• Використання спеціального засобу перевірки
• Надання конфігурації для користувацького валідатора
• FormArray – динамічне додавання входів
• FormArray – клас компонентів
• FormArray – шаблон
• FormArray – Значення
• Sub FormGroups – клас компонентів
• Sub FormGroups – шаблон HTML
• Навіщо використовувати Sub FormGroups
• Резюме

Розділ 8. Сервіси та впровадження залежностей

• Що таке служба?
• Створення базової послуги
• Клас обслуговування
• Що таке ін’єкція залежності?
• Введення екземпляра служби
• Інжектори
• Ієрархія інжектора
• Реєстрація служби за допомогою Root Injector
• Реєстрація служби за допомогою інжектора компонентів
• Зареєструйте послугу за допомогою інжектора функційного модуля
• Де зареєструвати послугу?
• Ін’єкція залежностей в інші артефакти, що забезпечують альтернативну реалізацію Ін’єкція залежностей і @Host
• Ін’єкція залежностей і @Optional
• Резюме

Розділ 9. HTTP-клієнт

• Клієнт Angular HT TP
• Використання клієнта HT TP – завершеноview
• Імпорт HttpClientModule
• Служба за допомогою HttpClient
• Створення GET запиту
• Що робить спостережуваний об’єкт?
• Використання служби в компоненті
• Обробка помилок клієнтського компонента PeopleService
• Налаштування об’єкта Error
• Створення POST-запиту
• Створення запиту PUT
• Створення запиту на видалення

Розділ 10. Форматування каналів і даних

• Що таке труби?
• Вбудовані труби
• Використання каналів у ланцюжку каналів шаблону HTML
• Інтернаціоналізовані канали (i18n) Завантаження даних про мову
• Фінікова труба
• Число Труба
• Валютна труба
• Створіть спеціальну трубу
• Спеціальна труба Example
• Використання спеціальних каналів
• Використання каналу з ngFor
• Фільтруюча труба
• Категорія сопілки: чиста та нечиста
• Резюме
• Pure Pipe Example
• Нечиста труба Прample
• Резюме

Розділ 11. Вступ до односторінкових програм

• Що таке односторінкова програма (SPA) Traditional Web застосування
• СПА робочий процес
• Односторінкова програма Advantages HTML5 History API
• СПА виклики
• Реалізація SPA за допомогою Angular Summary

Розділ 12. Кутовий маршрутизатор компонентів

• Компонентний маршрутизатор
• View Навігація
• API Angular Router
• Створення програми з підтримкою маршрутизатора
• Розміщення маршрутизованих компонентів
• Навігація за допомогою посилань і кнопок
• Програмна навігація
• Передача параметрів маршруту
• Навігація з параметрами маршруту
• Отримання значень параметрів маршруту
• Синхронне отримання параметра маршруту
• Асинхронне отримання параметра маршруту
• Параметри запиту
• Надання параметрів запиту
• Асинхронне отримання параметрів запиту
• Проблеми з посібником URL запис і створення закладок
• Резюме

Розділ 13. Розширений HTTP-клієнт

• Параметри запиту
• Повернення об’єкта HttpResponse
• Налаштування заголовків запитів
• Створення нових спостережуваних
• Створення простої спостережуваної
• Метод спостережуваного конструктора Спостережувані оператори
• Карта і фільтр операторів
• Оператор flatMap().
• Оператор tap().
• Комбінатор zip().
• Кешування відповіді HT TP
• Здійснення послідовних викликів HT TP
• Здійснення паралельних дзвінків
• Налаштування об’єкта Error за допомогою catchError()
• Помилка в трубопроводі
• Відновлення помилок
• Резюме

Розділ 14. Кутові модулі

• Чому кутові модулі?
• Анатомія модульного класу
• Властивості @NgModule
• Функціональні модулі
• Example Модульна структура
• Створіть модуль домену
• Створіть пару маршрутизації/модуля маршрутизації
• Створіть сервісний модуль
• Створення загальних модулів

Розділ 15. Розширена маршрутизація

• Функціональний модуль із підтримкою маршрутизації
• Використання модуля функцій
• Ледаче завантаження модуля функцій
• Створення посилань для компонентів функціонального модуля
• Докладніше про відкладене завантаження
• Попереднє завантаження модулів
• Маршрут за замовчуванням
• Шлях маршруту підстановки
• перенаправити на
• Дитячі маршрути
• Визначення дочірніх маршрутів
• для дочірніх маршрутів
• Посилання для дочірніх маршрутів
• Навігаційна гвардія
• Створення реалізацій Guard
• Використання охоронців на маршруті
• Резюме

Розділ 16. Модульне тестування Angular додатків

• Модульне тестування кутових артефактів
• Тестування інструментів
• Типові етапи тестування
• Результати тестування
• Набори тестів Жасмін
• Характеристики Jasmine (модульні тести)
• Очікування (твердження)
• Збіжники
• Exampопис використання відповідників
• Використання властивості not
• Налаштування та демонтаж у пакетах модульного тестування
• ExampФайли функцій beforeEach і afterEach
• Модуль Angular Test
• ExampКутовий тестовий модуль
• Тестування служби
• Введення екземпляра служби
• Перевірте синхронний метод
• Перевірте асинхронний метод
• Використання Mock HT TP Client
• Надання шаблонної відповіді
• Тестування компонента
• Модуль тестування компонентів
• Створення екземпляра компонента
• Клас ComponentFixture
• Основні компонентні тести
• Клас DebugElement
• Імітація взаємодії користувача
• Резюме

Розділ 17. Налагодження

• закінченоview кутового налагодження
• Viewкод TypeScript у Debugger
• Використання відладчика Keyword
• Журнал налагодження
• Що таке Angular DevTools?
• Використання Angular DevTools
• Angular DevTools – структура компонентів
• Angular DevTools – Виконання виявлення змін
• Виявлення синтаксичних помилок
• Резюме

Лабораторні вправи

• Лабораторна робота 1. Введення в Angular
• Лабораторна робота 2. Вступ до TypeScript
• Лабораторна робота 3. Вступ до компонентів
• Лабораторна робота 4. Шаблон компонента
• Лабораторна робота 5. Створення компонента фотогалереї
• Лабораторна робота 6. Форма, керована шаблоном
• Лабораторна робота 7. Створення форми редагування
• Лабораторна робота 8. Реактивна форма
• Лабораторна робота 9. Розробка сервісу
• Лабораторна робота 10. Розробка клієнта HT TP
• Лабораторна робота 11. Використання каналів
• Лабораторна робота 12. Основна односторінкова програма з використанням маршрутизатора Лабораторна робота 13. Створення односторінкової програми (SPA)
• Лабораторна робота 14. Advanced HT TP Client
• Лабораторна робота 15. Використання Angular Bootstrap
• Лабораторна робота 16. Відкладене завантаження модуля
• Лабораторна робота 17. Розширена маршрутизація
• Лабораторна робота 18. Модульне тестування
• Лабораторна робота 19. Налагодження додатків Angular

ДЛЯ КОГО КУРС?
Цей курс призначений для всіх, кому потрібно вивчити основи розробки Angular 12 і застосувати їх для створення web програми відразу. Ми також можемо провести та налаштувати цей навчальний курс для великих груп, заощаджуючи час, гроші та ресурси вашої організації.

ПРЕДМЕТНІСТЬ
Web щоб отримати максимальну віддачу від цього курсу Angular, потрібен досвід розробки з використанням HTML, CSS і JavaScript. Також корисно знати DOM браузера. Попередній досвід Angular, з AngularJS або будь-якою версією Angular, не потрібен.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

Документи / Ресурси

Програмування LUMIFY WORK Angular 12 [pdfПосібник користувача Програмування Angular 12, Angular, Програмування 12, Програмування

Список літератури

• Посібник користувача