LUMIFY WORK Программирование на Angular 12

ЗАЧЕМ ИЗУЧАТЬ ЭТОТ КУРС

Этот комплексный курс программирования Angular 12 представляет собой сочетание теоретического обучения и практических занятий, которое включает в себя введение в Angular, за которым следуют TypeScript, компоненты, директивы, службы, HTTP-клиент, тестирование и отладка.
Курс наполнен полезной и действенной информацией, которую вы можете сразу же применить в своей работе. Изучите основы базовой разработки Angular 12, такие как одностраничные браузерные приложения, адаптивные webсайты и гибридные мобильные приложения.
Примечание: Мы также можем провести обучение по другим версиям Angular. Пожалуйста, свяжитесь с нами, чтобы сделать запрос или зарегистрировать свой интерес.

Чему ты научишься
После успешного завершения этого курса вы сможете:

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

ПРЕДМЕТЫ КУРСА

Глава 1. Знакомство с Angular

• Что такое Angular?
• Основные особенности Angular Framework. Подходящие варианты использования.
• Строительные блоки приложения Angular Базовая архитектура приложения Angular Установка и использование Angular
• Анатомия Angular-приложения. Запуск приложения.
• Создание и развертывание приложения Angular для собственных мобильных приложений
• Краткое содержание

Глава 2. Введение в TypeScript

• Языки программирования для использования с синтаксисом Angular TypeScript
• Программные редакторы
• Система типов – определение переменных
• Система типов – определение массивов
• Основные примитивные типы
• Введите функции
• Вывод типа
• Определение классов
• Методы класса
• Контроль видимости
• Конструкторы классов
• Конструкторы классов – неинициализированные поля альтернативной формы
• Интерфейсы
• Работа с модулями ES6
• вар против пусть
• Стрелочные функции
• Стрелочная функция Компактный синтаксис Строки шаблона
• Обобщения в классе
• Дженерики в функции
• Краткое содержание

Глава 3. Компоненты

• Что такое Компонент?
• бывшийampле Компонент
• Создание компонента с помощью Angular CLI
• Класс компонента
• Декоратор @Component
• Регистрация компонента в его шаблоне компонента модуля
• Example: Шаблон HelloComponent
• ExampФайл: Класс HelloComponent, использующий компонент
• Запустите приложение
• Иерархия компонентов
• Корневой компонент приложения
• Бутстрап File
• Перехватчики жизненного цикла компонента ExampПерехватчики жизненного цикла
• CSS-стили
• Краткое содержание

Глава 4. Шаблоны компонентов

• Шаблоны
• Расположение шаблона
• Синтаксис усов {{ }}
• Настройка свойств элемента DOM
• Настройка основного текста элемента
• Привязка событий
• Обработчик событий выражения
• Запретить обработку по умолчанию
• Директивы атрибутов
• Применение стилей путем изменения классов CSS
• Exampле: ngClass
• Применение стилей напрямую
• Структурные директивы
• Условное выполнение шаблона
• Exampле: ngIf
• Цикл с использованием ngFor
• ngДля локальных переменных
• Манипулирование коллекцией Example – Удаление элемента
• Отслеживание элементов с помощью ngFor. Замена элементов с помощью элементов группировки ngSwitch.
• Сводка переменных ссылки на шаблон

Глава 5. Межкомпонентное взаимодействие

• Основы общения
• Архитектура потока данных
• Подготовка ребенка к получению данных
• Отправить данные от родителя
• Подробнее о настройке свойств
• Запуск события из компонента
• @Output() Примерample – Дочерний компонент @Output() Примерample — Родительский компонент
• Полная двусторонняя привязка
• Настройка двусторонней привязки данных в родительском элементе
• Краткое содержание

Глава 6. Формы, управляемые шаблонами

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

Глава 7. Реактивные формы

• Реактивные формы закончилисьview
• Строительные блоки
• Импортировать модуль ReactiveFormsModule.
• Создание формы
• Создайте шаблон
• Получение входных значений
• Инициализация полей ввода
• Установка значений формы
• Подписка на изменения ввода
• Проверка
• Встроенные валидаторы
• Отображение ошибки проверки
• Пользовательский валидатор
• Использование пользовательского валидатора
• Передача конфигурации пользовательскому валидатору
• FormArray – динамическое добавление входных данных
• FormArray — класс компонента
• FormArray — Шаблон
• FormArray — значения
• Подгруппы форм — класс компонента
• Подгруппы форм – HTML-шаблон
• Зачем использовать подгруппы форм
• Краткое содержание

Глава 8. Сервисы и внедрение зависимостей

• Что такое услуга?
• Создание базовой службы
• Класс обслуживания
• Что такое внедрение зависимостей?
• Внедрение экземпляра службы
• Форсунки
• Иерархия инжекторов
• Регистрация службы с помощью Root Injector
• Регистрация службы с помощью инжектора компонента
• Регистрация службы с помощью инжектора функционального модуля
• Где зарегистрировать услугу?
• Внедрение зависимостей в другие артефакты, обеспечивающие альтернативную реализацию Внедрение зависимостей и @Host
• Внедрение зависимостей и @Optional
• Краткое содержание

Глава 9. HTTP-клиент

