От автора: этот пост является частью серии статей «Создание приложения для блоггинга с использованием Angular и MongoDB». Angular — это универсальный фреймворк для создания мобильных и веб-приложений с использованием одного и того же многократно используемого кода. Используя Angular, вы можете разделить все приложение для блогов на компоненты многократного использования, что упрощает обслуживание и повторное использование кода.
В этой серии статей вы узнаете, как приступить к созданию веб-приложения с использованием Angular с MongoDB в качестве back-end. Для запуска сервера мы будем использовать Node.js.
Вся эта серия будет посвящена созданию приложения для блоггинга с использованием Angular, Node.js и MongoDB. В этой статье вы узнаете, как начать работу по настройке приложения и созданию компонента Login.
Приступим к работе
Давайте начнем с установки Angular CLI.
npm install -g @angular/cli
После установки Angular CLI создайте папку проекта AngularBlogApp.
mkdir AngularBlogApp cd AngularBlogApp
В папке проекта, используя следующую команду, создайте новое приложение Angular:
ng new client
После создания клиентского приложения перейдите в папку проекта и установите необходимые зависимости с помощью Node Package Manager (npm).
cd client npm install
Запустите клиентский сервер, используя npm.
npm start
У вас должно запуститься приложение по адресу http://localhost:4200/.
Настройка приложения
Ваше веб-приложение будет содержать корневой компонент. Создайте папку с именем root внутри папки src/app. Создайте в ней файл с именем root.component.html и добавьте в него следующий HTML-код:
<h3> Root Component </h3>
Создайте еще один файл root.component.ts и добавьте в него следующий код:
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.
import { RootComponent } from './root/root.component';
Включите RootComponent в ngModules и загрузите его.
@NgModule({ declarations: [ RootComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [RootComponent]
})
Сохраните изменения и перезапустите сервер. При загрузке приложения будет отображаться RootComponent. В нашем приложении для маршрутизации мы будем использовать Angular Router. Поэтому импортируйте связанные с маршрутизацией зависимости в новом файле с именем app.routing.ts внутри папки src / app.
import { RouterModule, Routes } from '@angular/router';
import { ModuleWithProviders } from '@angular/core/src/metadata/ng_module'; Определите путь маршрута и компонентов следующим образом:
export const AppRoutes: Routes = [ { path: '', component: LoginComponent }
];
Экспортируйте маршруты для создания модуля со всеми провайдерами маршрутов.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
Вот как должен выглядеть файл app.routing.ts:
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.
import { ROUTING } from './app.routing';
Включите его в импорт NgModule.
imports: [ BrowserModule, ROUTING, FormsModule ]
Поместите RouterOutlet на странице root.component.html. Здесь отображается компонент маршрута.
<router-outlet></router-outlet>
Создайте папку с именем login в папке src/app. В папке login создайте файл login.component.ts и добавьте в него следующий код:
import { Component } from '@angular/core'; @Component({ selector: 'app-login', templateUrl: './login.component.html'
})
export class LoginComponent { constructor() { } }
Создайте файл login.component.html и добавьте в него следующий код:
<h3> Login Component </h3>
Сохраните все изменения и перезапустите сервер. Как вы видите на скриншоте, при загрузке приложения будет отображаться LoginComponent.
Создание компонента авторизации
При настройке приложения мы уже задали основу для LoginComponent. Давайте создадим представление для LoginComponent с помощью Bootstrap. Загрузите и включите стили CSS Bootstrap в папке assets и включите соответствующую ссылку на странице src/index.html.
<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css">
Оберните app-root на странице index.html следующим образом.
<div class="container"> <app-root></app-root> </div>
Добавьте следующий HTML-код на страницу login.component.html.
<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.
.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.
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css']
})
Сохраните приведенные выше изменения и попробуйте загрузить приложение. У вас будет отображаться элемент LoginComponent с представлением входа в систему.
Создание службы авторизации
LoginComponent необходимо взаимодействовать с базой данных, чтобы проверить, существует ли пользователь, пытающийся войти в систему. Таким образом, он должен будет выполнять вызовы API. Часть, относящуюся к взаимодействию с базой данных, мы сохраняем в отдельном файле login.service.ts.
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; @Injectable()
export class LoginService { constructor(private http: HttpClient){ } validateLogin(){ } }
Импортируйте LoginService в LoginComponent и добавьте его в качестве провайдера в декораторе компонентов.
import { LoginService } from './login.service';
@Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [ LoginService ]
})
Добавьте метод с именем validateLogin в файл login.service.ts, который осуществляет вызов API. Вот как это выглядит:
validateLogin(user: User){ return this.http.post('/api/user/login',{ username : user.username, password : user.password })
}
Как видно из приведенного выше кода, он возвращает наблюдаемый объект, который будет подписан в файле login.component.ts. Вот как должен выглядеть файл login.service.ts:
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.
<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 для кнопки входа.
<button class="btn btn-lg btn-primary btn-block" (click)="validateLogin();" type="button">Sign in</button>
Вот как должен выглядеть измененный файл login.component.html:
<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.
public user : User; constructor(private loginService: LoginService) { this.user = new User();
}
Модель User определяется в папке src/app/models. Вот как она выглядит:
export class User { constructor(){ this.username = ''; this.password = ''; } public username; public password;
}
Определите метод с именем validateLogin, который будет вызываться при нажатии кнопки. Вот как выглядит это метод:
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:
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
Источник: https://code.tutsplus.com/
Редакция: Команда webformyself.