2. 程式人生 > >Angular 4入門教程系列 15 NG-ZORRO的使用方式

Angular 4入門教程系列 15 NG-ZORRO的使用方式

阿新 • • 發佈：2018-12-09

這篇文章介紹一下Angular的優秀國內UI元件庫NG-ZORRO，並演示一下如何使引入NG-ZORRO到專案之中。

Why NG-ZORRO

NG-ZORRO由阿里計算平臺事業部、阿里雲等不同部門的開發人員在原業務元件的基礎上構建而成，於2017/8/15在github上釋出了第一個對外的版本0.5.0-rc.0，版本更新很快，三個月已經接近有12次更新之多，基本週釋出的快速迭代，目前最新版本為0.6.0-rc.3。使用NG-ZORRO有很多原因，比如

  • 元件型別豐富
  • 生態可以結合ant-design
  • 結合阿里在自己專案中的經驗
  • 版本更新迭代很快
  • 介面漂亮一些
  • E文不好的開發者的福音
  • ……

NG-ZORRO網址

事前準備

安裝node

詳細可以參照：http://blog.csdn.net/liumiaocn/article/details/78510679

[root@angular ~]# npm -v
5.5.1
[root@angular ~]# 
[root@angular
 
 ~]# node -v
v9.1.0
[root@angular ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

安裝angular-cli

安裝命令：npm install -g @angular/cli –unsafe-perm

[root@angular ~]# npm install -g @angular/cli --unsafe-perm
/usr/local/npm/node/bin/ng -> /usr/local/npm/node/lib/node_modules/@angular/cli/bin/ng

> node-sass@4.6.1 install /usr/local/npm/node/lib/node_modules/@angular
 
/cli/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.6.1/linux-x64-59_binding.node
Download complete  ] - :
Binary saved to /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Caching binary to /root/.npm/node-sass/4.6.1/linux-x64-59_binding.node

> node-sass@4.6.1 postinstall /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass
> node scripts/build.js

Binary found at /usr/local/npm/node/lib/node_modules/@angular/cli/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/@angular/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @angular/cli@1.5.0
added 148 packages and updated 1 package in 122.371s
[root@angular ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

設定link

[[email protected] ~]# ln -s /usr/local/npm/node/lib/node_modules/@angular/cli/bin/ng /usr/local/bin/ng
[[email protected] ~]# which ng
/usr/local/bin/ng
[[email protected] ~]# ng version

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 9.1.0
OS: linux x64
Angular: 
...
[[email protected] ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

安裝typescript

[root@angular ~]# npm install -g typescript
/usr/local/npm/node/bin/tsc -> /usr/local/npm/node/lib/node_modules/typescript/bin/tsc
/usr/local/npm/node/bin/tsserver -> /usr/local/npm/node/lib/node_modules/typescript/bin/tsserver
+ typescript@2.6.1
updated 1 package in 9.327s
[root@angular ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

建立cli專案骨架

[[email protected] ~]# ng new NgzorroProject
  create NgzorroProject/README.md (1030 bytes)
  create NgzorroProject/.angular-cli.json (1250 bytes)
  create NgzorroProject/.editorconfig (245 bytes)
  create NgzorroProject/.gitignore (516 bytes)
  create NgzorroProject/src/assets/.gitkeep (0 bytes)
  create NgzorroProject/src/environments/environment.prod.ts (51 bytes)
  create NgzorroProject/src/environments/environment.ts (387 bytes)
  create NgzorroProject/src/favicon.ico (5430 bytes)
  create NgzorroProject/src/index.html (301 bytes)
  create NgzorroProject/src/main.ts (370 bytes)
  create NgzorroProject/src/polyfills.ts (2667 bytes)
  create NgzorroProject/src/styles.css (80 bytes)
  create NgzorroProject/src/test.ts (1085 bytes)
  create NgzorroProject/src/tsconfig.app.json (211 bytes)
  create NgzorroProject/src/tsconfig.spec.json (304 bytes)
  create NgzorroProject/src/typings.d.ts (104 bytes)
  create NgzorroProject/e2e/app.e2e-spec.ts (297 bytes)
  create NgzorroProject/e2e/app.po.ts (208 bytes)
  create NgzorroProject/e2e/tsconfig.e2e.json (235 bytes)
  create NgzorroProject/karma.conf.js (923 bytes)
  create NgzorroProject/package.json (1320 bytes)
  create NgzorroProject/protractor.conf.js (722 bytes)
  create NgzorroProject/tsconfig.json (363 bytes)
  create NgzorroProject/tslint.json (2985 bytes)
  create NgzorroProject/src/app/app.module.ts (316 bytes)
  create NgzorroProject/src/app/app.component.css (0 bytes)
  create NgzorroProject/src/app/app.component.html (1120 bytes)
  create NgzorroProject/src/app/app.component.spec.ts (986 bytes)
  create NgzorroProject/src/app/app.component.ts (207 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Project 'NgzorroProject' successfully created.
[[email protected] ~]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

確認結果

[[email protected] ~]# cd NgzorroProject/
[[email protected] NgzorroProject]# ng serve -H 0.0.0.0 --open
** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
 10% building modules 5/5 modules 0 active(node:2129) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:2129) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.                   Date: 2017-11-13T21:48:17.734Z            Hash: 90e96d65fc65e5d3a5ba                    
Time: 27952ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 20.1 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 547 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.02 MB [initial] [rendered]

webpack: Compiled successfully.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

這裡寫圖片描述

安裝NG-ZORRO

[root@angular NgzorroProject]# npm install ng-zorro-antd --save --unsafe-perm

> [email protected]4.6.1 install /root/NgzorroProject/node_modules/node-sass
> node scripts/install.js

Cached binary found at /root/.npm/node-sass/4.6.1/linux-x64-59_binding.node

> [email protected]4.6.1 postinstall /root/NgzorroProject/node_modules/node-sass
> node scripts/build.js

Binary found at /root/NgzorroProject/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]3.2.2 requires a peer of @angular/[email protected]^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]0.6.0-rc.3 requires a peer of @angular/[email protected]^4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]0.6.0-rc.3 requires a peer of @angular/[email protected]^4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]0.6.0-rc.3 requires a peer of @angular/[email protected]^4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected]0.6.0-rc.3 requires a peer of @angular/[email protected]^4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected]2.0.0-beta.12 requires a peer of @angular/[email protected]~4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/[email protected]2.0.0-beta.12 requires a peer of @angular/[email protected]~4.4.4 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected]1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]0.6.0-rc.3
added 148 packages and updated 1 package in 35.176s
[root@angular NgzorroProject]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

