Angular + NG-ZORRO快速开发一个后台系统 _生活百科

本篇文章给大家分享一个Angular实战，了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统，希望对大家有所帮助！

文章插图

连更的这几天的文章，我们已经了解了不少 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 即可。

当然你也可以执行 npm install 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<nz-layout class="app-layout"> <nz-sider class="menu-sidebar" nzCollapsible nzWidth="256px" nzBreakpoint="md" [(nzCollapsed)]="isCollapsed" [nzTrigger]="null"> <div class="sidebar-logo">  <a routerLink="/welcome"> <img src=https://www.52zixue.com/zhanzhang/webqd/js/04/21/70538/"https://ng.ant.design/assets/img/logo.svg" alt="logo">