MEAN Stack: Главная страница на Bootstrap

Реализация главной страницы

Для реализации главной страницы откройте файл 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.

Дальнейшие шаги

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

Что будем искать? Например,программа