• Клиент Angular HTTP TP
• Использование клиента HTTP TP – оконченоview
• Импорт HttpClientModule
• Сервис с использованием HttpClient
• Выполнение GET-запроса
• Что делает наблюдаемый объект?
• Использование службы в компоненте
• Обработка ошибок клиентского компонента PeopleService
• Настройка объекта ошибки
• Выполнение POST-запроса
• Выполнение PUT-запроса
• Выполнение запроса DELETE

Глава 10. Каналы и форматирование данных

• Что такое трубы?
• Встроенные трубы
• Использование каналов в шаблоне HTML
• Интернационализированные каналы (i18n) Загрузка данных локали
• Дата Труба
• Номер трубы
• Валютная трубка
• Создайте пользовательскую трубу
• Изготовленная на заказ труба Example
• Использование пользовательских труб
• Использование канала с ngFor
• Фильтрующая труба
• Категория трубки: Чистая и нечистая
• Краткое содержание
• Чистая труба Example
• Загрязненная труба Example
• Краткое содержание

Глава 11. Введение в одностраничные приложения

• Что такое традиционное одностраничное приложение (SPA) Web Приложение
• Рабочий процесс СПА
• Расширение одностраничного приложенияtages API истории HTML5
• СПА-задачи
• Реализация SPA с использованием Angular Summary

Глава 12. Маршрутизатор компонентов Angular

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

Глава 13. Расширенный HTTP-клиент

• Запросить варианты
• Возврат объекта HttpResponse
• Настройка заголовков запросов
• Создание новых наблюдаемых
• Создание простой наблюдаемой
• Метод наблюдаемого конструктора. Наблюдаемые операторы.
• Карта и фильтр Операторы
• Оператор FlatMap()
• Оператор Tap()
• Комбинатор zip()
• Кэширование ответа HT TP
• Выполнение последовательных вызовов HT TP
• Выполнение параллельных вызовов
• Настройка объекта ошибки с помощью catchError()
• Ошибка в конвейере
• Ошибка восстановления
• Краткое содержание

Глава 14. Angular Модули

• Почему угловые модули?
• Анатомия класса модуля
• Свойства @NgModule
• Функциональные модули
• ExampСтруктура модуля
• Создать модуль домена
• Создайте пару модулей маршрутизации/маршрутизации
• Создать сервисный модуль
• Создание общих модулей

Глава 15. Расширенная маршрутизация

• Функциональный модуль с поддержкой маршрутизации
• Использование функционального модуля
• Ленивая загрузка функционального модуля
• Создание ссылок для компонентов функционального модуля
• Подробнее об отложенной загрузке
• Предварительная загрузка модулей
• Маршрут по умолчанию
• Путь маршрута с подстановочными знаками
• перенаправить на
• Дочерние маршруты
• Определение дочерних маршрутов
• для дочерних маршрутов
• Ссылки для дочерних маршрутов
• Навигационная стража
• Создание реализаций защиты
• Использование охранников в маршруте
• Краткое содержание

Глава 16. Модульное тестирование Angular-приложений

• Модульное тестирование угловых артефактов
• Средства тестирования
• Типичные этапы тестирования
• Результаты теста
• Тестовые наборы Жасмин
• Спецификации Jasmine (юнит-тесты)
• Ожидания (утверждения)
• Матчеры
• Exampуроки использования сопоставителей
• Использование свойства not
• Настройка и демонтаж в комплектах модульных тестов
• ExampФайл функций beforeEach и afterEach
• Угловой тестовый модуль
• ExampМодуль углового тестирования
• Тестирование сервиса
• Внедрение экземпляра службы
• Тестирование синхронного метода
• Тестирование асинхронного метода
• Использование Mock HT TP-клиента
• Предоставление готового ответа
• Тестирование компонента
• Модуль тестирования компонентов
• Создание экземпляра компонента
• Класс ComponentFixture
• Тесты основных компонентов
• Класс DebugElement
• Моделирование взаимодействия с пользователем
• Краткое содержание

Глава 17. Отладка

• Надview угловой отладки
• ViewИспользование кода TypeScript в отладчике
• Использование ключевого слова отладчика
• Журнала отладки
• Что такое 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. Расширенный клиент HTTP TP.
• Лабораторная работа 15. Использование Angular Bootstrap
• Лабораторная работа 16. Отложенная загрузка модулей
• Лабораторная работа 17. Расширенная маршрутизация
• Лабораторная работа 18. Модульное тестирование.
• Лабораторная работа 19. Отладка Angular-приложений

ДЛЯ КОГО ПРЕДНАЗНАЧЕН КУРС?
Этот курс предназначен для всех, кому необходимо изучить основы разработки Angular 12 и применять их для создания web заявки сразу. Мы также можем провести и адаптировать этот учебный курс для больших групп, что сэкономит время, деньги и ресурсы вашей организации.

ПРЕДПОСЫЛКИ
Web Для получения максимальной отдачи от этого курса Angular необходим опыт разработки с использованием HTML, CSS и JavaScript. Знание DOM браузера также полезно. Предварительный опыт работы с AngularJS или любой версией Angular не требуется.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

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

LUMIFY WORK Программирование на Angular 12 [pdf] Руководство пользователя Angular 12 Программирование, Angular, 12 Программирование, Программирование

Ссылки

• Руководство пользователя