淺談Angular專案中如何引入第三方UI函式庫（Angular Material）

本篇文章為大家介紹一下Angular專案中引入第三方UI函式庫（Angular Material）的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

環境:

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

##1. 第三方UI函式庫的選擇

Angular開發，除非你只有簡單一兩個頁面，否則引入第三方UI函式庫是不可或缺的。而具體用哪個庫，就需要考慮多方面的東西了。 【相關教學推薦：《

angular教學》】

例如：

• 流行程度

• 版本更新狀況（是否能跟進anuglar更新，bug是否及時修復）

• UI風格，是否適用於專案

• #入手難度

• 文件完善程度

市面上有許多Angular可用的類別庫，可用依專案、企業狀況去選擇。簡單列一下可選的UI庫。

• Angular Material: angular 官方UI函式庫。 https://material.angular.io/

• clarity: 國外的一套比較流行的框架， https://clarity.design/。

• NG-ZORRO: 阿里Ant Design的Angular版本。 https://ng.ant.design/docs/introduce/en

• #Element Angular：國內非常流行的基於Vue的Element，同樣有Angular版本。 https://element-angular.faas.ele.me/

• 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. 總結

#第三方元件各有優缺點
根據公司、專案的需求去選擇
Angular Material升級比較容易，官方支援。
更多程式相關知識，請造訪：

程式設計影片

！ ！

以上是淺談Angular專案中如何引入第三方UI函式庫（Angular Material）的詳細內容。更多資訊請關注PHP中文網其他相關文章！