NG-ZORRO設定

程式碼

修改app.module.ts，將NgZorroAntdModule給import進來，只需要新增兩行即可。

[root@angular app]# cat app.module.ts 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
[root@angular app]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

特點

  • 根 module 使用 NgZorroAntdModule.forRoot()
  • 子 module 使用 NgZorroAntdModule
  • NgZorroAntdModule.forRoot() 方法可以接受配置檔案

修改HTML模板

程式碼

修改app.component.html

[[email protected] app]# cat app.component.html 
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<h2>Buttons</h2>
<button nz-button [nzType]="'primary'">primary</button>
<button nz-button [nzType]="'dashed'">dashed</button>
<button nz-button [nzType]="'default'">default</button>
<button nz-button [nzType]="'danger'">danger</button>
<button nz-button [nzShape]="'default'">defaultShape</button>
<button nz-button [nzShape]="'circle'">O</button>
<button nz-button [nzSize]="'large'">L</button>
<button nz-button [nzSize]="'default'">M</button>
<button nz-button [nzSize]="'small'">S</button>
<button nz-button [nzGhost]="true">L</button>
<button nz-button [nzLoading]="true">L</button>
[[email protected] app]#
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

特點

  • 元件和指令都是以nz-打頭，比如按鈕的nz-button
  • 元件和指令的屬性都是nz打頭其後駝峰命名，比如nzSize
  • 柵格劃為24等分

結果確認

這裡寫圖片描述

總結

這篇文章介紹瞭如何在專案中使用NG-ZORRO，期待國產能夠走得更好。

再分享一下我老師大神的人工智慧教程吧。零基礎！通俗易懂！風趣幽默！希望你也加入到我們人工智慧的隊伍中來！http://www.captainbed.net

相關推薦

Angular 4入門教程系列 15 NG-ZORRO的使用方式

這篇文章介紹一下Angular的優秀國內UI元件庫NG-ZORRO，並演示一下如何使引入NG-ZORRO到專案之中。 Why NG-ZORRO NG-ZORRO由阿里計算平臺事業部、阿里雲等不同部門的開發人員在原業務元件的基礎上構建而成，於2017/8/15在github上釋出了第一個對外的版本

Angular 4入門教程系列：17：NG-ZORRO：Layout

這篇文章介紹一下如何使用NG-ZORRO的layout相關的元件。 layout 概述 元件 說明 限制 [nz-layout] nz-layout佈局容器

Angular 4入門教程系列 14 PrimeNG的使用方式

這篇文章介紹一下Angular的老牌UI元件庫PrimeNG，並演示一下如何使引入PrimeNG到專案之中。 Why PrimeNG 使用PrimeNG有很多原因，比如 70多個完善的元件 開源 提高生產性 多種主題 高度可定製的模板 移動端使用者體驗的

Angular 4入門教程系列：9：TypeScript：ECMAScript之前世今生

在以例子為主的官方介紹中，我們學習到了npm install typescript，也看過tsconfig.json的typescript配置檔案的配置檔案，比如裡面寫的ES5到底是什麼。另外那些.ts的檔案，都是typescript的，跟angular有什

Angular 4入門教程系列：1：HelloWorld

ngular作為目前前端的一個重要選擇，加之背後站著google，得到了越來越多的開發者的青睞。但是發現沒有按照由淺入深地例項化的教程，雖然官網的教程已經不錯，但是初始入門的細節沒有提到，再加之網路等問題，決定把官網的教程替大家做一遍給大家留個筆記。同時可能會結合docker

Angular 4入門教程系列 18 編譯優化與nginx壓縮

