Angular 2とAureliaを並べて比較

• Aureliaの概要と、それをAngularと比較することが正当である理由を学ぶ
• 各航空写真の長所と短所を検討する
• 機能、用語、保存するものを指定しましょう
• 各フレームワークで最もシンプルなコンポーネントを作成しましょう
• ルーティングを構成する
• ネストされたコンポーネントを追加する
• 最も単純なデータバインディングオプションを検討する
• データバインディングで制御構造を考慮する

アウレリアとは何ですか？なぜAngularと比較するのが正当なのですか？

Angular 2とAureliaの航空写真の長所と短所

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\chrome\dev-sessions\perf" --enable-precise-memory-info --enable-benchmarking --js-flags="--expose-gc" 

Angularの主な利点

• Angularのコミュニティは明らかに大きいため、アイデアや拡張機能が増え、既存の質問に対する答えを見つけやすくなります。
  
• Angularには3倍のチームがあり、プロジェクトの開発がはるかに高速です。 また、Angularチームは既に開発者ツールの作成者のサポートを確保しており、Angularのサポートは非​​常に多くのツールで行われます（また、開発者プレビューでも、既に動作する非常にクールなBatarangleがあります）。
  

アウレリアの主な利点

• Aureliaは、Angularと多くの興味深い機能を対比できます。 たとえば、これは高度な構成メカニズムであり、 テンプレートパーツです。 Aureliaは目立たないように設計されており、最終的なコードのフレームワーク設計の数は最小限です。 Aureliaはよりコンパクトで維持されますが、Angularはコピーペーストを強制的に生成することがあります。
  
• Aureliaチームは商用の顧客サポートを提供し、プロジェクトの方向性に影響を与える本当の機会があります。 また、Angular 2の場合、所有しているものを使用する必要があります。

Angularの主な欠点

• Angularの開発履歴を見ると、Angular 2が最終的にどうなるかをチームがはっきりと見ていないという印象を受けます。 私はAngular 2の作業の発表以来Angular 2をフォローしてきましたが、フレームワークは本当に非常に強力であり、常に順次変更されるわけではありません。 同じ理由で、アイゼンバーグはプロジェクトのアーキテクチャが元のアーキテクチャからどのように変わったのかのためにAngular 2チームを去りました。 同じ理由で、 同様の投稿が表示されます。
  

アウレリアの主な欠点

• アウレリアに関する主な質問は、彼女がAngular 2に反対するかどうかです。アイゼンバーグはアウレリアとAngular 2を対比しているため、これは怠questionな質問ではありません。さらに、 Angular 2の記事に関するコメントもあります。 私はアウレリアが本当に好きですが、著者が疲れているため、選択したフレームワークがいつかサポートされなくなる可能性が心配です。 一方、大きなFacebook がparse.comの閉鎖を発表してから1週間も経っていないため、誰も何の影響も受けません。
  

Angular 2とAureliaの機能、用語、保存するもの

最初のコンポーネントを作成する

角度2

 import {Component} from 'angular2/core'; @Component({selector: 'angular-app', templateUrl: 'app/app.html'} }) export class App { message: string = 'Welcome to Angular 2!'; } 

1. @ComponentデコレータのテンプレートパラメータとしてHTML文字列を指定します。 このアプローチは、テンプレートがコンパクトで、別のHTMLページを作成したくない場合に役立ちます。
2. テンプレートのURLをtemplateUrlパラメーターとして指定します。 別のページが必要なので、このオプションを使用します

  <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">{{message}}</a> </div> </div> 

各Angularコンポーネントには、単一の@Componentと少なくとも1つのViewアノテーションが必要です。 @Componentアノテーションは、コンポーネントがインスタンス化されるタイミング、およびコンポーネントがバインドするプロパティとhostListenerを指定します。

アウレリア

 export class App { message: string = "Welcome to Aurelia!"; } 

 <template> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="#">${message}</a> </div> </div> </template> 

ルーティングを構成します

角度2

 ... import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; import {BindingSample} from './binding-sample/binding-sample'; import {ComponentSample} from './component-sample/component-sample'; ... @RouteConfig([ { path: '/component-sample', name: 'ComponentSample', component: ComponentSample, useAsDefault: true }, { path: '/binding-sample', name: 'BindingSample', component: BindingSample } ]) export class App { ... } 

