什么是 Angular？link
本主題會幫你了解 Angular：什么是 Angular？它有哪些優勢？當構建應用時它能為你提供什么幫助？
- 一個基於組件的框架，用於構建可伸縮的 Web 應用
- 一組完美集成的庫，涵蓋各種功能，包括路由、表單管理、客戶端-服務器通信等
- 一套開發工具，可幫助你開發、構建、測試和更新代碼
快速上手
NG-ZORRO 致力於提供給程序員愉悅的開發體驗。
官方指南假設你已了解關於 HTML、CSS 和 JavaScript 的中級知識，並且已經完全掌握了 Angular 及配套設施的正確開發方式。如果你剛開始學習前端或者 Angular ，將框架作為你的第一步可能不是最好的主意 —— 掌握好基礎知識再來吧！
在線演示#
最簡單的使用方式參照以下 StackBlitz 演示，也推薦 Fork 本例來進行 Bug Report，注意不要在實際項目中這樣使用。
第一個本地實例#
實際項目開發中，你會需要對 TypeScript 代碼的構建、調試、代理、打包部署等一系列工程化的需求。 我們強烈建議使用官方的 @angular/cli 工具鏈輔助進行開發，下面我們用一個簡單的實例來說明。
安裝Node.js
https://nodejs.org/download/release/ 所有版本大全
我自己下載的版本
https://nodejs.org/download/release/v12.14.0/
windows 選擇 node-v12.14.0-x64.msi 進行安裝
安裝npm
現在node都集成了npm 在 nodejs\node_modules\npm所有就不用下載了
安裝腳手架工具#
如果你想了解更多CLI工具鏈的功能和命令，建議訪問 Angular 了解更多。
$ npm install -g @angular/cli創建一個項目#
在創建項目之前，請確保
@angular/cli已被成功安裝。
執行以下命令，@angular/cli 會在當前目錄下新建一個名稱為 PROJECT-NAME 的文件夾，並自動安裝好相應依賴。
$ ng new PROJECT-NAME注意: 有可能會報錯類似下面這種
The Angular CLI requires a minimum Node.js version of either v12.14 or v14.15.
表示你本地node 和Angular 不復核, 根據提示下載低版本 node 12.14.0 別下載高版本的14.15
初始化配置#
進入項目文件夾，執行以下命令后將自動完成 ng-zorro-antd 的初始化配置，包括引入國際化文件，導入模塊，引入樣式文件等工作。
$ ng add ng-zorro-antd
開發者可以通過增加參數來完成個性化的初始化配置，例如國際化或者自定義主題等，詳細可以參考 腳手架 部分。
開發調試#
一鍵啟動調試，運行成功后顯示歡迎頁面。
$ ng serve --port 0 --open
使用web工具打開項目
我這里使用HBuilder來打開項目,其他工具也行
ng serve 命令會啟動開發服務器、監視文件，並在這些文件發生更改時重建應用。
--open（或者只用 -o 縮寫）選項會自動打開你的瀏覽器，並訪問 http://localhost:4200/。
注意:
- 如果啟動后出現 Error: spawn xxxx ENOENT 那么可能就是你環境變量沒配好,或者是你剛下載了node配置了環境而沒重啟電腦
- 360游覽器好像不支持使用Angular 谷歌我試了是支持的 ,其他的游覽器我沒試過
構建和部署#
$ ng build --prod文件會被打包到 dist 目錄中。
手動安裝#
如果想自己維護工作流，理論上你可以利用 Angular 生態圈中的 各種腳手架進行開發，如果遇到問題可參考我們所使用的 配置 進行定制。
安裝組件#
$ npm install ng-zorro-antd --save引入樣式#
使用全部組件樣式#
該配置將包含組件庫的全部樣式，如果只想使用某些組件請查看 使用特定組件樣式 配置。
在 angular.json 中引入了
{
"styles": [
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}在 style.css 中引入預構建樣式文件
@import "~ng-zorro-antd/ng-zorro-antd.min.css";在 style.less 中引入 less 樣式文件
@import "~ng-zorro-antd/ng-zorro-antd.less";使用特定組件樣式#
由於組件之間的樣式也存在依賴關系，單獨引入多個組件的 CSS 可能導致 CSS 的冗余。
使用特定組件樣式時前需要先引入基本樣式(所有組件的共用樣式)。
在 style.css 中引入預構建樣式文件
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本樣式 */ @import "~ng-zorro-antd/button/style/index.min.css"; /* 引入組件樣式 */在 style.less 中引入 less 樣式文件
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本樣式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入組件樣式 */引入組件模塊#
最后你需要將想要使用的組件模塊引入到你的 app.module.ts 文件和特性模塊中。
以下面的 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>