Создание компонента меню и шапки
В папке system создаём папку shared и в ней папку component. Создаём в этой папке компонент sidebar с помощью Angular CLI. Из шаблона system компонента удаляем блок с классом sidebar (переносим его в шаблон sidebar компонента), а на его месте подключаем шаблон sidebar компонента <vkr-sidebar></vkr-sidebar>
Далее прописываем адреса ссылок и указываем активную ссылку. И автоматизируем свойство active, благодаря routerLinkActive=”active” (прописываем для тегов li) (Рисунок 69)
Навигация меню готова.
В логин компоненте прописываем редирект на главную страницу при успешной авторизации(Рисунок 70)
Создаём header компонент.
Из шаблона system компонента удаляем тег header с содержимым (переносим его в шаблон header компонента), а на его месте подключаем шаблон header компонента <vkr- header ></vkr- header>
Создаём дату с помощью пайпов. Для этого в header компоненте создаём переменную date и передаём в нее текущую дату.(Рисунок 71)
Передаём переменную в шаблон (Рисунок 72)
Создаём выпадающее меню с помощью директив. Создаём папку directives в папке shared, и в ней создаём файл dropdown.directive.ts. В нем создаём декоратор @Directive и в нем селектор selector: ”[vkrDropdown]”. Директива должна при клике открывать класс open и при повторном клике его закрывать. Создаём переменную isOpen и с помощью декоратора HostBinding будем связывать класс open с переменной, т.е. по умолчанию этого класса не будет. (Рисунок 73)
Ставим обработчик события клика (Рисунок 74)
Регистрируем директиву в system модуле в массиве declarations.
Далее в шаблоне header компонента прописываем к тегу li данную директиву:
<li class=”profile dropdown” vkrDropdown>
Далее обрабатываем ссылки. (Рисунок 75)
Для последней ссылки создаём метод onLogout, который реализуем в headrer компоненте.
Теперь выпадающий блок работает. Следующим шагом необходимо выводить имя авторизованного пользователя и реализовать кнопку выхода.
Получаем имя пользователя. В header компоненте создаём переменную user, её будем получать из localStorage. Для преобразования данных пользователя из строки в объект, используем JSON.parse (Рисунок 76)
Теперь выводим user в шаблоне (Рисунок 77)
Остаётся реализовать метод onLogout. Подключаем authServise в header компоненте, используем метод logout и router для редиректа (Рисунок 78)
Далее вызываем authServise в самом методе и прописываем редирект (Рисунок 79)
Header готов.
Задание
Создание компонентов и модулей основной системы, подключение шаблонов.
Контрольные вопросы
Что такое модуль в Angular?
Что такое пайпы, для чего они служат?
По какому критерию мы разделяем шаблон страницы?
Какие бывают запросы к серверу?
Литература
Руководство по Angular. [Электронный ресурс]. https://metanit.com/web/angular2/
Документация Angular [Электронный ресурс]. https://angular.io/docs
Лабораторная работа №6_3
Цель работы:
Работа с сервером. Создание запросов основной системы.
Задание
Разработка основной системы. Распределение данных по страницам, осуществление запросов к серверу.
Описание работы
В предыдущих лабораторных работах были созданы основные страницы и разделы spa. Страницы основной системы (в папке system) необходимо также наполнить соответствующим функционалом.
Требования к функциональным элементам на страницах системы:
Реализовать GET, POST, PUT, DELETE запросы к серверу
Реализовать появление ошибки для пользователя, при неверной работе с сервером (например, сервер недоступен и пользователь получает ошибку.)
Произвести валидацию форм шаблонным подходом
Например:
Ваше приложение – Календарь заметок. В данном приложении пользователь через html форму имеет возможность сделать запись, которая отобразиться на отдельной странице в календаре.
Допустим, имеем две страницы:
Сделать заметку
Календарь
На странице «Сделать заметку» находится форма с полями:
Дата
Заголовок
Описание
Время напоминания (необязательное поле)
Также на странице содержится кнопка создать заметку.
При нажатии на кнопку данные уходят в БД (в нашем случае в json файл) и выводится сообщение об успешной отправке данных.
Далее, на странице «Календарь» получаем эти данные и заносим в соответствующие поля (для простоты можно представить не календарь, а просто список заметок, отсортированных по дате). У каждой записи есть кнопки «Удалить» и «Изменить», при нажатии на которые происходят соответствующие действия.