Настройка и установка необходимых компонентов
После установка Angular необходимо прописать в командной строке ng new имя приложения –skip-install –«имя префикса» –style scss
Данной строчкой мы создаём приложение, присваиваем ему префикс и выбираем препроцессор для таблиц стилей css.
Далее устанавливаем глобально json server. Вводим команду npm i json-server –g – это бэкэнд сервер, который будет использоваться для нашего приложения.
Далее подгружаем папку с файлами шаблона и базой данный. Перетаскиваем папку c шаблонами страниц в папку с проектом.
Перемещаем в корень файл db.json (через webpack).
Заходим в папку package.json и создаем новый скрип под названием server и еще один dev. Так же прописываем порт для базы данных 3000 (см. Рисунок 5)
Теперь приложение будет запускаться вместе с сервером по команде npm run dev
Подключение стилей
Для использования стилей нам нужно их подключить. Копируем файлы стилей и папки со шрифтами в папку в папку assets.
Далее подключаем стили в файле .angular-cli.json в массив style (21 строка). (Рисунок 6)
Задания
Установить Angular 8 и необходимые компоненты для его работы, произвести их настройку.
Разработать архитектуру web-приложения и HTML шаблоны страниц в соответствии с теребованиями.
Создать проект в Angular. Произвести настройку и установку json-сервера.
Контрольные вопросы
Какой файл отвечает за запуск приложения?
Что такое json?
Как происходит подключение стилей к проекту?
Литература
Руководство по Angular. [Электронный ресурс]. https://metanit.com/web/angular2/
Документация Angular [Электронный ресурс]. https://angular.io/docs
Лабораторная работа №6
Цель работы:
Создание архитектуры Angular приложения. Роутинг и подключение шаблонов.
Пример выполнения лабораторной работы
В качестве примера в этой и последующих лабораторных работ будет создаваться приложение «Домашняя бухгалтерия».
В системе «Домашняя бухгалтерия» будут реализованы следующие возможности:
Регистрация и авторизация в системе
Создание категорий расходов и доходов, установка лимита денежных средств по каждой категории
Изменение существующих категорий, их названия и лимита
Создание новых записей о пополнении и списании на счете с возможностью выбора категории, описанием и типом (пополнение, списание)
Отображение остатка по счету
Отображение потраченных средств, для каждой из категорий, лимитированный остаток
Отображение статистики расходов и доходов в виде диаграммы
Просмотр списка совершённых записей о списании и пополнении на счете
Просмотр конкретной транзакции в отдельном окне
Поиск по дате, сумме, категории, типу
Фильтрация транзакций за определённый период
Запись всех данных о категориях, пользователях, событиях в базу данных
Создаваемое реактивное приложение будет состоять из разделов:
Вход
Регистрация
Счет
История
Детальная страница записи
Планирование
Запись
Со страницы входа будет возможность перейти на страницу регистрации или, при успешной авторизации, на страницу счета. Со страницы регистрации можно перейти на страницу счета.
Внутри системы возможен переход между всеми страницами, с каждой страницы можно осуществить выход из приложения, при этом пользователь будет перенаправлен в окно авторизации.
На рисунке 10 представлена карта сайта с выстроенными связами между страницами:
