angular 的知识点了，这次我们来个小成品。angualr 结合 ng-zorro 快速且规范的开发一个后台系统。【相关教学推荐：《angular教学》】系统功能包括下面的内容：
欢迎页面用户列表用户新增用户修改用户删除
所有的 service 使用模拟的数据。
说干咱就干。
结合 ng-zorro
angular 比较流行的 ui 框架有：
Angular Material 官方指定 UI 框架NG-ZORRO，又名 Ant Design of Angular 国内比较流行的 UI 框架
Ant Design 相信做前端开发的人儿都比较熟悉了。所以这里我们结合 NG-ZORRO 这个框架来做。如果熟悉 Vue 或者 React 版本的 Ant Design，相信你可以无缝链接啊～
我们重新使用 angular-cli 生成一个项目 ng-zorro。
添加 ng-zorro 是很简单的事情：进入 ng-zorro 根目录，执行 ng add ng-zorro-antd 即可。
结合 ng-zorro 完成之后，我们运行项目起来 npm run start，你会在 http://localhost:4200 的页面看到下图内容。
Not Bad, Bro.
配置路由
我们改成 hash 路由，并添加用户路由，脚手架都帮我们完事了，我们只要做点小修改。
思路：
先添加页面 user 用户的列表页面，使用 ng-zorro 中 table 组件
用户的新增和更改页面可以共用同一个页面，使用 ng-zorro 中 form 组件
页面删除功能直接使用弹窗提示，使用 ng-zorro 中 modal 组件
对 ng-zorro 组件按需引入
调整路由文件
按照思路，我们得在 ng-zorro 引入：
// app.module.tsimport { ReactiveFormsModule } from '@angular/forms';import { NzTableModule } from 'ng-zorro-antd/table';import { NzModalModule } from 'ng-zorro-antd/modal';import { NzButtonModule } from 'ng-zorro-antd/button';import { NzFormModule } from 'ng-zorro-antd/form';import { NzInputModule } from 'ng-zorro-antd/input';// ...imports: [ // 是在 imports 中添加，而不是 declarations 中声明 NzTableModule, NzModalModule, NzButtonModule, NzFormModule, ReactiveFormsModule, NzInputModule],简单易理解原则，我们这里不使用 children 进行路由的嵌套：
// app.routing.module.tsimport { NgModule } from '@angular/core';import { Routes, RouterModule, PreloadAllModules } from '@angular/router';import { WelcomeComponent } from './pages/welcome/welcome.component';import { UserComponent } from './pages/user/user.component';import { UserInfoComponent } from './pages/user/user-info/user-info.component';// 相关的路由const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: '/welcome' }, { path: 'welcome', component: WelcomeComponent }, { path: 'user', component: UserComponent }, { path: 'user/add', component: UserInfoComponent }, { path: 'user/edit/:uuid', component: UserInfoComponent }];@NgModule({ imports: [RouterModule.forRoot( routes, { useHash: true,// 使用 hash 模式 preloadingStrategy: PreloadAllModules } )], exports: [RouterModule]})export class AppRoutingModule { }更改菜单
使用脚手架生成的菜单与我们需要开发的功能不符合，我们来调整下。
// app.component.html
替换成上面的代码后，得到的基本骨架如下：
完成用户列表
接下来完成用户列表的骨架，因为使用了 UI 框架，我么写起来异常的方便：
获取用户列表
// user.component.htmlName Position Action {{data.name}} {{data.position}} Delete
我们模拟了些数据在 assets 文件夹中 user.json:
{ "users": [ { "uuid": 1, "name": "Jimmy", "position": "Frontend" }, { "uuid": 2, "name": "Jim", "position": "Backend" } ], "environment": "development"}编写好服务之后，我们调用获取用户的数据：
// user.component.tsimport { Component, OnInit } from '@angular/core';import { UserService } from 'src/app/services/user.service';@Component({ selector: 'app-user', templateUrl: './user.component.html', styleUrls: ['./user.component.scss']})export class UserComponent implements OnInit { public list: any = [] constructor( private readonly userService: UserService ) { } ngOnInit(): void { if(localStorage.getItem('users')) { let obj = localStorage.getItem('users') || '{}' this.list = JSON.parse(obj) } else { this.getList() } } // 获取用户列表 getList() { this.userService.getUserList().subscribe({ next: (data: any) => { localStorage.setItem('users', JSON.stringify(data.users)) this.list = data.users }, error: (error: any) => { console.log(error) } }) }}因为没有引入后端服务，这里我们采用 localstorage 的方式记录状态。
上面完成后，我们得到列表信息如下：
新增用户和编辑用户
我们简单建立个表单，里面含有的字段就两个，分别是 name 和 position。这两个功能是公用一个表单的～
我们在 html 中添加:
// user-info.component.html
页面长这样子：
然后就是逻辑的判断，进行添加或者是修改。如果是连接带上 uuid 的标识，就表示是编辑，show you the codes。
// user-info.component.tsimport { Component, OnInit } from '@angular/core';import { FormBuilder, FormGroup, Validators } from '@angular/forms';import { ActivatedRoute, ParamMap } from '@angular/router';@Component({ selector: 'app-user-info', templateUrl: './user-info.component.html', styleUrls: ['./user-info.component.scss']})export class UserInfoComponent implements OnInit { public isAdd: boolean = true; public userInfo: any = [] public uuid: number = 0; validateForm!: FormGroup; constructor( private fb: FormBuilder, private route: ActivatedRoute, ) { } ngOnInit(): void { this.userInfo = JSON.parse(localStorage.getItem('users') || '[]') this.route.paramMap.subscribe((params: ParamMap)=>{ this.uuid = parseInt(params.get('uuid') || '0') }) // 是编辑状态，设置标志符 if(this.uuid) { this.isAdd = false } if(this.isAdd) { this.validateForm = this.fb.group({ username: [null, [Validators.required]], position: [null, [Validators.required]] }); } else { let current = (this.userInfo.filter((item: any) => item.uuid === this.uuid))[0] || {} // 信息回填 this.validateForm = this.fb.group({ username: [current.name, [Validators.required]], position: [current.position, [Validators.required]] }) } } submitForm() { // 如果不符合提交，则报错 if(!this.validateForm.valid) { Object.values(this.validateForm.controls).forEach((control: any) => { if(control?.invalid) { control?.markAsDirty(); control?.updateValueAndValidity({ onlySelf: true }); } }) return } // 获取到表单的数据 const data = this.validateForm.value // 新增用户 if(this.isAdd) { let lastOne = (this.userInfo.length > 0 ? this.userInfo[this.userInfo.length-1] : {}); this.userInfo.push({ uuid: (lastOne.uuid ? (lastOne.uuid + 1) : 1), name: data.username, position: data.position }) localStorage.setItem('users', JSON.stringify(this.userInfo)) } else { // 编辑用户，更新信息 let mapList = this.userInfo.map((item: any) => { if(item.uuid === this.uuid) { return { uuid: this.uuid, name: data.username, position: data.position } } return item }) localStorage.setItem('users', JSON.stringify(mapList)) } }}我们先设定一个标志符 isAdd，默认是新建用户；当 uuid 存在的时候，将其设置为 false 值，表示是编辑的状态，对内容进行表单的回填。提交表单的操作也是按照该标志符进行判断。我们直接对 localStorage 的信息进行变更，以保证同步列表信息。
删除功能
我们引入模态对话框进行询问是否删除。
// user.component.ts// 删除delete(data: any) { this.modal.confirm({ nzTitle: '你想删除该用户?', nzOnOk: () => { let users = JSON.parse(localStorage.getItem('users') || '[]'); let filterList = users.filter((item: any) => item.uuid !== data.uuid); localStorage.setItem('users', JSON.stringify(filterList)); this.list = filterList } });}我们找到删除的数据，将其剔除，重新缓存新的用户数据，并更新 table 的用户列表数据。
So，到此为止，我们顺利完成了一个简单的项目。我们用 Gif 图整体来看看。
【完】
编程入门！！