Angular實戰之使用NG-ZORRO建立一個企業級中後臺框架（進階篇）

前言：

　　上一篇文章咱們講了如何在建立的Angular項目中快速引入ng-zorro-antd企業中臺組件庫，而且快速構建後臺管理頁面框架模板。這一章主要介紹的是如何在建立好的後臺管理頁面框架的快速生成NG-ZORRO相關的組件，而且介紹Angular相關目錄結構、生命週期函數，路由配置和使用相關知識點，以及如何使用Angular CLI使用一行代碼快速添加Angular應用的新功能。讓你快熟的構建一個屬於本身的NG-ZORRO後臺管理框架，注意咱們的前端代碼的編寫所有都是在VS Code上面編寫。

Angular項目目錄介紹（重要）：

 

app.module.ts（根模塊）：

NgModule 用於描述應用的各個部分如何組織在一塊兒。 每一個應用有至少一個 Angular 模塊，根模塊就是你用來啓動此應用的模塊。 按照慣例，它一般命名爲 AppModule。

模塊和組件關係：

注意：一個模塊能夠有多個組件，一個組件也能夠有多個樣式表,但只有一個HTML模板。

|--app.module.ts(模塊)
 |--app.component.ts(組件)
 |--app.component.html(HTML模板)
 |--app.component.css(CSS樣式表)

目錄結構描述：

## 說明
```javascript
|-- 文件名 // 說明
|-- 首層目錄
|-- e2e // 自動化集成測試目錄
|-- node_modules // npm/cnpm第三方依賴包存放目錄
|-- src // 應用源代碼目錄
|-- .editorconfig // 不一樣編譯器統一代碼風格
|-- .gitignore // git中的忽略文件列表
|-- angular.json // Angular的配置文件
|-- browserslist // 配置瀏覽器兼容性的文件
|-- karma.conf.js // 自動化測試框架Karma的配置文件
|-- package-lock.json // 依賴包版本鎖定文件
|-- package.json // 標準的npm工具的配置文件
|-- README.md // 項目說明的MakeDown文件
|-- tsconfig.app.json // app項目的TypeScript的配置文件
|-- tsconfig.json // 整個工做區的TypeScript配置文件
|-- tsconfig.spec.json // 用於測試的TypeScript配置文件
|-- tslint.json // TypeScript的代碼靜態掃描配置

|-- src目錄
|-- app // 工程源碼目錄
|-- assets // 資源目錄
|-- environments // 環境配置目錄
|-- favicon.ico // header裏的icon
|-- index.html // 單頁應用的宿主HTML
|-- main.ts // 入口ts文件
|-- polyfills.ts // 不一樣瀏覽器兼容腳本加載
|-- karma.conf.js // 自動化測試框架Karma的配置文件
|-- style.css // 整個項目的全局css
|-- test.ts // 測試入口

|-- app目錄
|-- app-routing.module.ts // app路由
|-- app.component.css // app的css
|-- app.component.html // app的html
|-- app.component.spec.ts // app的測試
|-- app.component.ts // app的組件
|-- app.module.ts // app的模塊
|-- environments目錄
|-- environments.prod.ts // 生產環境
|-- environments.ts // 開發環境
```　

詳細目錄詳細介紹可查閱：

http://www.javashuo.com/article/p-osreaikt-ny.html

http://www.javashuo.com/article/p-vwukdobc-no.html

Angular中的組件生命週期函數：

什麼是生命週期函數？

通俗的來講，聲明周期函數就是組件建立，組件更新，組件銷燬是會觸發的一系列方法。

生命週期鉤子詳解： https://angular.cn/guide/lifecycle-hooks

當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法：

注意：constructor 構造函數（依賴注入，起到對應局部變量值初始化做用）： 除了使用簡單的值對局部變量進行初始化以外，什麼都不該該作！！！