1. ルートパターン
2. ルート名（マークアップでのバインドに必要）
3. ルートがアクティブ化されたときにAngularが作成するコンポーネントモジュール
4. これがデフォルトルートであることを示すuseAsDefaultオプションパラメータ

 import {Component} from 'angular2/core'; import {View} from 'angular2/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; @Component({ selector: 'angular-app', templateUrl: 'app/app.html', directives: [ROUTER_DIRECTIVES] }) @RouteConfig([ { path: '/component-sample', name: 'ComponentSample', loader : () => System.import('app/component-sample/component-sample').then(m => m.ComponentSample), useAsDefault: true }, { path: '/binding-sample', name: 'BindingSample', loader : () => System.import('app/binding-sample/binding-sample').then(m => m.BindingSample) } ]) export class App { message: string = "Welcome to Angular 2!"; } 

 … <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a [routerLink]="['ComponentSample']">Component sample</a> </li> <li> <a [routerLink]="['BindingSample']">Binding sample</a> </li> </ul> </div> ... 

 ... <a [routerLink]="['BindingSample', {someParameter: 'someString'}]">Binding sample</a> ... 

 <div class="container"> <router-outlet></router-outlet> </div> 

アウレリア

 export class App { message: string = "Welcome to Aurelia!"; router: any; configureRouter(config, router) { config.title = 'Welcome to Aurelia!'; config.map([ { route: ['', 'component-sample'], moduleId: 'app/component-sample/component-sample', nav: true, title: 'Component sample' }, { route: 'component-sample', moduleId: 'app/binding-sample/binding-sample', nav: true, title: 'Binding sample' } ]); this.router = router; } } 

1. ルートパターン（または一連のパターン、空白行パターンはデフォルトルートを意味します）。
2. ルートをアクティブにするときに開始するモジュールの識別子。
3. オプションのタイトルプロパティ-ルートをアクティブにすると、その値がページタイトルに追加されます。
4. オプションのnavプロパティ-ルートをナビゲーションモデルに含めるかどうかを指定します。 数値を指定する場合、ナビゲーションモデルコレクション内の要素の順序を意味します。

  <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> <a href.bind="row.href">${row.title}</a> </li> </ul> </div> 

  <div class="container"> <router-view></router-view> </div> 

ネストされたコンポーネントを追加する

角度2

1. コンポーネントを宣言し、メタデータをバインドします。 親コンポーネントのデータを使用してプロパティを初期化するには、@ Componentデコレータに入力パラメータを追加し、対応するプロパティの名前を渡します。
   

    import {Component} from 'angular2/core'; @Component({ selector: 'test-child-component', inputs: ['inputMessage'], template: `<div class="panel panel-default"> <div class="panel-heading">Child component title</div> <div class="panel-body"> Message from parent component is: {{inputMessage}} </div> </div>` }) export class TestChildComponent { inputMessage: string } 

   
   
2. 親コンポーネント（component-sample.ts）に子コンポーネントをインポートし、@ Componentデコレーターのディレクティブ配列に渡します
3. 親コンポーネントのテンプレートに、ネストされたコンポーネントから指定されたセレクターに対応する要素を配置し、パラメーターを渡します

 import {Component} from 'angular2/core'; import {TestChildComponent} from './test-hild-omponent'; @Component({ template: ` <div class="sample-header"> <h1>{{message}}</h1> </div> <test-child-component [inputMessage]="messageForChild"></test-child-component>`, directives: [TestChildComponent] }) export class ComponentSample { message: string = 'This is a component with child component sample'; messageForChild: string = 'Hello to child component!'; } 

アウレリア

オプション1-カスタム要素：

1. 通常のコンポーネントを作成し、さらにデコレータプロパティで@bindableをマークします。パラメータとしてテンプレートを通過する値（Angular 2の入力パラメータに似ています）。 さらに、要素が単純で動作しない場合は、コンポーネントを作成せずに、テンプレートを作成し、同じ名前の属性を使用してバインド可能なプロパティを一覧表示するだけで済みます。 Aureliaコンポーネントは「オンザフライ」で作成します：
   

    <template bindable="message"> <div class="panel panel-default"> <div class="panel-heading">Custom element title</div> <div class="panel-body"> Message from parent component is: ${message} </div> </div> </template> 

   
   
2. 必要なモジュールを指す親コンポーネントのテンプレートにrequire要素を追加し（Angular 2のディレクティブパラメーターに似ていますが、テンプレート内）、必要な場所にマークアップでカスタム要素を描画します。 パラメーターは、<property name> .bind属性を使用して渡されます。 その結果、親コンポーネントのテンプレートは次のようになります。
   

    <template> ... <require from="app/component-sample/test-custom-element.html"></require> <test-custom-element message.bind="messageForCustomElement"></test-custom-element> </template> 

   
   

 <content></content> 

オプション2-構成：

