【51CTO.com快譯】眾所周知，由Google開(kāi)發(fā)，并基于TypeScript的Angular，能夠交付出具有出色Web性能的各種應(yīng)用。隨著Angular能夠得到持續(xù)的更新，作為JavaScript經(jīng)典框架之一的Angular，在GitHub上已累計(jì)了超過(guò)60,000個(gè)星。目前，諸如PayPal、Upwork和Netflix等明星公司，都在其前端開(kāi)發(fā)的過(guò)程中使用到了Angular。

[[354489]]

由于Angular是目前公認(rèn)的最佳Web開(kāi)發(fā)框架，因此市場(chǎng)上不同的社區(qū)貢獻(xiàn)者們?yōu)樗_(kāi)發(fā)出了許多組件庫(kù)。面對(duì)那些林林總總的組件庫(kù)，您也許會(huì)深陷“選擇困難癥”。那么，下面我將為您深入地探究每個(gè)組件庫(kù)，以方便您及時(shí)作出最合適的選擇。

1.Angular Material

以前被稱(chēng)為Material2的Angular Material，是由Angular和TypeScript建立的官方組件庫(kù)。它主要致力于實(shí)現(xiàn)Google的material設(shè)計(jì)。Angular Material能夠遵循各種UI的最佳實(shí)踐，其中包括用戶能夠從各種命令行模板中，迅速添加新的功能。

Github星級(jí)：20,000+

每周npm下載量：480,000+

最近更新版本：8.0.1

您可以在該組件庫(kù)中使用的Angular組件包括：

• 彈出式snackbar和對(duì)話框的創(chuàng)建
• 各種進(jìn)度條
• Ico和chip圖標(biāo)
• 包括網(wǎng)格列表、選項(xiàng)卡，購(gòu)物車(chē)等布局組件
• 工具欄菜單和導(dǎo)航欄

2.NG Bootstrap

該Angular庫(kù)提供了bootstrap 4的各種組件，旨在取代Angular UI-bootstrap。市場(chǎng)上普遍認(rèn)為NG Bootstrap程序提供了較高的測(cè)試覆蓋率，同時(shí)也刪除了所有第三方的JS依賴(lài)項(xiàng)。

Github星級(jí)：7000+

每周npm下載量：200,000+

最近更新版本：5.0.0-rc.0

您可以在該組件庫(kù)中使用的Angular組件包括：

• 提示工具(tooltip)
• 彈窗
• 輸入提示(Typehead)
• 靜態(tài)框(Modal)
• 日期選擇器

3.Ng Semantic UI

Ng Semantic庫(kù)是基于Angular 2和Semantic UI構(gòu)建的，也是市場(chǎng)上最流行的、被使用最多的UI組件之一。

Github星級(jí)：1000+

每周npm下載量：461+

最近更新版本：1.1.13

您可以在該組件庫(kù)中使用的Angular組件包括：

• 消息
• 評(píng)級(jí)
• 菜單
• 列表
• 分段
• 選擇
• 按鈕
• 側(cè)邊欄
• 標(biāo)記(Flag)

4.Prime NG

Prime NG是Angular框架中最負(fù)盛名的組件庫(kù)之一，其中包含了涉及到各種主題的80多個(gè)UI組件?；赑rime NG的專(zhuān)業(yè)設(shè)計(jì)，用戶能夠輕松地自定義各種組件。這也正是許多明星公司(例如eBay)使用該組件庫(kù)的主要原因。

Github星級(jí)：6000+

每周npm下載量：178,000+

最近更新版本：8.0.0

您可以在該組件庫(kù)中使用的Angular組件包括：

• 上載文件組件
• 面板和燈箱放大效果(lightbox)等組件
• 工具欄和滾動(dòng)面板
• 頁(yè)簽(Tabview)面板
• 包括數(shù)據(jù)列表和數(shù)據(jù)網(wǎng)格等數(shù)據(jù)組件

5.Clarity

來(lái)自VMware開(kāi)源設(shè)計(jì)系統(tǒng)的Clarity，能夠?qū)TML和CSS組件與Angular組件結(jié)合在一起使用。這對(duì)于設(shè)計(jì)人員和開(kāi)發(fā)人員是非常實(shí)用的。

Github星級(jí)：6000+

每周npm下載量：11,000+

最近更新版本：2.0.1

您可以在該組件庫(kù)中使用的Angular組件包括：

• 登錄頁(yè)面
• 網(wǎng)格
• 密碼
• 進(jìn)度條
• 各種警告
• 撥動(dòng)開(kāi)關(guān)效果
• 單選按鈕

6.NGX Bootstrap

該組件庫(kù)提供了Angular下的所有bootstrap組件。由于帶有各種bootstrap功能，因此它廣受Angular開(kāi)發(fā)人員的喜愛(ài)和使用。NGX Bootstrap的另一個(gè)獨(dú)特之處在于它既能夠與PC主機(jī)，又能夠與移動(dòng)設(shè)備相兼容。

Github星級(jí)：5100+

每周npm下載量：11,000+

最近更新版本：2.0.1

您可以在該組件庫(kù)中使用的Angular組件包括：

• 分頁(yè)
• 各種警告
• 日期選擇器
• 輸入提示
• 伸縮折疊(Collapse)
• 嵌套折疊(Accordion)

7.NG ZORRO

由TypeScript編寫(xiě)的NG ZORRO，是基于Ant架構(gòu)而設(shè)計(jì)的，因此它提供了一整套企業(yè)級(jí)的UI。作為公認(rèn)的Web應(yīng)用開(kāi)發(fā)(請(qǐng)參見(jiàn)-- https://citrusbug.com/services/web-application-development)最佳解決方案，NG ZORRO經(jīng)常被用在開(kāi)發(fā)SaaS應(yīng)用等場(chǎng)景中(請(qǐng)參見(jiàn)-- https://citrusbug.com/services/saas-application-development)。目前，正在使用Angular NG-Zorro組件庫(kù)的明星公司包括：

• 阿里巴巴
• Apache Flink
• Thoughworks

Github星級(jí)：6800+

每周npm下載量：33,000+

最近更新版本：7.5.1

小結(jié)

上面便是我們對(duì)目前七種最佳Angular組件庫(kù)的介紹?？梢?jiàn)，不同的應(yīng)用場(chǎng)景，適合采用不同的組件庫(kù)，并且需要配合恰當(dāng)?shù)腏avaScript框架，來(lái)構(gòu)建Angular Web應(yīng)用。希望上述列舉的要點(diǎn)能夠?qū)δ陧?xiàng)目的實(shí)際選擇中，提供幫助。

原文標(biāo)題：7 Best Angular Component Libraries to Use in 2020，作者：Malkesh Sondagar

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】