1. 首頁 > 生活百科 > >

Angular + NG-ZORRO快速開發一個后臺系統

小知識it知識

本篇文章給大家分享一個Angular實戰 ， 了解一下angualr 結合 ng-zorro 如何快速開發一個后臺系統 ， 希望對大家有所幫助！

Angular + 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 + NG-ZORRO快速開發一個后臺系統

文章插圖

我們重新使用 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 的頁面看到下圖內容 。
Angular + NG-ZORRO快速開發一個后臺系統

文章插圖

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"> <!-- 默認點擊 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">

推薦閱讀