Содержание

Задания 2

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

Создание авторизации и регистрации 3

Создание модуля авторизации и регистрации 3

Роутинг, подключение шаблонов. 4

Вывод 8

Задания

1. Создать необходимые модули и компоненты для работы системы.

2. Подключить шаблоны регистрации и авторизации, произвести настройку роутов.

Цель работы: Создание архитектуры Angular приложения. Роутинг и подключение шаблонов.

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

Создание авторизации и регистрации

Создание модуля авторизации и регистрации

Создала следующие папки:

• auth и в ней файл auth.module.ts – для авторизации и регистрации

• system и в ней файл system.module.ts – для файлов основной системы

• shared и в ней файл index.ts – в ней будем хранить все внешние сущности для работы приложения

После заполнила файл модуля auth.module.ts (Рисунок 7)

Создала в декораторе массив «declarations», который отвечает за регистрацию компонентов внутри модуля.

После сгенерировала компоненты авторизации и регистрации с помощью Angular CLI. Открыла консоль и прописала команду cd app. Далее перешла в папку auth (прописываем cd auth). Теперь сгенерировала два компонента. Один из компонентов будет отвечать за оболочку страницы, другой за страницу авторизации, будет ещё третий, описывающий страницу регистрации.

Для генерации прописала команду ng g c login, затем ng g c registrations

Третий компонент создала вручную.

После создала шаблон для компонента в папке auth с названием auth.component.html.

Заполнила в файле компонента поле selector.

Далее импортировала компонент в модуль и добавила его в массив declarations. Последним шагом импортировала созданный модуль в корневой модуль app.module.ts , т.е. прописала его название в массиве imports

Роутинг, подключение шаблонов.

Создала в папке app модуль app-routing.module.ts. Он будет отвечать за корневые роуты моего приложения.

Создала массив роутов, которые являются корневыми для всего приложения. Создала переменную routes, которая будет являться типом Routes. Массив состоит из объектов, где каждый объект должен соответствовать своему интерфейсу.

Т.к. первое, что видит пользователь – это страницы регистрации, прописала редирект на компонент login.

Далее зарегистрировала роуты модуля auth. Создала в папке auth модуль auth-routing.module.ts. Скопировала туда код из файла app-routing.module.ts и изменила название модуля на AuthRoutingModule и метод fotRoot на метод forChild.

После объявила мои компоненты в корневом компоненте app.component.ts. Для этого использовала директиву router-outlet. Далее регистрировала данный модуль в корневом модуле auth.module.ts.

Рис. 1 рис. 2 App.moduls.ts

рис. 3 Auth.moduls.ts

Рис. 4

Рис 5.

Вывод

В процессе выполнения данной лабораторной работы было изучено создание архитектуры Angular приложения, роутинг и подключение шаблонов. Задания выполнены.