Создание авторизации и регистрации Создание модуля авторизации и регистрации
Из архитектуры приложения следует, что оно имеет два layout, первый - страница регистрации и авторизации, и второй – страницы основной стистемы.
Создаём следующие папки:
auth и в ней файл auth.module.ts – для авторизации и регистрации
system и в ней файл system.module.ts – для файлов основной системы
shared и в ней файл index.ts – в ней будем хранить все внешние сущности для работы приложения
Далее заполняем файл модуля auth.module.ts (Рисунок 7)
Создаеём в декораторе массив «declarations», который отвечает за регистрацию компонентов внутри модуля.
Далее генерируем компоненты авторизации и регистрации с помощью Angular CLI. Открываем консоль и прописываем команду cd app нажимаем ENTER, это действие означает переход в папку app. Далее переходим в папку auth (прописываем cd auth). Теперь генерируем два компонента. Один из компонентов будет отвечать за оболочку страницы, другой за страницу авторизации, будет ещё третий, описывающий страницу регистрации.
Для генерации пишем команду ng g c login –spec false, затем ng g c registrations –spec false
Мы получаем два созданных компонента, т.е. две папки с файлами, так же Angular CLI подключил эти компоненты в модуле auth.module.ts (в массиве declarations)
Третий компонент создадим вручную, для этого щелкаем правой кнопкой мыши по папке auth далее переходим NEW>FILE, прописываем название auth.component.ts, в нем прописываем код компонента (Рисунок 8)
В поле selector необходимо прописать собственный селектор компонента (например prepod-auth)
Теперь создаём шаблон для компонента в папке auth с названием auth.component.html, оставляем его пустым.
Заполняем в файле компонента поле selector. В нем пишем prepod-auth (где prepod – это наш префикс, который мы создавали при установке).
Далее импортируем компонент в модуль и добавляем его в массив declarations. И импортируем специальный модуль CommonModule, который несет в себе функционал базового фреймворка Angular. (Рисунок 9)
Последним шагом импортируем созданный модуль в корневой модуль app.module.ts , т.е. прописываем его название в массиве imports (Рисунок 10)
Роутинг, подключение шаблонов.
Задача – подключить auth модуль ко всей системе.
Создадим в папке app модуль app-routing.module.ts. Он будет отвечать за корневые роуты нашего приложения.
Создаём массив роутов, которые являются корневыми для всего приложения. Создаём переменную routes, которая будет являться типом Routes. Массив состоит из объектов, где каждый объект должен соответствовать своему интерфейсу.
Т.к. первое, что видит пользователь – это страницы регистрации, необходимо прописать редирект на компонент login (Рисунок 11)
Теперь регистрируем данный модуль в корневом модуле app.module.ts, как в предыдущем уроке.
Далее необходимо зарегистрировать роуты модуля auth. Создадим в папке auth модуль auth-routing.module.ts. Копируем туда код из файла app-routing.module.ts и изменяем название модуля на AuthRoutingModule и изменяем метод fotRoot на метод forChild.
Убираем редирект и прописываем наши компоненты LoginComponent и RegistrationsComponent. В итоге, в модуле auth-routing.module.ts должен получиться следующий код (Рисунок 12)
Теперь объявляем наши компоненты в корневом компоненте app.component.ts. Для этого используем директиву router-outlet. Прописываем <router-outlet></router-outlet>. Теперь в зависимости от адреса URL мы будем подгружать тот или иной модуль.
Далее регистрируем данный модуль в корневом модуле auth.module.ts, как в предыдущем уроке.
После регистрации модулей подключаем шаблоны. Для начала прописываем в файле index.html следующий код (Рисунок 13).
Это будет основа нашего шаблона.
Далее из файла дизайна login.html переносим общие классы в файл шаблона auth.component.html. Копируем блок с классом auth со всем содержимым блока. Далее вырезаем содержимое блока с классом auth-content, потому что внутри данного блока нужно будет грузить определённый компонент (либо Регистрации, либо Авторизации).
Внутри этого блока прописываем директиву <router-outlet></router-outlet>.
Вырезанный код из блока с классом auth-content вставляем в файл login.component.html в директории login.
Из файла signup.html так же вырезаем содержимое блока с классом auth-content и вставляем в файл registration.component.html
Так как в компоненте auth мы используем директиву router-outlet, то на него мы определяем массив children, который будет содержать созданные роуты.
Для этого мы создаём в файле auth-routing.module.ts еще один объект (Рисунок 14)
Остаётся сделать переход из auth компонента на страницу логина. В файле auth.component.ts прописываем код для перенаправления (Рисунок 15)
Теперь после сборки проекта мы открываем приложение по адресу localhost:4200 и попадаем сразу на страницу логина (Рисунок 16)
Задания
Создать необходимые модули и компоненты для работы системы.
Подключить шаблоны регистрации и авторизации, произвести настройку роутов.
Контрольные вопросы
Что такое шаблон компонента?
Какую архитектуру имеет ваше приложение?
Что отличает компонент от обычного класса?
Что такое роутинг, роут?
Что такое директивы?
Литература
Руководство по Angular. [Электронный ресурс]. https://metanit.com/web/angular2/
Документация Angular [Электронный ресурс]. https://angular.io/docs
Лабораторная работа №6_1
Цель работы:
Инициализация и валидация форм. Работа с сервером.
Пример выполнения лабораторной работы
Для валидирования форм на странице входа и регистрации будет использован реактивный подход, в самой системе будет использоваться шаблонный подход.
Шаблонный подход — подход, в котором ключевую роль играет шаблон компонента, и все описание производится в нем.
Реактивный подход — новый подход для работы с формами в реактивном стиле. Описание формы происходит в компоненте в виде дерева объектов, после чего это дерево связывается с шаблоном. Все манипуляции (проверка валидности, подписка на изменение значения и прочее) производятся в компоненте, что делает работу более гибкой, удобной и предсказуемой.
Инициализация и валидации формы авторизации
В папке shared создаём общий модуль: shared.module.ts, который будет подключать общие модули для всего приложения и в дальнейшем мы будем импортировать в другие модули данный, с уже прописанным функционалом.
Подключаем в нем ReactiveFormsModule и FormsModule. Не забываем их экспортировать, чтобы при объявлении данного модуля в других, другие модули могли пользоваться полным функционалом данного модуля. (Рисунок 17)
Далее из app модуля удаляем FormsModule из массива imports и саму строку импорта.
Далее подключаем SharedModule в AuthModule, который находится в папке auth.
Теперь создаем в компоненте login реактивную форму. Создаём поле form c типом FormGroup. Обращаемся к форме и говорим, что она будет являться наследником класса FormGroup. Далее в методе ngOnInit обращаемся к форме и делаем её наследником класса FormGroup. В конструкторе создаём два контрола: Email и Password. Далее передаём начальное значение null для полей FormControl и создаём массивы с полями валидаторов. (Рисунок 18).
Далее делаем связку с шаблоном. В шаблоне login к тегу форм указываем как binding свойство formGroup [formGroup] =“form”
(ngSubmit) =“onSubmit()”, т.е. когда мы будем отправлять форму будет вызываться метод onSubmit()
Реализовываем метод onSubmit() в компоненте login:
onSubmit(){
}
Далее привязываем конторолы к шаблону, точнее к каждому тегу <imput>. Прописываем formControlName=”имя контроля” (Рисунок 19)
Выводим в методе onSubmit() форму (Рисунок 20)
В шаблоне прописываем блок, отвечающий за валидацию поля Email, т.е. смотрим корректно ли заполнен input или нет (Рисунок 21)
Для того, чтобы в зависимости от ошибки выводилось разное сообщение необходимо к корневому тегу div добавить директиву (Рисунок 22)
Далее прописываем два вида ошибки, создаём два тега span, после уже созданного (Рисунок 23)
Тоже самое проделываем с блоком, отвечающим за пароль: (Рисунок 24)
Так же для пароля прописываем два вида ошибки. Во второй ошибке определяем минимальную длину и в строку сообщения подключаем минимальное значение пароля и введённое на данный момент. (Рисунок 25)
Последним шагом блокируем форму, если она не валидна (Рисунок 26)
