Основа ЛР5
.docxСодержание
Задания 2
Описание проделанной работы 3
Разбор структуры проекта 3
Настройка и установка необходимых компонентов 4
5
Вывод 6
Задания
Установить Angular 8 и необходимые компоненты для его работы, произвести их настройку.
Разработать архитектуру web-приложения и HTML шаблоны страниц в соответствии с теребованиями.
Создать проект в Angular. Произвести настройку и установку json-сервера.
Цель работы: Разработка архитектуры и шаблонов SPA.
Описание проделанной работы
Разбор структуры проекта
Проект включает в себя файлы в корне, директории, папки, в них еще файлы и т.д.
Файлы в корне проекта:
.angular-cli.json – этот файл отвечает непосредственно за настройку Angular CLI
.editorconfig - необходим для однозначности кода. Устанавливает определённые параметры для элементов. Например общая кодировка, размер и тип таба и т.д.
.gitignore – нужен для игнорирования определенных директорий в GIT.
karma.conf.js – файл для настройки karma. Karma – инструмент для тестирования приложения
package.json – записывает необходимые пакеты для запуска проекта,
protractor.conf.js - файл для настройки protractor. Protractor - – инструмент для тестирования приложения
tsconfig.json – служит для компиляции Typescript т.к сами браузеры его не компилируют
файл конфигурации для Typescript. Содержит правила форматирования, которые будут использоваться для проекта
Директории:
е2е – в ней находятся определённые файлы, отвечающие за тестирование
node_modules – содержит все пакеты, необходимые для работы приложения
src – содержит весь исходный код приложения
Директория проекта (src):
index.html – через данную страницу будет выводится все приложение
main.ts – запускает все приложение и устанавливает режим (режим разработки или работы)
polyfilles.ts – подключение библиотек
папка assets – необходима для хранения статических файлов
app – хранится весь исходный код приложения
Папка app:
app.component.css – файл стилей приложения
app.component.html - шаблон приложения
app.component.spec.ts – тесты для компонента
app.component.ts – файл компонента
app.module.ts – файл модуля
Настройка и установка необходимых компонентов
После установка Angular прописала в командной строке ng new имя приложения –skip-install –«имя префикса» –style scss
Далее установила глобально json server. Ввела команду npm i json-server –g – это бэкэнд сервер, который будет использоваться для нашего приложения.
Далее подгрузила папку с файлами шаблона и базой данный. Перетащила папку c шаблонами страниц в папку с проектом.
Переместила в корень файл db.json (через webpack).
Зашла в папку package.json и создала новый скрип под названием server и еще один dev. Так же прописала порт для базы данных 3000 (см. Рисунок 5)
Теперь приложение будет запускаться вместе с сервером по команде npm run dev
Вывод
В процессе выполнения данной лабораторной работы были изучена разработка архитектуры и шаблонов SPA. Задания выполнены.