Реализация главной страницы
Для реализации главной страницы откройте файл frontend/src/app/components/home/home.component.html. Удалите существующий код и скопируйте готовый шаблон с сайта getbootstrap.com, например, любой из представленных макетов (исключая шапку и скрипты). Добавьте футер. Сохраните изменения. Запустите сервер командой cd frontend && ng serve. После компиляции главная страница будет готова. Дизайн оставим без изменений.
Вынесение футера в отдельный компонент
Футер используется на каждой странице, поэтому вынесем его в отдельный компонент. Остановите сервер (Ctrl+C), очистите терминал и создайте новый компонент командой ng generate component footer (возможно, sudo не потребуется).
В файле footer.component.html удалите ненужный код и вставьте скопированный футер из home.component.html. В home.component.html, после блока с классом container, добавьте тег <app-footer></app-footer>. Сохраните изменения. Запустите сервер. Теперь футер отображается на всех страницах.
Создание страницы регистрации
В файле register.component.html замените код на форму регистрации:
<form (ngSubmit)="userRegisterClick($event)">
<input type="text" placeholder="Введите имя" class="form-control" [(ngModel)]="user.name" name="name">
<input type="text" placeholder="Введите логин" class="form-control" [(ngModel)]="user.login" name="login">
<input type="email" placeholder="Введите email" class="form-control" [(ngModel)]="user.email" name="email">
<input type="password" placeholder="Введите пароль" class="form-control" [(ngModel)]="user.password" name="password">
<button type="submit" class="btn btn-success">Зарегистрироваться</button>
</form>
Добавьте обработчик события ngSubmit для вызова функции userRegisterClick. Создайте эту функцию в register.component.ts:
userRegisterClick(event: Event){
event.preventDefault();
console.log('test');
}
Теперь при нажатии на кнопку «Зарегистрироваться» вызывается функция и выводится «test» в консоли.
Обработка данных формы и валидация
Создайте переменные для хранения данных пользователя в register.component.ts:
user = {
name: '',
login: '',
email: '',
password: ''
};
В register.component.html используйте директиву ngModel: [(ngModel)]="user.name" и аналогично для других полей.
Создайте сервис check-form.service.ts командой ng generate service check-form. В нём создайте функции для проверки данных:
checkName(name: string): boolean {
return name !== '';
}
checkLogin(login: string): boolean {
return login !== '';
}
checkEmail(email: string): boolean {
return email !== '';
}
checkPassword(password: string): boolean {
return password !== '';
}
Импортируйте сервис в register.component.ts и добавьте проверку данных в userRegisterClick:
import { CheckFormService } from '../check-form.service';
constructor(private checkForm: CheckFormService) { }
userRegisterClick(event: Event){
event.preventDefault();
if (!this.checkForm.checkName(this.user.name)) { console.log('Имя пользователя не введено'); return false; }
// аналогичные проверки для login, email и password
}
В app.module.ts импортируйте и добавьте сервис в providers.
Отображение ошибок
Установите библиотеку angular2-flash-messages: npm install angular2-flash-messages —save
Импортируйте FlashMessagesModule в app.module.ts и добавьте его в imports. Добавьте в register.component.html тег <flash-messages></flash-messages>. Импортируйте FlashMessagesService в register.component.ts и используйте его для отображения всплывающих сообщений об ошибках вместо console.log.
Дальнейшие шаги
В следующих уроках будет реализована регистрация пользователей в базе данных, авторизация и выход из учетной записи.