От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». Angular — это универсальный фреймворк для создания мобильных и веб-приложений с использованием одного и того же многократно используемого кода. Используя Angular, вы можете разделить все приложение для блогов на компоненты многократного использования, что упрощает обслуживание и повторное использование кода.
В этой серии статей вы узнаете, как приступить к созданию веб-приложения с использованием Angular с MongoDB в качестве back-end. Для запуска сервера мы будем использовать Node.js.
Вся эта серия будет посвящена созданию приложения для блоггинга с использованием Angular, Node.js и MongoDB. В этой статье вы узнаете, как начать работу по настройке приложения и созданию компонента Login.
Приступим к работе
Давайте начнем с установки Angular CLI.
|
1 |
npm install -g @angular/cli |
После установки Angular CLI создайте папку проекта AngularBlogApp.
|
1 2 |
mkdir AngularBlogApp cd AngularBlogApp |
В папке проекта, используя следующую команду, создайте новое приложение Angular:
|
1 |
ng new client |
После создания клиентского приложения перейдите в папку проекта и установите необходимые зависимости с помощью Node Package Manager (npm).
|
1 2 |
cd client npm install |
Запустите клиентский сервер, используя npm.
|
1 |
npm start |
У вас должно запуститься приложение по адресу //localhost:4200/.
Настройка приложения
Ваше веб-приложение будет содержать корневой компонент. Создайте папку с именем root внутри папки src/app. Создайте в ней файл с именем root.component.html и добавьте в него следующий HTML-код:
|
1 2 3 |
<h3> Root Component </h3> |
Создайте еще один файл root.component.ts и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 |
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './root.component.html' }) export class RootComponent { } |
Удалите файлы app.component.html, app.component.ts, app.component.scss и app.component.spec.ts. У вас будет только один файл с именем app.module.ts внутри папки src/app. Импортируйте RootComponent в файле app.module.ts.
|
1 |
import { RootComponent } from './root/root.component'; |
Включите RootComponent в ngModules и загрузите его.
|
1 2 3 4 5 6 7 8 9 10 11 |
@NgModule({ declarations: [ RootComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [RootComponent] }) |
Сохраните изменения и перезапустите сервер. При загрузке приложения будет отображаться RootComponent. В нашем приложении для маршрутизации мы будем использовать Angular Router. Поэтому импортируйте связанные с маршрутизацией зависимости в новом файле с именем app.routing.ts внутри папки src / app.
|
1 2 3 4 5 6 |
import { RouterModule, Routes } from '@angular/router'; import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; Определите путь маршрута и компонентов следующим образом: export const AppRoutes: Routes = [ { path: '', component: LoginComponent } ]; |
Экспортируйте маршруты для создания модуля со всеми провайдерами маршрутов.
|
1 |
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes); |
Вот как должен выглядеть файл app.routing.ts:
|
1 2 3 4 5 6 7 8 9 10 |
import { RouterModule, Routes } from '@angular/router'; import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; import { LoginComponent } from './login/login.component'; export const AppRoutes: Routes = [ { path: '', component: LoginComponent } ]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes); |
Как видно из приведенного выше кода, мы еще не создали LoginComponent. Импортируйте класс ROUTING в файле app.module.ts.
|
1 |
import { ROUTING } from './app.routing'; |
Включите его в импорт NgModule.
|
1 2 3 4 5 |
imports: [ BrowserModule, ROUTING, FormsModule ] |
Поместите RouterOutlet на странице root.component.html. Здесь отображается компонент маршрута.
|
1 |
<router-outlet></router-outlet> |
Создайте папку с именем login в папке src/app. В папке login создайте файл login.component.ts и добавьте в него следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html' }) export class LoginComponent { constructor() { } } |
Создайте файл login.component.html и добавьте в него следующий код:
|
1 2 3 |
<h3> Login Component </h3> |
Сохраните все изменения и перезапустите сервер. Как вы видите на скриншоте, при загрузке приложения будет отображаться LoginComponent.
Создание компонента авторизации
При настройке приложения мы уже задали основу для LoginComponent. Давайте создадим представление для LoginComponent с помощью Bootstrap. Загрузите и включите стили CSS Bootstrap в папке assets и включите соответствующую ссылку на странице src/index.html.
|
1 |
<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css"> |
Оберните app-root на странице index.html следующим образом.
|
1 2 3 |
<div class="container"> <app-root></app-root> </div> |
Добавьте следующий HTML-код на страницу login.component.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" type="button">Sign in</button> </form> |
Создайте в папке login файл login.component.css и добавьте в него следующие стили CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
.form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } |
Измените декоратор @Component, чтобы включить стили CSS.
|
1 2 3 4 5 |
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) |
Сохраните приведенные выше изменения и попробуйте загрузить приложение. У вас будет отображаться элемент LoginComponent с представлением входа в систему.
Создание службы авторизации
LoginComponent необходимо взаимодействовать с базой данных, чтобы проверить, существует ли пользователь, пытающийся войти в систему. Таким образом, он должен будет выполнять вызовы API. Часть, относящуюся к взаимодействию с базой данных, мы сохраняем в отдельном файле login.service.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable() export class LoginService { constructor(private http: HttpClient){ } validateLogin(){ } } |
Импортируйте LoginService в LoginComponent и добавьте его в качестве провайдера в декораторе компонентов.
|
1 2 3 4 5 6 7 |
import { LoginService } from './login.service'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ] }) |
Добавьте метод с именем validateLogin в файл login.service.ts, который осуществляет вызов API. Вот как это выглядит:
|
1 2 3 4 5 6 |
validateLogin(user: User){ return this.http.post('/api/user/login',{ username : user.username, password : user.password }) } |
Как видно из приведенного выше кода, он возвращает наблюдаемый объект, который будет подписан в файле login.component.ts. Вот как должен выглядеть файл login.service.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { User } from '../models/user.model'; @Injectable() export class LoginService { constructor(private http: HttpClient){ } validateLogin(user: User){ return this.http.post('/api/user/login',{ username : user.username, password : user.password }) } } |
Реализация валидации авторизации в системе
Добавьте директиву ngModel к элементам ввода данных в login.component.html.
|
1 2 |
<input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> |
Добавьте событие click для кнопки входа.
|
1 |
<button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button> |
Вот как должен выглядеть измененный файл login.component.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input name="email" [(ngModel)] = "user.username" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus> <label for="inputPassword" class="sr-only">Password</label> <input name="password" [(ngModel)] = "user.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> Remember me </label> </div> <button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button> </form> |
Определите и инициализируйте пользовательскую переменную в файле login.component.ts.
|
1 2 3 4 5 |
public user : User; constructor(private loginService: LoginService) { this.user = new User(); } |
Модель User определяется в папке src/app/models. Вот как она выглядит:
|
1 2 3 4 5 6 7 8 |
export class User { constructor(){ this.username = ''; this.password = ''; } public username; public password; } |
Определите метод с именем validateLogin, который будет вызываться при нажатии кнопки. Вот как выглядит это метод:
|
1 2 3 4 5 6 7 8 9 10 11 |
validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { console.log('result is ', result); }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); } } |
После ввода имени пользователя и пароля метод validateLogin подписывается на метод LoginService для выполнения валидации.
Вот как выглядит файл login.component.ts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import { Component } from '@angular/core'; import { LoginService } from './login.service'; import { User } from '../models/user.model'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ] }) export class LoginComponent { public user : User; constructor(private loginService: LoginService) { this.user = new User(); } validateLogin() { if(this.user.username && this.user.password) { this.loginService.validateLogin(this.user).subscribe(result => { console.log('result is ', result); }, error => { console.log('error is ', error); }); } else { alert('enter user name and password'); } } } |
Заключение
В этой части серии статей о блогинговом приложении на Angular вы узнали, как начать работу по созданию веб-приложения с помощью Angular. Мы создали базовую структуру приложения Angular и LoginComponent, который позволит пользователю вводить имя пользователя и пароль. В следующей части серии мы напишем API REST для валидации входа в систему и создадим компонент главной страницы. Исходный код этого руководства доступен на GitHub.
Автор: Roy Agasthyan
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
