Содержание

Задания 2

Описание проделанной работы 3

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

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

5

Вывод 6

Задания

1. Установить Angular 8 и необходимые компоненты для его работы, произвести их настройку.

2. Разработать архитектуру web-приложения и HTML шаблоны страниц в соответствии с теребованиями.

3. Создать проект в 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. Задания выполнены.