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

ЗАЩО ДА ИЗУЧАВАТЕ ТОЗИ КУРС

Този изчерпателен курс по програмиране на Angular 12 е комбинация от теоретично обучение и практически лабораторни упражнения, което включва въведение в Angular, последвано от TypeScript, компоненти, директиви, услуги, HTTP клиент, тестване и отстраняване на грешки.
Курсът е пълен с полезна и практична информация, която можете да приложите веднага в работата си. Научете основите на основната разработка на Angular 12, като например едностранични браузърни приложения, отзивчиви webсайтове и хибридни мобилни приложения.
Забележка: Можем също така да предоставим обучение на други версии на Angular. Моля, свържете се с нас, за да направите запитване или да регистрирате своя интерес.

КАКВО ЩЕ НАУЧИТЕ
След успешно завършване на този курс ще можете да:

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

УЧЕБНИ ПРЕДМЕТИ

Глава 1. Представяне на Angular

• Какво е Angular?
• Централни характеристики на подходящи случаи на употреба на Angular Framework
• Градивни блокове на приложение Angular Основна архитектура на приложение Angular Инсталиране и използване на Angular
• Анатомия на ъглово приложение Изпълнение на приложението
• Изграждане и внедряване на приложението Angular за собствени мобилни приложения
• Резюме

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

• Езици за програмиране за използване със синтаксис Angular TypeScript
• Програмни редактори
• Типовата система – дефиниране на променливи
• Типовата система – Дефиниране на масиви
• Основни примитивни типове
• Въведете Функции
• Извод за тип
• Дефиниране на класове
• Методи на класа
• Контрол на видимостта
• Конструктори на класове
• Конструктори на класове – Неинициализирани полета на алтернативна форма
• Интерфейси
• Работа с ES6 модули
• var срещу let
• Функции на стрелките
• Стрелка Функция Компактен синтаксис Шаблонни низове
• Generics in Class
• Генериците във функция
• Резюме

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

• Какво е компонент?
• Ексample Компонент
• Създаване на компонент с помощта на Angular CLI
• Класът на компонента
• @Component Decorator
• Регистриране на компонент в неговия шаблон на модулен компонент
• Example: Шаблон HelloComponent
• Example: Класът HelloComponent, използващ компонент
• Стартирайте приложението
• Йерархия на компонентите
• Основният компонент на приложението
• The Bootstrap File
• Куки за жизнения цикъл на компонента Прample Кукички за жизнения цикъл
• CSS стилове
• Резюме

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

• Шаблони
• Местоположение на шаблона
• Синтаксисът на мустаците {{ }}
• Задаване на свойства на DOM елемент
• Задаване на основния текст на елемента
• Обвързване на събития
• Обработчик на събития на израз
• Предотвратяване на обработката по подразбиране
• Директиви за атрибути
• Прилагайте стилове чрез промяна на CSS класове
• Example: 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 клиент

• Ъгловият HT TP клиент
• Използване на HT TP клиент – крайview
• Импортиране на HttpClientModule
• Услуга, използваща HttpClient
• Правене на GET заявка
• Какво прави един наблюдаем обект?
• Използване на услугата в компонент
• Обработка на грешки в клиентския компонент на PeopleService
• Персонализиране на обекта за грешка
• Правене на POST заявка
• Изготвяне на PUT заявка
• Правене на заявка за ИЗТРИВАНЕ

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

• Какво представляват тръбите?
• Вградени тръби
• Използване на канали в HTML Template Chaining Pipes
• Интернационализирани канали (i18n) Зареждане на локални данни
• Лулата за дата
• Числото Pipe
• Валутен пайп
• Създайте персонализирана тръба
• Персонализирана тръба Example
• Използване на персонализирани тръби
• Използване на канал с ngFor
• Филтърна тръба
• Категория на лулата: чиста и нечиста
• Резюме
• Pure Pipe Example
• Нечиста тръба Example
• Резюме

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

• Какво е традиционно приложение за една страница (SPA). Web Приложение
• СПА работен процес
• Приложение за една страница Advantages HTML5 History API
• СПА предизвикателства
• Внедряване на SPA с помощта на Angular Summary

Глава 12. Ъгловият рутер за компоненти

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

Глава 13. Разширен HTTP клиент

• Опции за заявка
• Връщане на HttpResponse обект
• Задаване на заглавки на заявки
• Създаване на нови наблюдаеми
• Създаване на проста наблюдаема
• Методът на наблюдаемия конструктор Наблюдаеми оператори
• Операторите за карта и филтър
• Операторът flatMap().
• Операторът tap().
• Комбинаторът zip().
• Кеширане на HT TP отговор
• Осъществяване на последователни HT TP повиквания
• Осъществяване на паралелни разговори
• Персонализиране на обект за грешка с catchError()
• Грешка в тръбопровода
• Възстановяване на грешки
• Резюме

Глава 14. Ъглови модули

• Защо ъглови модули?
• Анатомия на модулен клас
• Свойства на @NgModule
• Функционални модули
• Example Модулна структура
• Създайте модул на домейн
• Създайте двойка маршрутизиран/маршрутизиращ модул
• Създайте сервизен модул
• Създаване на общи модули

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

• Модул с активирана функция за маршрутизиране
• Използване на модула за функции
• Мързеливо зареждане на функционалния модул
• Създаване на връзки за компонентите на функционалния модул
• Повече за мързеливото зареждане
• Предварително зареждане на модули
• Маршрут по подразбиране
• Път на маршрут със заместващи знаци
• пренасочи към
• Детски маршрути
• Определяне на дъщерни маршрути
• за Child Routes
• Връзки за дъщерни маршрути
• Навигационни гвардейци
• Създаване на реализации на Guard
• Използване на пазачи в маршрут
• Резюме

Глава 16. Единично тестване на ъглови приложения

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

Глава 17. Отстраняване на грешки

• крайview на ъглово отстраняване на грешки
• Viewing TypeScript код в Debugger
• Използване на дебъгера Ключова дума
• Регистриране на грешки
• Какво е 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. Разширен HT TP клиент
• Лабораторна работа 15. Използване на Angular Bootstrap
• Лабораторна работа 16. Мързеливо зареждане на модул
• Лабораторна работа 17. Разширено маршрутизиране
• Лаборатория 18. Единично тестване
• Лаборатория 19. Отстраняване на грешки в Angular приложения

ЗА КОГО Е КУРСЪТ?
Този курс е насочен към всеки, който трябва да научи основите на разработката на Angular 12 и да я приложи в създаването web приложения веднага. Можем също така да предоставим и персонализираме този курс за обучение за по-големи групи – спестявайки време, пари и ресурси на вашата организация.

ПРЕДПОСТАВКИ
Web опит в разработката с използване на HTML, CSS и JavaScript е необходим, за да извлечете максимума от този курс по Angular. Познаването на DOM на браузъра също е полезно. Не се изисква предишен опит с Angular, с AngularJS или която и да е версия на Angular.
https://www.lumifywork.com/en-au/courses/angular-12-programming/

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

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

Референции

• Ръководство за потребителя