才會 app angular 技術分享 view 註入攻擊 人工智 root 速度 angular使用缺省的方式進行ng build往往會生成一個幾M字節的vendor.bundle.js文件，使用–prod的選項進行編譯可以有效降低size，如果還不能滿足要求的話可以

Angular 入門教程系列：26：使用zorro進行頁面佈局

這篇文章介紹一下Angular應用的頁面佈局方式，這裡直接使用ng-zorro-antd的頁面佈局方式進行舉例。 zorro的頁面佈局 簡單的來說，zorro的layout有如下幾種元件 型別 說明 nz-layout 佈局

Angular 入門教程系列：38：升級小結(5.2->6.1)

在前面的文章中也曾經分別提到過，angular6由於存在一些稍大的變化，所以不能像Angular4到Angular5那樣基本無感地進行升級，這裡結合官方提示，簡單整理一下Angular5.2到目前穩定的

Angular 入門教程系列：35：Restful的增刪改查

這篇文章來介紹一下如何進行前後端互動，一個常見的場景就是前端呼叫後端提供的restful api，進行增刪改查，結合之前提到的新版本的http模組和rxjs，這篇文章首先使用kong搭建一個提供後端restful的api介面，對微服務的api增刪改查進行處理，以

Angular 入門教程系列 34 Angular6下的Http模塊與Rxjs6

系列 .get interval coff pcl UNC schedule span sch Angular6的升級，略有影響的地方應該主要集中在Rxjs6，而至於http，在Angular4.3之後就發生了變化，如果沒有欠債的話，升級應該很簡單。即使有欠債的話，修改的

asp.net core入門教程系列 （一）

home padding 方式 title sys 活性 elf tro ash Asp.Net Core簡介 ASP.NET Core 是一個全新的開源、跨平臺框架，可以用它來構建基於網絡連接的現代雲應用程序，比如：Web 應用，IoT（Internet Of Thin

WPF入門教程系列十——布局之Border與ViewBox（五）

last () put prev 裝飾 wpf 背景 .text 部分 九. Border Border 是一個裝飾的控件，此控件繪制邊框及背景，在 Border 中只能有一個子控件，若要顯示多個子控件，需要將一個附加的 Panel 控件放置在父 Border 中。然後可以

WPF入門教程系列二十一——DataGrid示例(一)

lec enum zip def 包含 布爾 edit 圖1 date 前面我們學習了ListView控件的使用示例，今天我們來學習DataGrid的有關知識。提到DataGrid 不管是Asp.Net中的網頁開發還是WinForm應用程序開發都會頻繁使用。通過它我們可以

WPF入門教程系列八——布局之Grid與UniformGrid（三）

input 接下來 toolbar wid ids 全部 ica tar 生成 五. Grid Grid顧名思義就是“網格”，它的子控件被放在一個一個實現定義好的小格子裏面，整齊配列。 Grid和其他各個Panel比較起來，功能最多也最為復雜。要使用Grid，首先要向Row

WPF入門教程系列十一——依賴屬性（一）

nts 如果 edev 出現 樣式 語法 寫法 屬性。 結構 一、依賴屬性基本介紹 　　本篇開始學習WPF的另一個重要內容依賴屬性。 大家都知道WPF帶來了很多新的特性，其中一個就是引入了一種新的屬性機制——依賴屬性。依賴屬性出現的目的是用來實現WPF中的樣式、自

WPF入門教程系列十四——依賴屬性（四）

nan out rmi strong too nim app controls ase 六、依賴屬性回調、驗證及強制值 我們通過下面的這幅圖，簡單介紹一下WPF屬性系統對依賴屬性操作的基本步驟： 　　借用一個常見的圖例，介紹一下WPF屬性系統對依賴屬性操作的基本

WPF入門教程系列十七——WPF中的數據綁定(三)

控件 命名空間 布局 獲得 key gif lns return 生日 四、 XML數據綁定 這次我們來學習新的綁定知識，XML數據綁定。XmlDataProvider 用來綁定 XML 數據，該XML數據可以是嵌入.Xmal文件的 XmlDataProvider

WPF入門教程系列四——Dispatcher介紹

匹配 添加 itl 屬性 one tree 獲得 都對 toggle 一、Dispatcher介紹 微軟在WPF引入了Dispatcher，那麽這個Dispatcher的主要作用是什麽呢？ 不管是WinForm應用程序還是WPF應用程序，實際上都是一個進

WPF入門教程系列六——布局介紹與Canvas（一）

mouse 建議 geo 自動調整 範圍 添加 ges ans colors 從這篇文章開始是對WPF中的界面如何布局做一個較簡單的介紹，大家都知道：UI是做好一個軟件很重要的因素，如果沒有一個漂亮的UI，功能做的再好也無法吸引很多用戶使用，而且沒有漂亮的界面，那麽普通用

WPF入門教程系列二十——ListView示例(二)

數據保存 save 如何實現 component private microsoft () sender wid 第四步、WPF後臺邏輯代碼編寫 在後臺用Entity Framework 6.1的Code First方式獲取數據庫中的數據。同時，在“刷新”按鈕的方法中進行數