Angular實戰之使用NG-ZORRO建立一個企業級中後臺框架(新手入門篇)

追逐時光者發表於2020-12-23

前言:

  在之前的一篇文章已經介紹過了,公司正在使用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環境配置參考:https://www.cnblogs.com/Can-daydayup/p/14166192.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> 

 

相關文章