+7 (812) 703-02-02 info@hse.spbstu.ru
О переподготовке
Программы
Поступающим
Документы
Расписание
Личный кабинет

FRNT-ANG. Разработка интерфейсов с использованием фреймворка Angular 12

Длительность дисциплины: 32 ак.ч.

Аннотация

Курс является продолжением курса "FRNT-TS10. Работа со структурами данных на языке TypeScript". В рамках курса слушатели знакомятся с архитектурой фреймворка Angular и его возможностями по созданию пользовательских интерфейсов в клиентской части веб-приложений.

Знания и умения, полученные в результате изучения

В ходе обучения слушатели научатся:

  • создавать веб интерфейсы с использованием TypeScript и Angular 12;
  • осуществлять управление элементами пользовательского интерфейса и проверку вводимых данных;
  • подключать и использовать компоненты фреймворка Angular 12.

После обучения на курсе слушатели будут знать:

  • архитектуру фреймворка Angular 12;
  • принципы использования фреймворка Angular 12 для построения пользовательских интерфейсов.

Также слушатели курса получат практический опыт:

  • использования Angular 12 для формирования динамического пользовательского интерфейса;
  • создания визуальных эффектов, обработки событий, связанных с элементами документа, создания виджетов.

Содержание дисциплины

Тема 1. Введение в Angular

  • Введение в Angular.
  • Первый проект.
  • Структура проекта.

Практические занятия

  • Создание проекта Angular 12.
  • Запускаем “Hello world” на Angular.

Тема 2. Основы Angular

  • Компоненты.
  • Стили и шаблоны компонента.
  • Привязка данных.
  • Работа с компонентами.
  • Взаимодействие между компонентами.
  • Привязка к событиям дочернего компонента.
  • Жизненный цикл компонента.
  • Загрузка приложения.
  • Шаблонные переменные, ViewChild, ContentChild.
  • Модули. Взаимодействие между модулями.

Практические занятия

  • Создание компонентов через cli.
  • Стилизация компонентов, инкапсуляция стилей.
  • Привязки данных: интерполяция, одностороннее и двойное связывание.
  • Взаимодействие между компонентами.
  • Локальные референции.
  • Работа с модулями.

Тема 3. Директивы Angular

  • Атрибутивные директивы ngClass и ngStyle.
  • Взаимодействие с пользователем, HostListener и HostBinding.
  • Параметры в директивах.
  • Структурные директивы ngIf, ngFor, ngSwitch.

Практические занятия

  • Передача и обработка параметров в директивах.

Тема 4. Сервисы и DI (dependency injection)

  • Сервисы.
  • Внедрение сервисов.

Практические занятия

  • Внедрение сервисов.

Тема 5. Работа с формами

  • Модуль FormsModule и директива NgModel.
  • Получение и изменение модели.
  • Состояние модели и валидация.
  • Директива NgForm.
  • Template driven формы.
  • Реактивные формы.

Практические занятия

  • Обработка форм в проекте на Angular.

Тема 6. HTTP и взаимодействие с сервером

  • HttpClient и отправка запросов.
  • Объект Observable и библиотека RxJS.
  • Обработка ошибок.
  • Реализация CRUD операций.

Практические занятия

  • Отправка запросов и получение ответов к HTTP-серверу.

Тема 7. Маршрутизация запросов

  • Определение маршрутов.
  • Создание ссылок.
  • Программная навигация.
  • Дочерние маршруты.
  • Guards.

Практические занятия

  • Описание маршрутизации запросов в проекте.

Тема 8. Каналы (pipes) Angular

  • Работа с каналами (pipes).

Практические занятия

  • Работа с каналами в Angular.

Тема 9. Кастомные директивы и каналы

  • Создание атрибутивных директив.
  • Создание структурных директив.
  • Создание своих pipes.
  • Pure и Impure Pipes.

Практические занятия

  • Создание своих каналов.