1. 前言

上一节中我们学会了安装TypeScript支持，以及创建了一个基本的Angular工程。并尝试启动了工程，看到了首页。

本节内容中，我们要学会做我们的第一个页面，登录页面。

同时我们要学会集成我们使用的UI框架Ant Design For Angular，NG-ZORRO。

2. 集成NG-ZORRO

2.1. NG-ZORRO简介

Ant Design ：源自蚂蚁金服体验技术部的后台产品开发，蚂蚁金服的设计师和前端工程师经过大量的项目实践和总结，抽象出的一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。Ant Design提供了对Angular、Vue、React等前端框架的支持。

NG-ZORRO：是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。

官方网站可参考：https://ng.ant.design/docs/introduce/zh

2.2. NG-ZORRO安装

1、自动安装

只需要进入我们的工程目录，执行如下命令即可：

ng add ng-zorro-antd

VSCode中，步骤如下：

选择菜单栏中的终端（Terminal） - 新建终端（New Terminal），然后在新的终端窗口中输入上面的命令即可。

安装时会有选项提示，根据需要选择即可。

这样会自动安装成功NG-ZORRO。

我们可以启动工程看一下：

已经为我们配置了一个欢迎主页面，使用了侧边栏，而且侧边边栏是可以自动收缩的。

2、我们也可以手动安装NG-ZORRO

首先，在工程目录下，执行安装组件命令：

npm install ng-zorro-antd --save

接着，我们引用样式:

在 angular.json 中引入:

{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

在 style.css 中引入预构建样式文件:

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

最后，我们想使用哪个组件模块，就在app.module.ts中引入就可以使用了。举个例子，我们要使用按钮组件，需要引入NzButtonModule：

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

然后在模板中使用：

<button nz-button nzType="primary">Primary</button>

3. 制作登录页面

3.1. 引入NG-ZORRO的Form表单组件

登录页面主要显示的都是表单，因此需要引入表单组件，在app.module.ts文件中增加如下部分代码：

import { NzFormModule } from 'ng-zorro-antd/form';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzFormModule,
    NzButtonModule,
    NzInputModule,
    NzCheckboxModule
  ]
})
export class AppModule { }

上述代码中忽略了 既有的其他代码。我们只需要导入包：

import { NzFormModule } from 'ng-zorro-antd/form';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

然后在@NgModule 的 imports属性中，增加NzFormModule、NzButtonModule、NzInputModule、 NzCheckboxModule即可。

3.2. 使用脚手架创建登录页面

切换到我们工程下的pages目录，完整路径：src/app/pages/。我们所有的页面都会放在这个目录下维护。

然后输入如下命令，创建login组件：

ng generate component login

全过程如下：

PS D:\ECMS\ecms-web\src\app\pages> ng generate component login
More than one module matches. Use skip-import option to skip importing the component into the closest module.
PS D:\ECMS\ecms-web\src\app\pages> ng generate component login --skip-import
CREATE src/app/pages/login/login.component.html (20 bytes)
CREATE src/app/pages/login/login.component.spec.ts (621 bytes)
CREATE src/app/pages/login/login.component.ts (271 bytes)
CREATE src/app/pages/login/login.component.css (0 bytes)
PS D:\ECMS\ecms-web\src\app\pages> 

第一次执行ng generate component login命令时提示More than one module matches，我们只需要加入--skip-import 参数即可。

生成的代码如下：

3.3. 创建登录表单

1、在login.component.html中加入如下代码：

<div style="text-align: center; margin: auto">
  <i class="fa fa-superpowers fa-4x" style="color: #40a9ff;"></i><!-- 这里放置LOGO -->
  <span class="align-middle" style="font-size:65px; color:grey;"> ECMS</span>
</div>
<div style="margin: 25px auto auto auto;">
  <form nz-form [formGroup]="validateForm" class="login-form" style="margin: auto;" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入登录用户名!">
        <nz-input-group nzPrefixIcon="user">
          <input type="text" nz-input formControlName="userName" placeholder="用户名/手机/邮箱" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control nzErrorTip="请输入登录密码!">
        <nz-input-group nzPrefixIcon="lock">
          <input type="password" nz-input formControlName="password" placeholder="密码" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <div nz-row class="login-form-margin">
      <div nz-col [nzSpan]="12">
        <label nz-checkbox formControlName="remember">
          <span>记住</span>
        </label>
      </div>
      <div nz-col [nzSpan]="12">
        <a class="login-form-forgot">忘记密码？</a>
      </div>
    </div>
    <button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button>
    或者 <a> 去注册! </a>
  </form>
</div>

2、在login.component.css中加入如下代码：

.login-form {
  max-width: 300px;
}

.login-form-margin {
  margin-bottom: 16px;
}

.login-form-forgot {
  float: right;
}

.login-form-button {
  width: 100%;c
}

3、在login.component.ts中加入如下代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';  // 导入构建表单需要的相关组件
import { Router } from '@angular/router'; // 导入Router组件

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  validateForm!: FormGroup; // 定义表单组

  constructor(private fb: FormBuilder,
             private router: Router) { } // 注入FormBuilder对象 和Router对象 

  ngOnInit(): void {
    //  构建表单对象
    this.validateForm = this.fb.group({
      userName: [null, [Validators.required]],
      password: [null, [Validators.required]],
      remember: [true]
    });
  }

  // 表单提交
  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
    // 表单验证失败返回
    if (this.validateForm.invalid) {
      return;
    }

    // 表单验证通过，调用登录逻辑
    // 登录代码忽略
    // 登录成功跳转到welcome 页面
    this.router.navigate(['welcome']);
  }
}

4. 配置路由

我们修改路由把登录页面设置为默认加载页面：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { WelcomeComponent } from './pages/welcome/welcome.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'login' }, // 当前网站根
  { path: 'login', component: LoginComponent, data: { title: '登录' } },
  { path: 'welcome', component: WelcomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

5. 导入LoginComponent组件

我们修改app.module.ts文件，添加如下的组件引用：

import { LoginComponent } from './pages/login/login.component';
import { WelcomeComponent } from './pages/welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent
    , LoginComponent
    , WelcomeComponent
  ],
  imports: [
   
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

代码中我忽略了不相干的代码。

6. 启动

我们启动工程来看一下效果：

直接点击登录看一下：

我们随便输入一个用户名和密码，点击登录看看：

成功地跳转到了welcome页面。

7. 小结

本篇教程中我们学习了如何集成NG-ZORRO到Angular工程中，然后我们尝试着，使用NG-ZORRO的表单组件，构建了一个登录页面。并配置了网站的默认页面为登录页面。大家可以看到 使用Angular + NG-ZORRO构建一个前端的网站是如此简单。