Angular — это универсальная инфраструктура для создания мобильных и веб-приложений с использованием одного и того же повторно используемого кода. Используя Angular, вы можете разделить все приложение на повторно используемые компоненты, что упрощает поддержку и повторное использование кода.
Из этой серии руководств вы узнаете, как начать создавать веб-приложение, используя Angular с MongoDB в качестве внутреннего интерфейса. Вы будете использовать 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
|
После создания client приложения перейдите в папку проекта и установите необходимые зависимости с помощью Node Package Manager (npm).
|
1
2
|
cd client
npm install
|
Запустите клиентский сервер, используя npm .
|
1
|
npm start
|
Вы должны запустить приложение по адресу http: // 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 и ngModules его.
|
01
02
03
04
05
06
07
08
09
10
11
|
@NgModule({
declarations: [
RootComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [RootComponent]
})
|
Сохраните изменения и перезапустите сервер. RootComponent отображаться при загрузке приложения.
Вы будете использовать Angular Router для маршрутизации в нашем приложении для блогов. Поэтому импортируйте зависимости, связанные с маршрутизацией, в новый файл app.routing.ts внутри папки src/app .
|
1
2
|
import { RouterModule, Routes } from ‘@angular/router’;
import { ModuleWithProviders } from ‘@angular/core/src/metadata/ng_module’;
|
Определите маршрут маршрута вместе с компонентами, как показано:
|
1
2
3
|
export const AppRoutes: Routes = [
{ path: », component: LoginComponent }
];
|
Экспортируйте маршруты, чтобы создать модуль со всеми поставщиками маршрутов.
|
1
|
export const ROUTING: ModuleWithProviders = RouterModule.forRoot(AppRoutes);
|
Вот как выглядит файл app.routing.ts :
|
01
02
03
04
05
06
07
08
09
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 . Это было добавлено ради ясности.
Импортируйте класс app.module.ts файл 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 создайте файл с именем login.component.ts и добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
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 при настройке приложения. Давайте создадим представление для LoginComponent используя Bootstrap .
Загрузите и включите стиль начальной загрузки CSS в папку 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 страницу login.component.html .
|
01
02
03
04
05
06
07
08
09
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.component.css внутри папки login и добавьте следующий стиль CSS.
|
01
02
03
04
05
06
07
08
09
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 .
Создайте файл с именем login.service.ts и добавьте следующий код:
|
01
02
03
04
05
06
07
08
09
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
|
import { LoginService } from ‘./login.service’;
|
|
1
2
3
4
5
6
|
@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 файл login.service.ts :
|
01
02
03
04
05
06
07
08
09
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>
|
Добавьте событие клика к кнопке входа.
|
1
|
<button class=»btn btn-lg btn-primary btn-block» (click)=»validateLogin();»
|
Вот как выглядит модифицированный login.component.html :
|
01
02
03
04
05
06
07
08
09
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();»
</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 который будет вызываться при нажатии кнопки. Вот как выглядит метод:
|
01
02
03
04
05
06
07
08
09
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 файл login.component.ts :
|
01
02
03
04
05
06
07
08
09
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 который позволит пользователю проверить имя пользователя и пароль.
В следующей части серии руководств вы напишите REST API для проверки логина пользователя и создадите домашний компонент.
Исходный код из этого урока доступен на GitHub .
Дайте нам знать ваши мысли и предложения в комментариях ниже.