Angular入門到精通系列教程（5）- 第三方UI庫（Angular Material）

• 1. 第三方UI庫的選擇
• 2. Angular Material
  • 2.1. 優缺點
    • 2.1.1. 優點
    • 2.1.2. 缺點
  • 2.2. 引入到項目
• 3. 總結

環境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: VSCode

1. 第三方UI庫的選擇

Angular開發，除非你只有簡單一兩個頁面，否則引入第三方UI庫就是必不可少的。而具體用哪個庫，就需要考慮多方面的東西了。比如：

1. 流行程度
2. 版本更新情況 （是否能跟進anuglar更新，bug是否及時修復）
3. UI風格，是否適用於項目
4. 入手難易程度
5. 文檔完善程度

市面上有很多Angular可用的類庫，可用根據項目、企業情況去選擇。簡單列一下可選的UI庫。

1. Angular Material: angular 官方UI庫。https://material.angular.io/
2. clarity: 國外的一套比較流行的框架， https://clarity.design/。
3. NG-ZORRO: 阿里Ant Design的Angular版本。 https://ng.ant.design/docs/introduce/en
4. Element Angular：國內非常流行的基於Vue的Element，同樣有Angular版本。 https://element-angular.faas.ele.me/
5. Kendo UI。很多很強大，只是要收費。https://www.telerik.com/kendo-angular-ui

2. Angular Material

2.1. 優缺點

2.1.1. 優點

• 官方UI組件
• 最標准的Material實現
• 緊跟Angular核心組件的更新進度
• 官方支持與Angular的同步升級

2.1.2. 缺點

• 組件不像其他框架那么多，但是基本夠用
• 風格不是特別像國內的框架

2.2. 引入到項目

1. 根目錄下執行下面命令：

ng add @angular/material

2. import 到頁面所屬的module，或者是app.module.ts中。

// import MatSliderModule
import { MatSliderModule } from '@angular/material/slider';

…
@NgModule ({....
  imports: [...,
  MatSliderModule,
…]
})

3. 總結

1. 第三方組件各有優缺點
2. 根據公司、項目的需求去選擇
3. Angular Material升級更容易，官方支持。