###### tags: `Web` `Front End` `Angular`

# Angular UI 套件

在開發過程中為了快速建置UI，故大多我們會使用現有UI套件來輔助開發。目前Angular UI套件使用上選擇很多，<font color="#f00">但不管用哪一套UI套件，盡量都不要做混用。</font>

本篇選用Angular Material與Ant Angular做使用說明。，

## [Ant Angular(NG-ZORRO)](https://ng.ant.design/docs/introduce/zh)

Ant Design 的 Angular 實現，結合 Material CDK 優秀的元件，開發和服務於企業級後臺產品。

### [安裝](https://ng.ant.design/docs/introduce/en)

- Step1:安裝Angular CLI
- npm install -g @angular/cli
- Step2:新增專案
- ng new PROJECT_NAME
- Step3:附加NG-ZORRO
- ng add ng-zorro-antd
- Enable icon dynamic loading 啟用圖示動態載入 ->Y
- Set up custom theme file 設定自定義主題檔案 ->Y
- choose your locale code 選擇區域設定程式碼 ->ZH-CN
- choose template to create project 選擇模板建立專案 -> sidemenu
- 
- Step4:啟動
- ng serve啟動後就會看到原本的ng專案Sample換成NG-ZORRO的專案
- 

可以比較安裝前後app.module的不同，可以看到NG-ZRROR已經將前端必大致會用到的Modeule例如HttpClientModule等都加進去了~



### 使用
接著我們要在專案使用NG-ZORRO套件元件，建議在使用前自行先新增一個Module專門引用NG-ZORRO元件使用

- Step1:在src/app下新增module資料夾
- Step2:到src/app/module路徑下下cmd新增module
- ng g m ngzrrormodule
- Step3:到app.module與引入ngzrrormodule

- [Step4:到官網Component選用自己想用的UI元件](https://ng.ant.design/components/overview/en)
- Step5:選用Button元件，先在ngzrrormodule引用Button元件
- 加入import { NzButtonModule } from 'ng-zorro-antd/button';
- 在NgModule,exports加入NzButtonModule
- PS:如果發現出現Appears in the NgModule.imports of AppModule問題，下ng serve讓他跑過一次編譯就可以解掉了

- Step6:至page/welcome下的html code將button元件html貼上去

      <button nz-button nzType="primary" nzShape="circle"><i nz-icon nzType="search"></i></button>

- Step7:因為ng zrror的welcome page是一個module，要把它引入到app.module才會吃到ngzrrormodule的套件引用!

做完以上步驟下ng serve我們就可以看到專案已經套入NG ZRROR的套件效果了


## Angular Material(待寫)

Material Design為Google提出的UI設計準則，因此根據此設計準則在很多UI套件設計上都會看到，Angular也不例外...但Material版本的套件使用者對於CSS與HTML排版需要較為熟練，在前端設計門檻相對NG-ZRROR會高一些。

### 安裝

### 使用