+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 для построения пользовательских интерфейсов.


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

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

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

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

  • Запускаем “Hello world” на Angular

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

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

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

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

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

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

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

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

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

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

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

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

Тема 7. Маршрутизация

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

Тема 8. Pipes

  • Работа с pipes

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

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

Тема 10. Практическая часть

  •  Разработка блога