目次
1. Angular のマテリアル デザイン
デザイン システム
4. Nebular
7. DevUI
ホームページ ウェブフロントエンド jsチュートリアル 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

Apr 30, 2021 am 09:57 AM
angular

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

Angular は、Web、モバイル Web、モバイル アプリケーション、ネイティブ アプリケーション、デスクトップ ネイティブ アプリケーションの複数のプラットフォームにまたがるフロントエンド フレームワークです。開発に伴い巨大なエコシステムが形成され、Angularをベースとしたコンポーネントライブラリが無数に存在します。

2021 年に Angular フレームワークを試してみたい場合は、次の Angular コンポーネント ライブラリが良い選択になるかもしれません。

1. Angular のマテリアル デザイン

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

最初にお勧めするのは、もちろん、Angular の公式 マテリアル コンポーネント ライブラリです。 , マテリアル デザイン は、Google のデザイン システムです。

この設計システムに基づいて、公式とコミュニティの両方が、Web 側を含むさまざまなコンポーネント ライブラリ (Angular/React/Vue##) を提供しています。 # )、モバイル版 (Android/iOS/Flutter) もあります。

その中でも、Angular 版のマテリアル コンポーネント ライブラリは、現在 Angular が指定する公式コンポーネント ライブラリとなっているため、Github のスター/フォークの数や毎週のダウンロード数など、非常に多くのユーザーが利用しています。 NPMではTOP1です。 [関連する推奨事項: "

angular チュートリアル "]

以下は 2021 年 4 月 19 日のデータです:

##インジケーター##スター フォーク5.7kNPM ウィークリー ダウンロードAngular のマテリアル デザイン
21.4k
891,480
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

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。Bootstrap

は、Twitter がフロントエンド開発のために立ち上げたオープンソース ツールキットです。また、応答性の高いモバイルファースト Web アプリケーションを開発するための非常に人気のある HTML/CSS/JS フレームワークです。

人気はどのくらいですか?一連のデータを見るだけでわかります。

#フレームワーク/ライブラリスター番号Vue182k167k149k72.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 が優位であるようです:

##スター##7.7kフォーク1.4k1.7kNPM 週次ダウンロード#バージョンのリリース時期から判断すると、NGX Bootstrap には次の要件が必要です以前:
Indicators NGブートストラップ NGX ブートストラップ
#5.3 k
386,485 235,662

インジケーター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 月プロジェクトが Angular 5 と Bootstrap 4 を使用する新しいプロジェクトの場合は、NG Bootstrap を使用することをお勧めします。それ以外の場合は、NGX Bootstrap を使用します。
上から データは、それが最初のリリースであるか、それとも最初のリリースであるかを示しています。最初の正式バージョンである NGX Bootstrap は NG Bootstrap よりも早く、特に最初の正式バージョンである NGX Bootstrap のリリース時期は NG Bootstrap より丸 2 年早いです。 つまり、NGX Bootstrap は以前のライブラリであり、Angular 2 と Bootstrap 3 をサポートできるのに対し、NG Bootstrap は比較的新しいので、使用するには Angular 5 と Bootstrap 4 が必要であることが大まかに理解できます。
3. NG Zorro

推奨される 3 番目の Angular コンポーネント ライブラリは、

Ant Design

デザイン システム

に基づいています。 NG Zorro

コンポーネント ライブラリ。 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

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.6kNPM ウィークリー ダウンロード
スター
35,941# ###############################

4. Nebular

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

Nebular は、Eva Design 設計仕様に基づく、カスタマイズ可能な Angular UI ライブラリです。 40 を超える UI コンポーネント、4 つのビジュアル テーマ、認証およびセキュリティ モジュール。

Nebular に含まれるコンポーネントは 40 個とそれほど多くありませんが、テーマ パッケージ、ログイン認証、ロール認証管理、管理システムなどの実用的なツールが多数含まれています。

このニーズがある場合は、まだ試してみることができます。

Nebular のリリース時期は、Zorro のリリース時期と非常に近いです。最初のバージョンは 2017 年 8 月にリリースされ、最初の正式バージョンは翌年にリリースされました。ただし、Github Star/ の毎週のダウンロードに基づいています。 Fork と NPM 見てください、Nebular はわずかに劣っています:

##IndicatorValueスター番号 ##7k##フォーク2.6kNPM 毎週のダウンロード5.PrimeNG
17,037

次にお勧めするもの 2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。PrimeNG

も外部の Angular コンポーネント ライブラリです。これは古い Angular コンポーネント ライブラリです。最初のバージョンは 2016 年 2 月にリリースされ、公式マテリアルよりも前でした。

PrimeNG には、合計 90 個のコンポーネントを含む非常に豊富なコンポーネントがあり、現在市場に出ている中で最も包括的な Angular コンポーネント ライブラリと言えるでしょう。

以下は PrimeNG のデータです:

IndicatorValueスターフォーク3.3kNPMweeklyDownloads##6. 明瞭さ
6.7k
260,712

Clarity2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。 は、

Clarity Design

設計言語に基づいた独自の設計システムを備えた Angular コンポーネント ライブラリでもあります。これは Teambition の Clarity Design と同じ名前ですが、別の会社の別の製品ですので、混同しないでください。 #インジケーター

値スター6.2k701NPM ウィークリー ダウンロード 18,014
フォーク

7. DevUI

2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。

最後にお勧めしたいのは、DevUI をベースにした DevUI という新しい国産 Angular コンポーネント ライブラリです。デザイン デザイン言語。

DevUI は、エンタープライズ ミッドエンドおよびバックエンド製品向けのオープンソース フロントエンド ソリューションであり、没入感 柔軟性、およびsimplification では、デザイナーが実際のニーズに応え、大多数の人のためにデザインし、センセーショナルで人目を引くデザインを拒否することを提唱しています。

DevUI は Huawei Cloud DevCloud R&D ツール システムからインキュベートされており、クールなスタイルを追求するのではなく、ツールが安定して使用できるかどうかを重視するため、ToB ツール製品に最適です。それが本当にユーザーにツールのことを忘れさせ、ツールの使用中にフロー状態を実現できるかどうか。

DevCloud は豊富なシナリオを備えた研究開発ツール製品であるため、DevUI には独自の利点があり、Gan 特別ピクチャなど、他の UI コンポーネント ライブラリにはない特別なコンポーネントが多数提供されています 象限写真、および新しい カテゴリ検索エルフ ナビゲーションなど。

DevUI は、2017 年の初めから多くの DevCloud ビジネスで使用されています。長年を経て、DevUI は多数の DevCloud オンライン ユーザーのテストに耐え、安定した、効率的でスムーズな Angular コンポーネント ライブラリになりました。

あなたが ToBツール製品 を開発している場合、DevUI は非常に良い選択となるでしょう。

#インジケーター値スターFork106
638
プログラミング関連の知識の詳細については、次を参照してください。

プログラミングビデオ! !

以上が2021 年に試してみる価値のある 7 つの Angular フロントエンド コンポーネント ライブラリ、ぜひ集めてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Angular のメタデータとデコレータについて話しましょう Angular のメタデータとデコレータについて話しましょう Feb 28, 2022 am 11:10 AM

この記事では、Angular の学習を継続し、Angular のメタデータとデコレータを理解し、それらの使用法を簡単に理解します。

Ubuntu 24.04 に Angular をインストールする方法 Ubuntu 24.04 に Angular をインストールする方法 Mar 23, 2024 pm 12:20 PM

Angular.js は、動的アプリケーションを作成するための無料でアクセスできる JavaScript プラットフォームです。 HTML の構文をテンプレート言語として拡張することで、アプリケーションのさまざまな側面を迅速かつ明確に表現できます。 Angular.js は、コードの作成、更新、テストに役立つさまざまなツールを提供します。さらに、ルーティングやフォーム管理などの多くの機能も提供します。このガイドでは、Ubuntu24 に Angular をインストールする方法について説明します。まず、Node.js をインストールする必要があります。 Node.js は、ChromeV8 エンジンに基づく JavaScript 実行環境で、サーバー側で JavaScript コードを実行できます。ウブにいるために

Angular Learning State Manager NgRx の詳細な説明 Angular Learning State Manager NgRx の詳細な説明 May 25, 2022 am 11:01 AM

この記事では、Angular のステートマネージャー NgRx について深く理解し、NgRx の使用方法を紹介します。

Angular のサーバーサイド レンダリング (SSR) について説明する記事 Angular のサーバーサイド レンダリング (SSR) について説明する記事 Dec 27, 2022 pm 07:24 PM

Angular Universal をご存知ですか?これは、Web サイトがより優れた SEO サポートを提供するのに役立ちます。

フロントエンド開発に PHP と Angular を使用する方法 フロントエンド開発に PHP と Angular を使用する方法 May 11, 2023 pm 04:04 PM

インターネットの急速な発展に伴い、フロントエンド開発テクノロジーも常に改善され、反復されています。 PHP と Angular は、フロントエンド開発で広く使用されている 2 つのテクノロジーです。 PHP は、フォームの処理、動的ページの生成、アクセス許可の管理などのタスクを処理できるサーバー側スクリプト言語です。 Angular は、単一ページ アプリケーションの開発やコンポーネント化された Web アプリケーションの構築に使用できる JavaScript フレームワークです。この記事では、PHPとAngularをフロントエンド開発に使用する方法と、それらを組み合わせる方法を紹介します。

Angular + NG-ZORRO でバックエンド システムを迅速に開発 Angular + NG-ZORRO でバックエンド システムを迅速に開発 Apr 21, 2022 am 10:45 AM

この記事では、Angular の実践的な経験を共有し、angualr と ng-zorro を組み合わせてバックエンド システムを迅速に開発する方法を学びます。

Angular で Monaco エディターを使用する方法の簡単な分析 Angular で Monaco エディターを使用する方法の簡単な分析 Oct 17, 2022 pm 08:04 PM

Angularでモナコエディタを使用するにはどうすればよいですか?以下の記事は、最近業務で使用したangularでのmonaco-editorの使い方を記録したものですので、皆様のお役に立てれば幸いです。

Angular の独立したコンポーネントの簡単な分析とその使用方法を説明します。 Angular の独立したコンポーネントの簡単な分析とその使用方法を説明します。 Jun 23, 2022 pm 03:49 PM

この記事では、Angular の独立コンポーネント、Angular で独立コンポーネントを作成する方法、および既存のモジュールを独立コンポーネントにインポートする方法について説明します。

See all articles