Пример выполнения лабораторной работы
Для начала работы необходимо установить платформу Node.js (можно загрузить с официального сайта: https://nodejs.org/).
После установки Node.js переходим к установке самого Angular с помощью официального пакета, который сам установит Angular и развернёт проект на компьютере.
Данный пакет находится на сайте https://cli.angular.io/ .
Для его установки необходимо открыть командную строку и прописать команду
npm install –g @angular/cli
После установки прописываем команду ng help для проверки. Если отобразилось множество конфигураций, информирующих нас о работе компонента, то все установлено верно. (Рисунок 3)
Так как сборщиком Angular является Webpack то нам необходимо его глобально установить на компьютер. Открываем командную строку и прописываем команду npm install –g webpack
Далее устанавливаем TypeScript и JSON сервер:
npm i –g typescript
npm I –g json-server
Следующим шагом устанавливаем редактор для разработки приложения Webstorm.
Заходим на официальный сайт (https://jetbrains.ru/) в раздел «Студентам Аудиторные лекции» и переходим на страницу оформления бесплатной студенческой версии:
После этого, вводим необходимые данные для получения лицензии.
Страница заявки: https://www.jetbrains.com/shop/eform/students
После установки открываем webstorm и создаём новый проект «Angular CLI», выбираем папку проекта и нажимаем «Create»
После того, как проект открыт, настраиваем WebStorm. Нам необходимо открыть быстрый доступ к командам npm. Для этого переходим View>Tool Buttons. В левом нижнем углу нажимаем кнопку npm. (Рисунок 4)
Рисунок 4.
Запускаем приложение при помощи операции start. Нажимаем start в окне npm.
Появляется строка с записью ng serve, которая говорит о необходимости запустить приложение, далее появляется информация об адресе сервера и порте, на котором происходит запуск, по умолчанию это http://localhost:4200.
Далее происходит сборка проекта при помощи Webpack, и в итоге выводится сообщение об удачной компиляции.
Далее проверяем, всё ли корректно установилось. Для этого в строке браузера забиваем адрес, по которому открывается наше приложение: http://localhost:4200. Должна открыться страницы с надписью app works!
Задание
Установить и настроить необходимое ПО. Произвести первый запуск приложения на angular.
Лабораторная работа №2
Цель работы:
Введение в TypeScript. Основные типы, типы функций, массивы.
Сведения из теории
Создание проекта:
Создаём папку проекта. Открываем пустой проект в WebStorm (рис.1)
Рисунок 1 – Создание проекта
Открываем терминал и прописываем команду npm install –g typescript.
Для проверки правильности установки прописываем команду tsc –help.
Если после работы команды выводятся опции языка, значит установка прошла успешно.
Для создания конфигурационного файла прописываем команду tsc –init (рис. 2)
Рисунок 2. – Работа с терминалом, установка языка
Создаём файлы проекта (рис. 3):
Index.ts – файл с кодом приложения typescript
Index.html – файл приложения для его просмотра в браузере
Рисунок 3. – Создание файлов проекта
В файле index.html написать стандартный html код странички. Перед закрывающим тегом body загрузить файл со скриптом index.js:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Лабораторная работа 1</title> </head> <body> <script src="index.js"></script> </body> </html>