鉤子	用途及時機
ngOnChanges()	當 Angular（從新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的  SimpleChanges 對象 在 ngOnInit() 以前以及所綁定的一個或多個輸入屬性的值發生變化時都會調用。
ngOnInit()	在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。 在第一輪 ngOnChanges() 完成以後調用，只調用一次。[請求數據時使用]
ngDoCheck()	檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應。 在每一個變動檢測週期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面調用。
ngAfterContentInit()	當 Angular 把外部內容投影進組件/指令的視圖以後調用。 第一次 ngDoCheck() 以後調用，只調用一次。
ngAfterContentChecked()	每當 Angular 完成被投影組件內容的變動檢測以後調用。 ngAfterContentInit() 和每次 ngDoCheck() 以後調用
ngAfterViewInit()	當 Angular 初始化完組件視圖及其子視圖以後調用。 第一次 ngAfterContentChecked() 以後調用，只調用一次。
ngAfterViewChecked()	每當 Angular 作完組件視圖和子視圖的變動檢測以後調用。 ngAfterViewInit() 和每次 ngAfterContentChecked() 以後調用。
ngOnDestroy()	每當 Angular 每次銷燬指令/組件以前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。 在 Angular 銷燬指令/組件以前調用。

使用Angular CLI快速添加功能到現有的Angular應用程序：

Angular CLI介紹：

Angular CLI 是一個命令行接口(Command Line Interface)，用於實現自動化開發工做流程。它容許你作如下這些事情：

• 建立一個新的 Angular 應用程序
• 運行帶有 LiveReload 支持的開發服務器，以便在開發過程當中預覽應用程序
• 添加功能到現有的 Angular 應用程序
• 運行應用程序的單元測試
• 運行應用程序的端到端 (E2E) 測試
• 構建應用程序

使用命令添加功能到現有的 Angular 應用程序：

可使用 ng generate 命令，爲已有的 Angular 應用程序添加新的功能：

ng generate class my-new-class: 新建 class
ng generate component my-new-component: 新建組件
ng generate directive my-new-directive: 新建指令
ng generate enum my-new-enum: 新建枚舉
ng generate module my-new-module: 新建模塊
ng generate pipe my-new-pipe: 新建管道
ng generate service my-new-service: 新建服務

ng generate 命令與其它的子命令同樣，也有快捷鍵，具體以下：　　

ng g cl my-new-class: 新建 class
ng g c my-new-component: 新建組件
ng g d my-new-directive: 新建指令
ng g e my-new-enum: 新建枚舉
ng g m my-new-module: 新建模塊
ng g p my-new-pipe: 新建管道
ng g s my-new-service: 新建服務

在app/pages目錄下建立咱們的博客項目模塊（帶路由配置模塊）：

　　咱們在開發一個項目可能會存在多個模塊，好比說一個商城。存在商品模塊，訂單模塊，廣告模塊，銷售管理等多個模塊。那麼這個時候咱們須要把這些模塊單獨分離出來，按照模塊化開發。接下來我將會經過開發一個簡單的博客系統，主要分博客管理和用戶管理兩個模塊。帶領你們一步一步完善本身的項目模塊頁面。

ng generate module /pages/MyBlog  --routing

修改項目默認調轉頁面，Angular應用多模塊路由配置：

找到app-routing.module.ts文件，在【routes】對象中聲明新模塊路由，以及項目默認調轉頁面地址修改。

在my-blog項目中建立博客後臺頁面首頁組件，配置路由（多模塊路由配置），聲明運行組件：

一、建立首頁組件：

ng generate component /pages/my-blog/index

二、配置首頁組件路由（多模塊路由完美解決）：

首先，咱們的博客項目存在博客管理和用戶管理兩個核心模塊，咱們建立了兩個模塊，那麼咱們如何在【app-routing.module.ts】應用路由文件中配置多個模塊的路由，咱們能夠經過延遲加載子路由的方式來加載相關模塊的子路由。以下所示

前往【my-blog-routing.module.ts】文件中配置上新建立的首頁組件的路由。

三、前往根模塊【my-blog.module.ts】聲明首頁組件：

自定義頁面Layout佈局（動態菜單欄配置）：

通常狀況下咱們的頁面動態菜單都是從後臺讀取，而後遍歷綁定在【app.component.html】頁面中的，咱們這裏沒有展現沒有涉及到後臺就是用固定式的路由。

項目樣式效果：

 

項目開源地址：

https://github.com/YSGStudyHards/YyFlight-NG-ZORRO