Angular是使用相同的可重用代码创建移动和Web应用程序的一站式框架。 使用Angular，您可以将整个应用程序划分为可重用的组件，这使得维护和重用代码更加容易。

在本教程系列中，您将学习如何使用以MongoDB为后端的Angular创建Web应用程序。 您将使用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

创建client应用程序后，导航至项目文件夹并使用节点包管理器（npm）安装所需的依赖项。

cd client
npm install

使用npm启动客户端服务器。

npm start

您应该在http：// localhost：4200 /上运行该应用程序。

设置应用

您的Angular Web应用程序将具有一个根组件。 在src/app文件夹内创建一个名为root的文件夹。 创建一个名为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 。 src/app文件夹中只有一个名为app.module.ts的文件。

将RootComponent导入app.module.ts文件中。

import { RootComponent } from './root/root.component';

在RootComponent中包含ngModules并引导它。

@NgModule({declarations: [RootComponent],imports: [BrowserModule,FormsModule],providers: [],bootstrap: [RootComponent]
})

保存更改并重新启动服务器。 加载应用程序时，将显示RootComponent 。

您将在我们的博客应用程序中使用Angular Router进行路由。 因此，将与路由相关的依赖项导入到src/app文件夹中名为app.routing.ts的新文件中。

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>

在src/app文件夹中创建一个名为login的文件夹。 在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奠定了基础。 让我们使用Bootstrap为LoginComponent创建视图。

下载bootstrap CSS样式并将其包括在assets文件夹中，并将引用包括在src/index.html页面中。

<link rel="stylesheet" type="text/css" href="./assets/bootstrap.min.css">

在index.html页面的app-root周围放置一个包装器。

<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']
})

保存以上更改，然后尝试加载应用程序。 您将在Login视图中显示LoginComponent 。

创建登录服务

LoginComponent将需要与数据库进行交互，以查看登录用户是否有效。 因此，它将需要进行API调用。 您将把数据库交互部分保留在一个名为login.service.ts的单独文件中。

创建一个名为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 ]
})

在login.service.ts文件中添加一个称为validateLogin的方法，该方法将进行API调用。 外观如下：

validateLogin(user: User){return this.http.post('/api/user/login',{username : user.username,password : user.password})
}

如上面的代码所示，它返回一个observable，它将在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>

将点击事件添加到登录按钮。

<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创建Web应用程序。 您创建了Angular应用程序的基本结构，并创建了LoginComponent ，它将使用户能够验证用户名和密码。

在本系列教程的下一部分中，您将编写用于用户登录验证的REST API并创建home组件。

该教程的源代码可在GitHub上获得 。

请在下面的评论中告诉我们您的想法和建议。

翻译自: https://code.tutsplus.com/tutorials/creating-a-blogging-app-using-angular-mongodb-login--cms-30125