Нижегородский государственный технический университет им. Р.Е. Алексеева

Кафедра «Графические информационные системы»

WEB технологии

Учебно-методическое пособие

к выполнению лабораторных работ для студентов направления

09.03.02 – Информационные системы и технологии

Нижний Новгород

2019

Оглавление

Лабораторная работа №1 5

Цель работы: 5

Установка и настройка программного окружения. 5

Сведения из теории 5

Пример выполнения лабораторной работы 6

Задание 10

Лабораторная работа №2 11

Цель работы: 11

Введение в TypeScript. Основные типы, типы функций, массивы. 11

Сведения из теории 11

Создание проекта: 11

Создание основных типов данных и работа с ними 13

Создание массивов. Задание типов данных массивам. 14

Создание функций. Типы функций. 15

Задания 17

Контрольные вопросы 17

Литература 17

Лабораторная работа №3 18

Цель работы: 18

Объекты. Специальные типы. Общий тип generic. 18

Сведения из теории 18

Создание собственного типа объекта 19

Специальные типы 21

Задания 24

Контрольные вопросы 24

Литература 24

Лабораторная работа №4 25

Цель работы: 25

Классы, интерфейсы. Декораторы. 25

Сведения из теории 25

Интерфейсы 28

Декораторы 29

Задания 29

Контрольные вопросы 30

Литература 30

Лабораторная работа №5 31

Цель работы: 31

Разработка архитектуры и шаблонов SPA. 31

Требования к выполнению 31

Пример выполнения лабораторной работы 31

Разбор структуры проекта 31

Настройка и установка необходимых компонентов 32

Подключение стилей 32

Задания 32

Контрольные вопросы 32

Литература 33

Лабораторная работа №6 34

Цель работы: 34

Создание архитектуры Angular приложения. Роутинг и подключение шаблонов. 34

Пример выполнения лабораторной работы 34

Создание авторизации и регистрации 35

Создание модуля авторизации и регистрации 35

Роутинг, подключение шаблонов. 37

Задания 39

Контрольные вопросы 39

Литература 40

Лабораторная работа №6_1 41

Цель работы: 41

Инициализация и валидация форм. Работа с сервером. 41

Пример выполнения лабораторной работы 41

Разработка сервиса 43

Инициализация и валидации формы регистрации 47

Создание асинхронного валидатора 50

Задания 51

Контрольные вопросы 51

Литература 51

Лабораторная работа №6_2 52

Цель работы: 52

Разработка основной системы. Роутинг, создание пайпов и директив. 52

Пример выполнения лабораторной работы 52

Создание компонента и модуля системы. Подключение шаблонов. 52

Создание компонента меню и шапки 53

Задание 56

Контрольные вопросы 56

Литература 56

Лабораторная работа №6_3 57

Цель работы: 57

Работа с сервером. Создание запросов основной системы. 57

Задание 57

Описание работы 57

Лабораторная работа №1

Цель работы:

Установка и настройка программного окружения.

Сведения из теории

В процессе выполнения лабораторных работ будут использовано следующее ПО:

• Node.js

• Webpack

• Angular и Angular CLI

• TypeScript

• WebStorm

• JSON сервер

Node.js — это кроссплатформенная среда с открытым исходным кодом для разработки серверных и сетевых приложений. Приложения Node.js написаны на JavaScript и могут выполняться в среде исполнения Node.js на ОС X, Microsoft Windows и Linux.

Node.js также предоставляет обширную библиотеку различных модулей JavaScript, что в значительной степени упрощает разработку веб-приложений. Node.js = Runtime Environment + JavaScript Library.

Webpack - это статический модульный сборщик для приложений на JavaScript.

Официальный сайт проекта: https://webpack.js.org/

Чем полезен Webpack

Приложения, написанные на JavaScript, постоянно усложняются, поэтому хорошим выходом является использование сборщика (или бандлера). Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. Можно использовать не только сторонние библиотеки, но и собственные файлы. Подобная модульная система позволяет добиться лучшей организации проекта, так как получается, что он разбит на небольшие модули.

Webpack на данный момент является одним из самых мощных подобных инструментов. Он имеет открытый исходный код и позволяет решать множество разных задач.

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

Angular предоставляет такую функциональность, как двустороннее связывание, позволяющее динамически изменять данные в одном месте интерфейса при изменении данных модели в другом, шаблоны, маршрутизация и так далее.

Одной из ключевых особенностей Angular является то, что он использует в качестве языка программирования TypeScript. Поэтому перед началом работы рекомендуется ознакомиться с основами данного языка, про которые можно прочитать здесь.

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

TypeScript — это расширенная версия JavaScript, главной целью которого является упрощение разработки крупных JS-приложений. Этот язык добавляет много новых принципов — классы, дженерики, интерфейсы, статические типы, что позволяет разработчикам использовать разные инструменты, такие как статический анализатор или рефакторинг кода.

Преимущества TypeScript

1. Статическая типизация. JavaScript — это язык с динамической типизацией, то есть компилятор не знает, что за тип переменной вы используете, пока эта переменная не будет инициализирована. Подобные вещи могут вызвать трудности и ошибки в ваших проектах. В TypeScript появляется поддержка статической типизации, что при грамотном использовании исключает ошибки, связанные с ошибочной типизацией переменной. При этом динамическая типизация вовсе не пропадает, и ей можно пользоваться.

2. Лучшая поддержка в IDE. Основным преимуществом языка TypeScript перед JavaScript является лучшая поддержка со стороны IDE, что включает Intellisense, информацию компилятора в реальном времени, отладку и многое другое. Также существуют различные расширения, которые помогают в процессе разработки.

3. Доступ к новым возможностям ECMAScript. В TypeScript есть поддержка новых возможностей ECMAScript, поэтому можно разрабатывать приложения с помощью новейших инструментов, не волнуясь о поддержке их браузером.

Когда используется TypeScript?

1. В случае крупного приложения. TypeScript отлично подойдёт, если ваше приложение имеет большую архитектуру и кучу кода, а особенно если над этим приложением работают несколько разработчиков.

2. В случае, когда команда разработчиков знакомы с языками программирования со статической типизацией. Команде стоит смотреть в сторону TypeScript, когда они хотят разрабатывать приложение на JavaScript и уже знакомы с Java или C#, ведь те являются языками со статической типизацией.

WebStorm — мощная IDE для веб-разработки на JavaScript. Отличается удобным и умным редактором JavaSсript, HTML и CSS и поддержкой новых технологий и языков, таких как TypeScript, CoffeeScript, Dart, Less, Sass и Stylus.