1. 通常のコンポーネントを作成します。 composeは弱く接続されたコンポーネントを想定しているため、データ転送にライフサイクルフックを使用する必要があります （Angular 2にもこれらがありますが、次の記事ではそれらについて）。 この場合、activateメソッドを使用します。 テンプレートは小さいので、インラインにします。
   

    import {inlineView} from 'aurelia-templating'; @inlineView('<template><h3>${inputMessage}</h3><template>') export class TestChildComponent { inputMessage: string; activate(inputMessage: string) { this.inputMessage = inputMessage; } } 

   
   
2. 親要素のテンプレートに、compose要素を配置します。この要素には、子コンポーネントを持つモジュールの識別子を示します。 親コンポーネントから子にデータを転送するには、model.bind属性を使用します。
   

    <compose model.bind="messageForChild" view-model="app/testChildComponent"></compose> 

   
   

データバインディング

角度2

DOMへ

 <div class="panel-body"> This string is builted with {{interpolationString}} syntax </div> 

 <img [src]="iconUrl" /> 

 <h1>2 = {{1+1}}</h1> 

 <input value="some text" /> 

 <input [value]="'some text'" /> 

 <img [style.width]="iconWidth" [style.height]="iconHeight" [src]="iconUrl" /> 

ドムから

 <input type="button" (click)="onClicked()" value="Click me!" /> 

両方向

 <input [value]="twoWayBindedProperty" (input)="twoWayBindedProperty=$event.target.value" /> 

 <input [(ngModel)]="twoWayBindedProperty" /> 

 <input [ngModel]="twoWayBindedProperty" (ngModelChange)="twoWayBindedProperty=$event"> 

 <img bind-src="iconUrl"> 

アウレリア

文字列補間

 <div class="panel-body"> This string is builted with ${interpolationString} syntax </div> 

プロパティのバインド

• .bind-適用場所に応じて決定します。入力要素には双方向バインディングが使用され、他のすべての場合には一方向バインディングが使用されます
• .one-way-AngularのDOMに類似
• .two-way-クラシックな双方向バインディング
• .one-timeは、変更を追跡せずに1回限りのデータレンダリングを行うためのオプションです。可能な限りリソースを節約します。典型的な使用例は、読み取り専用モードでデータを含むリストを描画することです。

 <input value.bind="iconUrl" /> 

 <div innerhtml.bind="htmlProperty"></div> <div innerhtml="${htmlProperty}"></div> 

イベントハンドラー

• .trigger-要素に直接バインドされたハンドラーを作成します
• .delegate — , document ( shadow DOM) , , . . , , bubbling (, , - binding-sample.html).

データバインディングの制御構造

角度

制御構造（for、if、switch）

 <div class="panel-body"> Select something: <select [(ngModel)]="selectedClass"> <option *ngFor="#alertClass of alertClasses" [value]="alertClass">{{alertClass}}</option> </select> </div> <div class="panel-body"> <div [ngSwitch]="selectedClass"> <template [ngSwitchWhen]="'success'"> <div class="alert alert-success" role="alert">You will be successfull if you learn Angular</div> </template> ... <template ngSwitchDefault>You must choose option</template> </div> <div *ngIf="selectedClass=='success'"> <div class="alert alert-success" role="alert">Extra message with *ngIf binding</div> </div> </div> 

テンプレートでローカル変数を作成する

 <option *ngFor="#alertClass of alertClasses" [value]="alertClass">{{alertClass}}</option> 

 <option *ngFor="#alertClass of alertClasses, #index=index" [value]="alertClass">{{index}} {{alertClass}}</option> 

 <input #i placeholder="Type something"> <input type="button" class="btn btn-success" (click)="displayTextboxValue(i.value)" value="And click" /> <br/> But templating doesn't work with it - {{i.value}} 

アウレリア

制御構造（for、if、show）

 <div class="panel-body"> Select something: <select value.bind="selectedClass"> <option repeat.for="alertClass of alertClasses" value.bind="alertClass">${alertClass}</option> </select> </div> <div class="panel-body"> <div if.bind="selectedClass=='success'" class="alert alert-success" role="alert">You will be successfull if you learn Aurelia</div> ... <div show.bind="selectedClass=='success'"> <div class="alert alert-success" role="alert">Extra message with show extension</div> </div> </div> 

• $ index-配列内の現在の要素のインデックス
• $ first-これが配列の最初の要素であれば真
• $ last-これが配列の最後の要素であれば真
• $ even-配列内の偶数要素である場合はtrue
• $ odd-配列の奇数要素の場合はtrue

テンプレートでローカル変数を作成する

 <div class="panel-body"> <input ref="i" placeholder="Type something"> <input type="button" class="btn btn-success" click.delegate="displayTextboxValue(i.value)" value="And click" /> <br/> And templating works with it - ${i.value} </div>