Aurelia と Angular は人気のある JavaScript クライアント フレームワークで、Web、モバイル、デスクトップ向けの最新のアプリケーションを構築する力を与えてくれます。 このブログ記事では、Aurelia と Angular を比較し、両者の長所と短所とともに、Aurelia の利点と Angular の利点を強調しました。


Aurelia は控えめでありながら、その使い勝手はよいです。 Angularのような設定は必要なく、いくつかの簡単な規約に従うだけでよいのです。 その構文は覚えやすく、Typescript や vanilla JavaScript でもコンポーネントを構築できます。
Aurelia と Angular は、どちらも Components のアプローチに基づいており、多くの点で類似しています。 Eisenbergは以前GoogleのAngular 2チームの社員でしたが、意見の相違から退職し、Web標準に準拠した「控えめな」プラットフォームを構築することにしました。 設定よりも規約」というアプローチが、「控えめ」である理由です。
Aurelia では、コンポーネントを作成する場合、コンポーネントにアノテーションを付けるデコレータは必要ありませんし、メタデータの指定も気にする必要はなく、ただ単純な規約に従っていれば、Aurelia がそれだけで多くのことをやってくれるのです。 Hello World!”を表示する基本的なコンポーネントを作成します。「と表示する基本的なコンポーネントを作成する場合、Typescript のコードは次のようになります。

HTML テンプレートです。

あなたのコンポーネントのデフォルト セレクタは <hello></hello> で、その HTML テンプレートはファイル名の規則によって識別されます。
Angular
の同じコンポーネント
Typescript コード:

HTML テンプレートを使用します。

AngularでもngModuleの宣言セクションでコンポーネントを宣言する必要があります。

Aureliaではコンポーネントの作成がよりシンプルなようですが?
バインディング構文
Aurelia の構文は学びやすく、覚えやすいです。
値バインディング構文: attribute.command=”expression”
e.g. <input value.bind=”firstName”>
Event binding syntax: event.command=”expression”
e.g. <button click.FirstName
e.trigger=”sayHello()”>Say Hello</button>
Class binding:
e.g. <div class.bind=”isActive ? ‘active’ : ”」></div>
Angularのバインド構文
値バインディング: ここでは、”ngModel” は大文字と小文字を区別します。
e.g. <input =”firstName” >
Event binding.IO(イベントバインディング): ngModel は入力に使用されます。 これはやや単純である。 (event)=”expression”
e.g. <button (click)=”sayHello()”>Say Hello</button>
Class binding.これはクラスのバインディングで、(イベント)=button()、(クリック)=”say Hello< など。 これは、構文 =”some-condition”
e.g. =”hero === selectedHero”
ルーティングとナビゲーション
ルーティング設定は、両方のフレームワークで基本的に似ていますが、1 つの重要な違いがあります。 Angular では、モジュールのルートは、パスとルート可能なコンポーネントをすべてのサブルートとともに定義する単一の構成で一元的に定義されます。
言語サポート
Aureliaは、JavaScriptコードを書くために、ES5、ES 2015、ES 2016、ES.Next、Typescriptから選択する幅広い選択肢を提供しています。
標準準拠
Aureliaは既存の標準にきちんと準拠しており、また新しいWeb標準にも準拠しています。
この件に関しては、コミュニティから標準から逸脱していると指摘されているように、Angularは大きく遅れをとっていると言えます。 たとえば、HTML は大文字と小文字を区別しませんが、Angular は ngFor や ngModel など、ブラウザがネイティブで扱えない大文字と小文字を区別する構文を採用しています。 しかし、Angular のエコシステムは継続的に成長しており、開発のしやすさ、標準への準拠、シンプルさにより、人気のあるフレームワークとして台頭しています。
Angular の否定的な点の1つは、「急な学習曲線」を持つことです。Angular チームは彼らのフレームワークを継続的に更新しており、これらの更新は非常に頻繁なので、学習を続け、必要な変更に適応しなければなりません。
結論
AureliaとAngularはどちらも強力なフレームワークですが、AngularはGoogleによる商業的支援と幅広いコミュニティによるサポートによってより有名になっています。