angular是一个一站式框架，用于使用相同的可重用代码创建移动和 Web 应用程序。使用 Angular，您可以将整个应用程序划分为可重用的组件，从而更容易维护和重用代码。
在本教程系列中，您将学习如何开始使用 Angular 和mongodb作为后端创建 Web 应用程序。您将使用node .js 来运行服务器。
在本教程的整个过程中，您将使用 Angular、Node.js 和 MongoDB 构建一个博客应用程序。
在本教程中，您将了解如何开始设置应用程序和创建Login组件。
入门
让我们开始安装Angular CLI.
npm install -g @angular/cli
安装 Angular CLI 后，创建一个名为AngularBlogApp.
mkdir AngularBlogAppcd AngularBlogApp
从项目文件夹中，使用以下命令创建一个新的 Angular 应用程序：
ng new client
创建client应用程序后，导航到项目文件夹并使用节点包管理器 (npm) 安装所需的依赖项。
cd client npm install
使用 启动客户端服务器npm。
npm start
您应该让应用程序在 http://localhost:4200/上运行。
设置应用程序
您的 Angular Web 应用程序将有一个根组件。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.scssapp.component.spec.tsapp.module.tssrc/app
导入RootComponent里面的app.module.ts文件。
import { RootComponent } from './root/root.component';包括RootComponent在ngModules并引导它。
@NgModule({
declarations: [
RootComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [RootComponent]
})保存更改并让服务器休息。您将RootComponent在应用程序加载时显示。
您将Router在我们的博客应用程序中使用 Angular 进行路由。因此，将与路由相关的依赖项导入文件夹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让我们为using创建视图Bootstrap。
下载并在文件夹中包含引导 CSS 样式，并在页面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.component.css在文件夹内创建一个名为的login文件并添加以下 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.
创建一个名为的文件login.service.ts并添加以下代码：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class LoginService {
constructor(private http: HttpClient){
}
validateLogin(){
}
}导入LoginServiceinLoginComponent并将其作为提供者添加到组件装饰器中。
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文件中订阅的 observable。这是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">登录</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 上获得。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
