![2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。](https://img.php.cn/upload/article/000/000/024/608b637d7945a806.jpg)
Angularは、Web、モバイル Web、モバイル アプリケーション、ネイティブ アプリケーション、デスクトップ ネイティブ アプリケーションの複数のプラットフォームにまたがるフロントエンド フレームワークです。開発に伴い巨大なエコシステムが形成され、Angularをベースとしたコンポーネントライブラリが無数に存在します。
2021 年に Angular フレームワークを試してみたい場合は、次の Angular コンポーネント ライブラリが良い選択になるかもしれません。
1. Angular のマテリアル デザイン
![1619747599175782021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。](https://img.php.cn/upload/image/340/131/396/1619747599175782021%20%E5%B9%B4%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%207%20%E3%81%A4%E3%81%AE%20Angular%20%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82)
最初にお勧めするのは、もちろん、Angular の公式マテリアルコンポーネント ライブラリです。 ,マテリアル デザインは、Google のデザイン システムです。
この設計システムに基づいて、公式とコミュニティの両方が、Web 側を含むさまざまなコンポーネント ライブラリ (Angular/React/Vue##) を提供しています。 # )、モバイル版 (Android/iOS/Flutter) もあります。
その中でも、Angular 版のマテリアル コンポーネント ライブラリは、現在 Angular が指定する公式コンポーネント ライブラリとなっているため、Github のスター/フォークの数や毎週のダウンロード数など、非常に多くのユーザーが利用しています。 NPMではTOP1です。 [関連する推奨事項: "
angular チュートリアル"]
以下は 2021 年 4 月 19 日のデータです:
##インジケーター
値 |
|
##スター
21.4k |
| フォーク
5.7k
|
| NPM ウィークリー ダウンロード
891,480 |
|
Angular のマテリアル デザイン
Angular 2 に基づく最初のアルファ バージョンは、早くも 2016 年 3 月にリリースされました:
2.0.0-alpha.0は 1 年かけて進化しました。バージョン 2.0 は長い間リリースされておらず、Angular 5 に基づく5.0.0の正式バージョンがリリースされたのは翌年の 12 月でした。
ただし、マテリアル デザイン for Angular は最も古い Angular コンポーネント ライブラリではなく、後ほど紹介する PrimeNG の方が先に誕生しましたが、マテリアルが最も人気が高く人気があるのは間違いありません。
2. NG/NGX Bootstrap
Bootstrap
は、Twitter がフロントエンド開発のために立ち上げたオープンソース ツールキットです。また、応答性の高いモバイルファースト Web アプリケーションを開発するための非常に人気のある HTML/CSS/JS フレームワークです。
人気はどのくらいですか?一連のデータを見るだけでわかります。
#フレームワーク/ライブラリ
スター番号
|
|
Vue
182k
|
反応 |
167k
|
ブートストラップ |
149k
|
角度 |
72.5k
|
上記のデータからもわかるように、Bootstrap は Angular フレームワークよりも星の数が多く、Bootstrap の人気が伺えますので、Bootstrap をベースとした Angular コンポーネント ライブラリも人気が高いことは想像に難くありません。 Bootstrap に基づく 2 つの主要な Angular コンポーネント ライブラリがあります:
NG Bootstrap と NGX Bootstrap は、2 つの異なるプロジェクト チームによる 2 つの異なるプロジェクトであり、どちらも jQuery を使用せずに Bootstrap のみを使用して Angular で使用できます。主な違いは、サポートされている Bootstrap のバージョンです。
- NGX Bootstrap は Bootstrap 3 および 4 をサポートします。
- NG Bootstrap は Bootstrap 4 をサポートし、Angular5 が必要です。
判定Github Star/Fork と NPM の毎週のダウンロードからも同様に比較可能であり、NG Bootstrap が優位であるようです:
Indicators |
NGブートストラップ |
NGX ブートストラップ |
##スター
| ##7.7k
#5.3 k |
| フォーク
1.4k
| 1.7k
|
| NPM 週次ダウンロード
386,485 |
235,662 |
|
#バージョンのリリース時期から判断すると、NGX Bootstrap には次の要件が必要です以前:
インジケーター
NG ブートストラップ
| NGX ブートストラップ
|
|
最初のリリース バージョン
1.0.0-alpha.0 2016 年 7 月
| 1.0.1-beta.2 2016 年 1 月##最初の正式バージョン
| 1.0.0 2018 年 1 月
| 1.0.4 2016 年 2 月
|
上から データは、それが最初のリリースであるか、それとも最初のリリースであるかを示しています。最初の正式バージョンである NGX Bootstrap は NG Bootstrap よりも早く、特に最初の正式バージョンである NGX Bootstrap のリリース時期は NG Bootstrap より丸 2 年早いです。 |
つまり、NGX Bootstrap は以前のライブラリであり、Angular 2 と Bootstrap 3 をサポートできるのに対し、NG Bootstrap は比較的新しいので、使用するには Angular 5 と Bootstrap 4 が必要であることが大まかに理解できます。 |
プロジェクトが Angular 5 と Bootstrap 4 を使用する新しいプロジェクトの場合は、NG Bootstrap を使用することをお勧めします。それ以外の場合は、NGX Bootstrap を使用します。
3. NG Zorro推奨される 3 番目の Angular コンポーネント ライブラリは、 Ant Designデザイン システムに基づいています。 NG Zorroコンポーネント ライブラリ。![1619747617760812021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。](https://img.php.cn/upload/image/930/465/480/1619747617760812021%20%E5%B9%B4%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%207%20%E3%81%A4%E3%81%AE%20Angular%20%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82) Ant Design は Ant Financial の設計言語であり、長年の反復と蓄積を経て、その UI 設計アイデアは一連の事実上の標準となり、多くのフロントエンド開発者や企業によって求められ、愛されています。は、React 開発者の手に渡った魔法の武器でもあります。Ant Design の Angular 実装として、NG Zorro は Ant Design のユニークなアイデアと究極のエクスペリエンスを継承するだけでなく、Angular フレームワークの利点と機能も組み合わせています。コンポーネントのスタイルは Ant Design の最新バージョンと同期され、コンポーネントのインターフェイスも Ant Design の React バージョンと一貫性が保たれます。Zorro は中国で最も人気のある Angular コンポーネント ライブラリであると言われていますが、異論のある人はいないと思います。 2017 年 8 月、Zorro は正式にオープン ソース となり、最初のバージョン0.5.0-rc.0 をリリースしました。1 年間の進化を経て、 2 番目のバージョン 1.0 は 6 月にリリースされました。Zhihu から判断すると、Zorro のコミュニティの反応は非常に良好です: https://www.zhihu.com/question/63992236以下は 2021 年 4 月 19 日のデータです:
#インジケーター値
スター |
| 7.4k
#フォーク
| 2.6k
| NPM ウィークリー ダウンロード
35,941# ###############################4. Nebular![1619747630708912021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。](https://img.php.cn/upload/image/924/257/242/1619747630708912021%20%E5%B9%B4%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%207%20%E3%81%A4%E3%81%AE%20Angular%20%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82)
Nebularは、Eva Design設計仕様に基づく、カスタマイズ可能な Angular UI ライブラリです。 40 を超える UI コンポーネント、4 つのビジュアル テーマ、認証およびセキュリティ モジュール。 Nebular に含まれるコンポーネントは 40 個とそれほど多くありませんが、テーマ パッケージ、ログイン認証、ロール認証管理、管理システムなどの実用的なツールが多数含まれています。 このニーズがある場合は、まだ試してみることができます。 Nebular のリリース時期は、Zorro のリリース時期と非常に近いです。最初のバージョンは 2017 年 8 月にリリースされ、最初の正式バージョンは翌年にリリースされました。ただし、Github Star/ の毎週のダウンロードに基づいています。 Fork と NPM 見てください、Nebular はわずかに劣っています:
##Indicator
| Value
|
スター番号
| ##7k
| ##フォーク
2.6k
|
| NPM 毎週のダウンロード
17,037 |
|
5.PrimeNG
次にお勧めするもの PrimeNG も外部の Angular コンポーネント ライブラリです。これは古い Angular コンポーネント ライブラリです。最初のバージョンは 2016 年 2 月にリリースされ、公式マテリアルよりも前でした。PrimeNG には、合計 90 個のコンポーネントを含む非常に豊富なコンポーネントがあり、現在市場に出ている中で最も包括的な Angular コンポーネント ライブラリと言えるでしょう。 以下は PrimeNG のデータです:
Indicator
Value
|
|
スター
6.7k |
| フォーク
3.3k
|
| NPMweeklyDownloads
260,712 |
| ##6. 明瞭さ
Clarity は、 Clarity Design設計言語に基づいた独自の設計システムを備えた Angular コンポーネント ライブラリでもあります。これは Teambition のClarity Designと同じ名前ですが、別の会社の別の製品ですので、混同しないでください。#インジケーター
値
|
| スター
6.2k
|
フォーク | 701
| NPM ウィークリー ダウンロード
|
18,014
|
7. DevUI![1619747646624602021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。](https://img.php.cn/upload/image/855/672/163/1619747646624602021%20%E5%B9%B4%E3%81%AB%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B%E4%BE%A1%E5%80%A4%E3%81%AE%E3%81%82%E3%82%8B%207%20%E3%81%A4%E3%81%AE%20Angular%20%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%20%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%20%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82)
最後にお勧めしたいのは、DevUI をベースにしたDevUIという新しい国産 Angular コンポーネント ライブラリです。デザインデザイン言語。 DevUI は、エンタープライズ ミッドエンドおよびバックエンド製品向けのオープンソース フロントエンド ソリューションであり、没入感 、柔軟性 、およびsimplification では、デザイナーが実際のニーズに応え、大多数の人のためにデザインし、センセーショナルで人目を引くデザインを拒否することを提唱しています。 DevUI は Huawei Cloud DevCloud R&D ツール システムからインキュベートされており、クールなスタイルを追求するのではなく、ツールが安定して使用できるかどうかを重視するため、ToB ツール製品に最適です。それが本当にユーザーにツールのことを忘れさせ、ツールの使用中にフロー状態を実現できるかどうか。 DevCloud は豊富なシナリオを備えた研究開発ツール製品であるため、DevUI には独自の利点があり、Gan 特別ピクチャなど、他の UI コンポーネント ライブラリにはない特別なコンポーネントが多数提供されています、象限写真、および新しいカテゴリ検索、エルフ ナビゲーションなど。 DevUI は、2017 年の初めから多くの DevCloud ビジネスで使用されています。長年を経て、DevUI は多数の DevCloud オンライン ユーザーのテストに耐え、安定した、効率的でスムーズな Angular コンポーネント ライブラリになりました。 あなたがToB のツール製品 を開発している場合、DevUI は非常に良い選択となるでしょう。
#インジケーター
| 値
|
スター
|
638 |
Fork
| 106
|
プログラミング関連の知識の詳細については、次を参照してください。プログラミングビデオ! ! |
|
|
以上が2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。