Ant design是阿里的一套前端UI设计规范，目前针对三大前端框架都有对应的UI库，我个人觉得这一套库组件比较齐全，官方文档也比较规范，用起来挺方便的，企业用来做一些后台管理系统也很适合。这里我就讲述一下如何用这套规范的ng-zorro来做angular项目的开发。
首页引入ng-zorro的方法有两个：
-
用自带脚手架直接构建项目
ng-zorro有自带的脚手架可以帮助你快速构建一个项目框架，现在命令行窗口cd到我们上一篇教程创建的angular-schoolmanager-cli项目目录下，运行ng add ng-zorro-antd，中途会需要你确认四个选择
添加ng-zorro时的选择
（1）是否添加图标库，建议选是
（2）是否设置自定义主题文件，这个可以随意
（3）本地化代码，我们选zh_CN，代表中文
（4）选择模板，这里我们选了带侧边栏菜单的
创建完成后，可以启动项目，运行成功可以看到一个带侧边栏模板的界面。
带侧边栏模板的界面 - 也可以用手动配置的方法引入ng-zorro库，具体如何手动引入可以参考官方文档的快速上手-自行构建部分。
另外由于angular框架模块化的特性，ng-zorro也支持你单独引入某个模块比如button模块，具体如何引入也可以查看官方文档。
接着我们就继续看上面的带侧边栏模板的项目是如何构建出来的。我们先看一下现在的项目结构和上一篇刚创建完的项目有什么不同。
- 首先看package.json，可以看到dependencies下面多了一个"ng-zorro-antd": "^8.5.2"的库。
-
不难发现的是src目录下面多了一个theme.less的文件，这是上面我们创建时第二个选择“是否设置自定义主题文件”时选是的时候创建的，这个相当于ng-zorro封装的样式文件，我们可以通过这个文件修改默认样式，自定义主题样式。顺便我们也可以发现angular.json这个配置文件也发生了改变
ng-zorro样式配置
通过这里引入了ng-zorro的样式。
- 同样不难发现的是src/app目录下面多了一个icons-provider.module.ts的文件，从文件名称我们可以猜到，这是一个提供icons的模块，我们看一下这个文件内容
import { NgModule } from '@angular/core';
import { NZ_ICONS } from 'ng-zorro-antd';
import {
MenuFoldOutline,
MenuUnfoldOutline,
FormOutline,
DashboardOutline
} from '@ant-design/icons-angular/icons';
const icons = [MenuFoldOutline, MenuUnfoldOutline, DashboardOutline, FormOutline];
@NgModule({
providers: [
{ provide: NZ_ICONS, useValue: icons }
]
})
export class IconsProviderModule {
}
这里我们可以看出，这个模块引入了四个icon组件，正好对应了界面上四个图标。上一篇教程中我们就提到过，app.module.ts中会引入要用到的模块，所以我们去看这个文件。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IconsProviderModule } from './icons-provider.module';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
IconsProviderModule,
NgZorroAntdModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule
],
providers: [{ provide: NZ_I18N, useValue: zh_CN }],
bootstrap: [AppComponent]
})
export class AppModule { }
果然，IconsProviderModule在这里被引入了，实际上，这是静态加载icon的方法。但是我们这边需要说明的是，根据官方文档icon图标这一节说明的，前面我们已经在angular.json中添加了动态加载icon的配置，即
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
所以使用IconsProviderModule的静态加载icon的方式两者只取其一即可，这里重复了。
同时还要注意的是跟上一篇教程创建完项目时相比，这里还多引用了几个模块，除了ng-zorro的模块，还多了表单模块、http请求模块和动画模块，这三个模块是项目开发时必然要用到的模块，所以脚手架自动为我们引入了。另外还多了一个provider，是为了支持国际化的。
实际上，到这里为止，引入ng-zorro的工作已经完成了，后面就该开始正式的编码了，所以本教程先到此为止，下一篇我再结合angular中路由的概念来剖析其他增加的代码。
