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

前言：

　　在以前的一篇文章已經介紹過了，公司正在使用NG-ZORRO組件庫開發後臺應用，而且詳細的介紹了Angular開發環境的搭建和項目的建立。這篇文章就是爲了讓你們熟悉瞭解咱們該如何在Angular項目中使用到NG-ZORRO UI組件庫搭建後臺管理框架。

NG-ZORRO介紹：

官網地址：https://ng.ant.design/docs/introduce/zh

ng-zorro-antd 是遵循 Ant Design 設計規範的 Angular UI 組件庫，主要用於研發企業級中後臺產品。所有代碼開源並遵循 MIT 協議，任何企業、組織及我的都可無償使用。

NG-ZORRO特性：

• 提煉自企業級中後臺產品的交互語言和視覺風格。
• 開箱即用的高質量 Angular 組件庫，與 Angular 保持同步升級。
• 使用 TypeScript 構建，提供完整的類型定義文件。
• 支持 OnPush 模式，性能卓越。
• 數十個國際化語言支持。
• 深刻每一個細節的主題定製能力。

建立一個Angular項目：

angular環境配置參考：http://www.javashuo.com/article/p-vairkvgk-ny.html

在建立項目以前，請確保 @angular/cli 已被成功安裝。

執行如下命令，@angular/cli 會在當前目錄下新建一個名稱爲 YyFlight-NG-ZORRO的文件夾，並自動安裝好相應依賴。

ng new YyFlight-NG-ZORRO

自動完成 ng-zorro-antd 的初始化配置（推薦，簡單快速）：

進入新建的Angular項目目錄(YyFlight-NG-ZORRO)中:

cd YyFlight-NG-ZORRO

初始化ng-zorro-antd配置：

注意：執行如下命令後將自動完成 ng-zorro-antd 的初始化配置，包括引入國際化文件，導入模塊，引入樣式文件等工做。

ng add ng-zorro-antd

【重要】設置項目的相關配置，並選擇模板建立項目：　

Skipping installation: Package already installed? Enable icon dynamic loading（正在跳過安裝：包已安裝？啓用圖標動態加載）：y

set up custom theme file（設置自定義主題文件）：y

choose your locale code（選擇區域設置代碼）：ZH-CN

choose template to create project（選擇模板建立項目）:sidemenu (頁面菜單)

啓動調試查看頁面效果：

ng serve --port 0 --open

手動安裝ng-zorro-antd：

安裝組件：

npm install ng-zorro-antd --save

若是上面命令安裝失敗，能夠試試下面的cnpm安裝：

cnpm install ng-zorro-antd --save

引入樣式：

在 angular.json 中引入：

{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

在 style.css 中引入css樣式文件：

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

在 style.less 中引入 less 樣式文件：

@import "~ng-zorro-antd/ng-zorro-antd.less";

引入組件模塊：

如下面的 NzButtonModule 模塊爲例，先引入組件模塊：

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

而後在模板中使用：

<button nz-button nzType="primary">Primary</button>