アウレリア-概要

フレームワークの最適な定義は、Aureliaの公式ドキュメントにあります-

まあ、それは実際には簡単です。 Aureliaは単なるJavaScriptです。ただし、昨日のJavaScriptではなく、明日のJavaScriptです。最新のツールを使用することで、ECMAScript 2016でAureliaをゼロから作成することができました。これは、ネイティブモジュール、クラス、デコレータなどを自由に使用できることを意味します。

Aureliaは、現在および将来のJavaScriptで記述されているだけでなく、アーキテクチャーに対する最新のアプローチも採用しています。過去には、フレームワークはモノリシックな獣でした。アウレリアではありません。一連の共同ライブラリとして構築されています。総合すると、シングルページアプリ（SPA）を構築するための強力で堅牢なフレームワークを形成します。ただし、Aureliaのライブラリは、通常、個別に、従来のWebサイトで、またはNodeJSなどのテクノロジーを介してサーバー側でも使用できます。

アウレリア-機能

コンポーネント-コンポーネントは、Aureliaフレームワークの構成要素です。 HTMLビューとJavaScriptビューとモデルのペアで構成されます。
* Web標準*-これは、最もクリーンな最新のフレームワークの1つであり、不要な抽象化なしにWeb標準に完全に焦点を合わせています。
拡張可能-フレームワークは、他の必要なツールと統合する簡単な方法を提供します。
商用サポート-Aureliaは、商用およびエンタープライズサポートを提供しています。 Durandal Incの公式製品です。
ライセンス-Aureliaはオープンソースであり、MITライセンスの下でライセンスされています。

アウレリア-利点

アウレリアはとてもきれいです。フレームワークの規則に従うと、フレームワークに邪魔されることなくアプリに集中できます。
また、簡単に拡張できます。フレームワークが提供するツールを追加または削除できます。また、フレームワークの一部ではない他のツールを追加することもできます。
Aureliaの操作は非常に簡単です。開発者の経験に向けられています。時間を大幅に節約できます。
フレームワーク自体はWeb標準に向けられているため、常に最新の概念を把握できます。
Aureliaには最大のコミュニティはありませんが、非常に機敏で、知識が豊富で、すぐに助けてくれます。

制限事項

大きな制限はありません。このフレームワークは強力で、使いやすいです。

Aurelia-環境設定

この章では、Aureliaフレームワークを開始する方法を学びます。それを行う前に、システムに NodeJS をインストールする必要があります。

Sr.No	Software & Description
1	NodeJS and NPM NodeJSは、Aureliaの開発に必要なプラットフォームです。リンク：/nodejs/nodejs_environment_setup [NodeJS Environment Setup]を確認してください。

ステップ1-Aureliaパッケージのダウンロード

Aureliaパッケージをダウンロードする前に、アプリを配置するデスクトップにフォルダーを作成しましょう。

C:\Users\username\Desktop>mkdir aureliaApp

これで、公式のhttps://aurelia.io/docs/build-systems/aurelia-cli/[Aurelia Webサイト]からパッケージをダウンロードできます。

Aureliaは ES2016 および TypeScript をサポートしています。 ES2016 を使用します。上記で作成した aureliaApp フォルダー内にダウンロードしたファイルを抽出します。

ステップ2-Webサーバーのインストール

最初に、*コマンドプロンプト*ウィンドウからWebサーバーをインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>npm install http-server -g

手順3-Webサーバーの起動

Webサーバーを起動するには、*コマンドプロンプト*で次のコードを実行する必要があります。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

ブラウザで最初のAureliaアプリを確認できます。

Aurelia Environment Setup Start

アウレリア-最初のアプリケーション

この章では、前の章で作成したAurelia起動アプリについて説明します。また、Aureliaフレームワークの背後にあるコア概念を把握できるように、フォルダー構造についても説明します。

フォルダー構造

package.json は、インストールされた npm パッケージに関するドキュメントを表します。また、これらのパッケージのバージョンも表示され、アプリを開発者間で共有する必要がある場合に、バージョンを簡単に追加、削除、変更、またはすべてのパッケージを自動的にインストールできます。
indexl は、ほとんどのHTMLベースのアプリと同様に、アプリのデフォルトページです。スクリプトとスタイルシートがロードされる場所です。
config.js はAureliaローダーの構成ファイルです。このファイルでの作業に多くの時間を費やすことはありません。
jspm_packages は、 SystemJS ロードされたモジュールのディレクトリです。
styles はデフォルトのスタイリングディレクトリです。スタイリングファイルを保存する場所はいつでも変更できます。
src フォルダーは、ほとんどの開発時間を費やす場所です。 HTML および js ファイルを保持します。

ソースファイル

既に述べたように、 src ディレクトリは、アプリロジックが保持される場所です。デフォルトのアプリを見ると、 app.js と appl が非常に単純であることがわかります。

Aureliaでは、クラス定義にJavaScriptコア言語を使用できます。次のデフォルトの例は、EC6クラスを示しています。

app.js

export class App {
   message = 'Welcome to Aurelia!';
}

*message* プロパティは、* *$ \ {message}* *構文を使用してHTMLテンプレートにバインドされます。 この構文は、文字列に変換され、テンプレートビュー内に表示される一方向のバインディングを表します。

appl

<template>
   <h1>${message}</h1>
</template>

前の章ですでに説明したように、*コマンドプロンプト*ウィンドウで次のコマンドを実行してサーバーを起動できます。

C:\Users\username\Desktop\aureliaApp>http-server -o -c-1

アプリケーションが画面にレンダリングされます。

Aurelia First App Start

アウレリア-コンポーネント

コンポーネントは、Aureliaフレームワークの主要な構成要素です。この章では、単純なコンポーネントを作成する方法を学びます。

単純なコンポーネント

前の章ですでに説明したように、各コンポーネントには JavaScript で記述された view-model と HTML で記述された view が含まれています。次の view-model 定義を見ることができます。これは ES6 の例ですが、 TypeScript を使用することもできます。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

次の例に示すように、値をビューにバインドできます。 * $ \ {header} * syntaxは、 MyComponent から定義された header 値をバインドします。 content にも同じ概念が適用されます。

appl

<template>
   <h1>${header}</h1>
   <p>${content}</p>
</template>

上記のコードは次の出力を生成します。

Aurelia Components Simple

コンポーネント機能

ユーザーがボタンをクリックしたときにヘッダーとフッターを更新する場合は、次の例を使用できます。今回は、 EC6 クラスコンストラクター内で header および footer を定義しています。

app.js

export class App{
   constructor() {
      this.header = 'This is Header';
      this.content = 'This is content';
   }
   updateContent() {
      this.header = 'This is NEW header...'
      this.content = 'This is NEW content...';
   }
}

click.delegate（）を追加して、 updateContent（）*関数をボタンに接続できます。これについては、後続の章で詳しく説明します。

appl

<template>
   <h1>${header}</h1>
   <p>${content}</p>
   <button click.delegate = "updateContent()">Update Content</button>
</template>

ボタンをクリックすると、ヘッダーとコンテンツが更新されます。

Aureliaコンポーネントメソッド

Aurelia-コンポーネントのライフサイクル

Aureliaは、コンポーネントのライフサイクルメソッドを使用して、コンポーネントのライフサイクルを操作します。この章では、これらの方法を示し、コンポーネントのライフサイクルを説明します。

* constructor（）*-Constructorメソッドは、クラスで作成されたオブジェクトを初期化するために使用されます。このメソッドが最初に呼び出されます。このメソッドを指定しない場合、デフォルトのコンストラクターが使用されます。
* created（owningView、myView）-ビューとビューモデルが作成され、コントローラーに接続されると呼び出されます。このメソッドは2つの引数を取ります。最初のものは、コンポーネントが（owningView）として宣言されているビューです。 2番目は、コンポーネントビュー（myView）*です。
* bind（bindingContext、overrideContext）-この時点で、バインディングが開始されました。最初の引数は、コンポーネントのバインディングコンテキストを表します。 2つ目は *overrideContext です。この引数は、コンテキストプロパティを追加するために使用されます。
* attached（）*-コンポーネントがDOMにアタッチされると、アタッチされたメソッドが呼び出されます。
* detached（）-このメソッドは *attached の反対です。コンポーネントがDOMから削除されるときに呼び出されます。
* unbind（）-最後のライフサイクルメソッドは *unbind です。コンポーネントがバインドされていないときに呼び出されます。

ライフサイクルメソッドは、コンポーネントをより高度に制御したい場合に役立ちます。コンポーネントのライフサイクルの特定の時点でいくつかの機能をトリガーする必要がある場合に使用できます。

すべてのライフサイクルメソッドを以下に示します。

app.js

export class App {
   constructor(argument) {
     //Create and initialize your class object here...
   }

   created(owningView, myView) {
     //Invoked once the component is created...
   }

   bind(bindingContext, overrideContext) {
     //Invoked once the databinding is activated...
   }

   attached(argument) {
     //Invoked once the component is attached to the DOM...
   }

   detached(argument) {
     //Invoked when component is detached from the dom
   }

   unbind(argument) {
     //Invoked when component is unbound...
   }
}

Aurelia-カスタム要素

Aureliaは、コンポーネントを動的に追加する方法を提供します。 HTMLを複数回含める必要なく、アプリのさまざまな部分で単一のコンポーネントを再利用できます。この章では、これを達成する方法を学びます。

手順1-カスタムコンポーネントの作成

*src* フォルダ内に新しい *components* ディレクトリを作成しましょう。

C:\Users\username\Desktop\aureliaApp\src>mkdir components

このディレクトリ内に、 custom-componentl を作成します。このコンポーネントは、後でHTMLページに挿入されます。

カスタムコンポーネント

<template>
   <p>This is some text from dynamic component...</p>
</template>

手順2-メインコンポーネントの作成

*app.js* に単純なコンポーネントを作成します。 画面上の *header* および *footer* テキストのレンダリングに使用されます。

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

手順3-カスタムコンポーネントの追加

*appl* ファイル内で、 *custom-componentl* を動的に挿入できるようにする必要があります。 それができたら、新しい要素 *custom-component* を追加できます。

appl

<template>
   <require from = "./components/custom-componentl"></require>

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

出力は以下のとおりです。 Header および Footer テキストは、 app.js 内の myComponent からレンダリングされます。追加のテキストは、 custom-component.js からレンダリングされます。

Aureliaカスタム要素の例

アウレリア-依存性注入

この章では、Aurelia依存性注入ライブラリの使用方法を学習します。

まず、 src フォルダー内に新しいファイル dependency-test.js を作成する必要があります。このファイルでは、単純なクラス DependencyTest を作成します。このクラスは、依存関係として後で注入されます。

src/dependency-test.js

export class DependencyTest {
   constructor() {
      this.test = "Test is succesfull!!!";
   }
}

注入する

*app.js* ファイルでは、上記で作成した *inject* ライブラリと *DependencyTest* クラスをインポートしています。 クラスを注入するには、* @ inject（）*関数を使用します。 *App* クラスは、それを開発者コンソールに記録するだけです。

import {inject} from 'aurelia-framework';
import {DependencyTest} from './dependency-test';

@inject(DependencyTest)

export class App {
   constructor(DependencyTest) {
      console.log(DependencyTest);
   }
}

コンソールをチェックして、 DependencyTest クラスが挿入されていることを確認できます。

Aurelia Dependency Injection Log

次の章では、Aurelia依存性注入の例をさらに示します。

Aurelia-設定

この章では、ニーズに合わせてAureliaフレームワークを構成する方法を示します。アプリをユーザーに表示する前に、初期構成を設定するか、コードを実行する必要がある場合があります。

ステップ1-main.jsを作成する

*src* フォルダー内に *main.js* ファイルを作成しましょう。 このファイル内で、Aureliaを構成します。

また、構成モジュールをロードするようにAureliaに指示する必要があります。次の例でコメント部分を見ることができます。

インデックス

<!DOCTYPE html>
<html>
   <head>
      <title>Aurelia</title>
      <link rel = "stylesheet" href = "styles/styles.css">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
   </head>

   <body aurelia-app = "main">
      <!--Add "main" value to "aurelia-app" attribute... -->
      <script src = "jspm_packages/system.js"></script>
      <script src = "config.js"></script>

      <script>
         SystemJS.import('aurelia-bootstrapper');
      </script>
   </body>
</html>

ステップ2-デフォルト設定

以下のコードは、デフォルト構成の使用方法を示しています。 configure 関数を使用すると、構成を手動で設定できます。 use プロパティを設定して、必要なものを指定しています。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

ステップ3-詳細設定

使用できる構成オプションはたくさんあります。すべてを紹介することはこの記事の範囲外であるため、次の例で構成がどのように機能するかを説明します。基本的に、Aureliaに*デフォルトのデータバインディング言語、デフォルトのリソース、開発ロギング、ルーター、履歴*、および*イベントアグリゲーター*を使用するように指示しています。これらはプラグインの標準セットです。

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator();

   aurelia.start().then(() => aurelia.setRoot());
}

注-これらの設定については、次の章で詳しく説明します。

Aurelia-プラグイン

アプリの構築を開始すると、ほとんどの場合、追加のプラグインを使用することになります。この章では、Aureliaフレームワークでプラグインを使用する方法を学びます。

標準プラグイン

前の章では、Aureliaフレームワークでデフォルト設定を使用する方法を見ました。デフォルト設定を使用している場合、プラグインの標準セットが利用可能になります。

* defaultBindingLanguage（）-このプラグインは *view-model を view に接続する簡単な方法を提供します。すでに一方向のデータバインディング構文*（$ \ {someValue}）*を見ました。他のバインディング言語を使用できますが、デフォルトのバインディング言語を使用することをお勧めします。
* defaultResources（）-デフォルトのリソースは、 *if、repeat、compose などの基本的な構造を提供します。これらのコンストラクトを自分で構築することもできますが、Aureliaは非常に一般的に使用されるため、すでにこのライブラリ内で作成しています。
* Router（）*-ほとんどのアプリケーションは何らかのルーティングを使用します。したがって、*ルーター*は標準プラグインの一部です。ルーティングの詳細については、後続の章で確認できます。
* History（）-履歴プラグインは通常 *router と一緒に使用されます。
* eventAggregator（）*-このプラグインは、コンポーネント間通信に使用されます。アプリ内のメッセージまたはチャンネルの公開と購読を処理します。

公式プラグイン

これらのプラグインはデフォルト設定の一部ではありませんが、頻繁に使用されます。

* fetch（）*-フェッチプラグインはHTTPリクエストの処理に使用されます。必要に応じて、他のAJAXライブラリを使用できます。
* animatorCSS（）*-このプラグインは、CSSアニメーションを処理する方法を提供します。
* animator-velocity（）*-CSSアニメーションの代わりに、Velocityアニメーションライブラリを使用できます。これらのプラグインにより、Aureliaアプリ内でVelocityを使用できます。
* dialog（）*-ダイアログプラグインは、高度にカスタマイズ可能なモーダルウィンドウを提供します。
* i18n（）*-これは、内部化とローカリゼーションのためのプラグインです。
* ui-virtualization（）*-仮想化は、大規模なパフォーマンスの重いUIタスクを処理するための便利なライブラリです。
* validation（）*-データを検証する必要があるときにこのプラグインを使用します。

上記で説明したすべてのプラグインは、このチュートリアルの執筆時点でAurelia Core Teamによって公式に保守されています。将来的には、その他の便利なプラグインが追加される予定です。次の例は、プラグインを使用するようにアプリを構成する方法を示しています。

プラグインのインストール

たとえば、 animator-css および animator-velocity を使用する場合は、最初にインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

前の章では、手動構成の使用方法を学習しました。プラグインを main.js ファイルに追加できます。

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

   aurelia.start().then(() => aurelia.setRoot());
}

Aurelia-データバインディング

Aureliaには独自のデータバインディングシステムがあります。この章では、データをAureliaにバインドする方法を学習し、さまざまなバインドメカニズムについても説明します。

シンプルバインディング

以前の章のいくつかですでに簡単なバインディングを見てきました。 * $ \ {…} *構文は、veiw-modelとビューをリンクするために使用されます。

app.js

export class App {
   constructor() {
      this.myData = 'Welcome to Aurelia app!';
   }
}

appl

<template>
   <h3>${myData}</h3>
</template>

Aurelia Data Binding Simple

双方向バインディング

アウレリアの美しさはそのシンプルさにあります。 input フィールドにバインドすると、双方向のデータバインディングが自動的に設定されます

app.js

export class App {
   constructor() {
      this.myData = 'Enter some text!';
   }
}

appl

<template>
   <input id = "name" type = "text" value.bind = "myData"/>
   <h3>${myData}</h3>
</template>

これで、ビューモデルとビューがリンクされました。 input フィールドにテキストを入力するたびに、ビューが更新されます。

Aurelia Data Binding Two Way

アウレリア-結合行動

この章では、*ビヘイビア*の使用方法を学習します。バインディングの動作は、バインディングデータを変更して別の形式で表示できるフィルターと考えることができます。

スロットル

この動作は、バインディングの更新が行われる頻度を設定するために使用されます。 throttle を使用して、入力ビューモデルの更新速度を遅くすることができます。前の章の例を検討してください。デフォルトのレートは 200 ms です。入力に*＆throttle：2000 を追加することで、これを 2秒*に変更できます。

app.js

export class App {
   constructor() {
      this.myData = 'Enter some text!';
   }
}

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & throttle:2000"/>
   <h3>${myData}</h3>
</template>

Aureliaバインディング動作スロットル

デバウンス

デバウンス*は*スロットル*とほぼ同じです。違いは、デバウンスはユーザーが入力を停止した後にバインディングを更新することです。次の例は、ユーザーが2秒間入力を停止した場合にバインディングを更新します。

app.js

export class App {
   constructor() {
      this.myData = 'Enter some text!';
   }
}

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & debounce:2000"/>
   <h3>${myData}</h3>
</template>

一度

*oneTime* は、最も効率的な動作パフォーマンスです。 データを一度だけバインドする必要があることがわかっている場合は、常に使用する必要があります。

app.js

export class App {
   constructor() {
      this.myData = 'Enter some text!';
   }
}

appl

<template>
   <input id = "name" type = "text" value.bind = "myData & oneTime"/>
   <h3>${myData}</h3>
</template>

上記の例は、テキストをビューにバインドします。ただし、デフォルトのテキストを変更しても、バインドされるのは1回だけなので、何も起こりません。

Aurelia-コンバーター

Aureliaアプリで一部の値を変換する必要がある場合は、手動で値を目的の形式に変換する代わりに converters を使用できます。

日付変換

デフォルトの日付値を特定の形式に変換する場合、 momentJS ライブラリを使用できます。これは、日付を操作するために使用される小さなライブラリです。

C:\Users\username\Desktop\aureliaApp>jspm install moment

新しいファイル converters.js を作成しましょう。このファイルを使用して、コンバーター固有のコードを追加します。次のコマンドを使用するか、ファイルを手動で作成します。

C:\Users\username\Desktop\aureliaApp>touch converters.js

converter.js

このファイル内で、 moment ライブラリをインポートし、 DateFormatValueConverter を設定して、追加データなしで月、日、年の値のみを返します。注意すべき重要なことは、Aureliaは ValueConverter で終わるすべてのクラスを認識できることです。これが、クラス名が DateFormatValueConverter である理由です。このクラスは dateFormat として登録され、後でビュー内で使用できます。

converters.js

import moment from 'moment';

export class DateFormatValueConverter {
   toView(value) {
      return moment(value).format('M/D/YYYY');
   }
}

*app.js* では、現在の日付のみを使用します。 これがビューモデルになります。

app.js

export class App {
   constructor() {
      this.currentDate = new Date();
   }
}

*custom-elements* の章で *require* について既に説明しました。 パイプ記号|コンバーターの適用に使用されます。 これは、Aureliaが *DateFormatValueConverter* を登録する方法であるため、 *dateFormat* のみを使用しています。

appl

<template>
   <require from = "./converters"></require>

   <h3>${currentDate | dateFormat}</h3>
</template>

Aurelia Converters Date

通貨を変換する

これは通貨のフォーマットの例です。概念は上記の例と同じであることに気付くでしょう。まず、*コマンドプロンプト*から*数値*ライブラリをインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>jspm install numeral

コンバーターは通貨形式を設定します。

converters.js

import numeral from 'numeral';

export class CurrencyFormatValueConverter {
   toView(value) {
      return numeral(value).format('($0,0.00)');
   }
}

View-modelは、単に乱数を生成します。これを通貨値として使用し、毎秒更新します。

app.js

export class App {
   constructor() {
      this.update();
      setInterval(() => this.update(), 1000);
   }
   update() {
      this.myCurrency = Math.random() * 1000;
   }
}

ランダムに生成された数値が通貨として変換されたビューが表示されます。

appl

<template>
   <require from = "./converters"></require>

   <h3>${myCurrency | currencyFormat}</h3>
</template>

Aurelia Converters Currency

アウレリア-イベント

この章では、Aureliaのイベントについて学びます。

イベントデリゲート

委任でさえも、イベントハンドラーがDOM上の複数の要素ではなく、1つの最上位要素に接続される便利な概念です。これにより、アプリケーションのメモリ効率が向上するため、可能な限り使用する必要があります。

これは、Aureliaフレームワークでイベント委任を使用する簡単な例です。ビューには、 click.delegate イベントが添付されたボタンがあります。

appl

<template>
   <button click.delegate = "myFunction()">CLICK ME</button>
</template>

ボタンがクリックされると、* myFunction（）*が呼び出されます。

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

次の出力が得られます。

Aurelia Events Delegate

イベントトリガー

委任を使用できない場合があります。一部のJavaScriptイベントは委任をサポートしていません。 IOSは一部の要素でサポートしています。どのイベントが委任を許可するかを調べるには、イベントhttps://developer.mozilla.org/en-US/[here]の bubble プロパティを検索できます。これらの場合、* trigger（）*メソッドを使用できます。

上記の例と同じ機能は、 click.trigger を使用して作成できます。

appl

<template>
   <button click.trigger = "myFunction()">CLICK ME</button>
</template>

app.js

export class App {
   myFunction() {
      console.log('The function is triggered...');
   }
}

Aurelia-イベントアグリゲーター

イベントをより多くのリスナーにアタッチする必要がある場合、またはアプリの機能を観察してデータの更新を待つ必要がある場合は、イベントアグリゲーターを使用する必要があります。

Aureliaイベントアグリゲーターには3つの方法があります。 publish メソッドはイベントを発生させ、複数のサブスクライバーが使用できます。イベントをサブスクライブするには、 subscribe メソッドを使用できます。最後に、 dispose メソッドを使用して、サブスクライバーをデタッチできます。次の例はこれを示しています。

ビューには、3つの機能ごとに3つのボタンがあります。

appl

<template>
   <button click.delegate = "publish()">PUBLISH</button><br/>
   <button click.delegate = "subscribe()">SUBSCRIBE</button><br/>
   <button click.delegate = "dispose()">DISPOSE</button>
</template>

*eventAggregator* をインポートして、使用する前に挿入する必要があります。

app.js

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@inject(EventAggregator)
export class App {
   constructor(eventAggregator) {
      this.eventAggregator = eventAggregator;
   }
   publish() {
      var payload = 'This is some data...';
      this.eventAggregator.publish('myEventName', payload);
   }
   subscribe() {
      this.subscriber = this.eventAggregator.subscribe('myEventName', payload => {
         console.log(payload);
      });
   }
   dispose() {
      this.subscriber.dispose();
      console.log('Disposed!!!');
   }
}

*SUBSCRIBE* ボタンをクリックして、将来公開されるデータをリッスンする必要があります。 加入者が接続されると、新しいデータが送信されるたびに、コンソールはそれを記録します。 *PUBLISH* ボタンを5回クリックすると、毎回ログに記録されることがわかります。

Aureliaイベントアグリゲーターの例

*DISPOSE* ボタンをクリックして、サブスクライバーをデタッチすることもできます。

アウレリア-フォーム

この章では、Aureliaフレームワークでフォームを使用する方法を学びます。

テキスト入力

最初に、 input フォームを送信する方法を確認します。ビューには、ユーザー名とパスワードの2つの入力フォームがあります。データバインディングには value.bind を使用します。

appl

<template>
   <form role = "form" submit.delegate = "signup()">

      <label for = "email">Email</label>
      <input type = "text" value.bind = "email" placeholder = "Email">

      <label for = "password">Password</label>
      <input type = "password" value.bind = "password" placeholder = "Password">

      <button type = "submit">Signup</button>
   </form>
</template>

サインアップ機能は、入力からユーザー名とパスワードの値を取得し、開発者のコンソールに記録するだけです。

export class App {
   email = '';
   password = '';

   signup() {
      var myUser = { email: this.email, password: this.password }
      console.log(myUser);
   };
}

Aurelia Forms Input

チェックボックス

次の例は、Aureliaフレームワークでチェックボックスを送信する方法を示します。チェックボックスを1つ作成し、 checked 値をビューモデルにバインドします。

appl

<template>
   <form role = "form" submit.delegate = "submit()">

      <label for = "checkbox">Checkbox</label>
      <input type = "checkbox" id = "checkbox" checked.bind = "isChecked"><br/>
      <button type = "submit">SUBMIT</button>

   </form>
</template>

フォームの送信では、 checked 値がコンソールに記録されるだけです。

app.js

export class App  {
   constructor() {
      this.isChecked = false;
   }
   submit() {
      console.log("isChecked: " + this.isChecked);
   }
}

Aurelia Forms Checkbox

ラジオボタン

次の例は、ラジオボタン*を送信する方法を示します。構文 *repeat.for = "option of options" は、オブジェクトの配列を繰り返し、各オブジェクトのラジオボタンを作成します。これは、Aureliaフレームワークで要素を動的に作成する適切な方法です。残りは前の例と同じです。 model 値と checked 値をバインドしています。

appl

<template>
   <form role = "form" submit.delegate = "submit()">

      <label repeat.for = "option of options">
         <input type = "radio" name = "myOptions"
            model.bind = "option" checked.bind = "$parent.selectedOption"/>
            ${option.text}
      </label>
      <br/>

      <button type = "submit">SUBMIT</button>
   </form>
</template>

ビューモデルでは、オブジェクトの配列 this.options を作成し、最初のラジオボタンがチェックされるように指定します。繰り返しますが、 SUBMIT ボタンは、ラジオボタンがオンになっているコンソールにログインするだけです。

app.js

export class PeriodPanel {
   options = [];
   selectedOption = {};

   constructor() {
      this.options = [
         {id:1, text:'First'},
         {id:2, text:'Second'},
         {id:3, text:'Third'}
      ];
      this.selectedOption = this.options[0];
   }
   submit() {
      console.log('checked: ' + this.selectedOption.id);
   }
}

3番目のラジオボタンをチェックしてフォームを送信すると、コンソールに表示されます。

Aurelia Forms Radio

アウレリア-HTTP

この章では、AureliaフレームワークでHTTPリクエストを処理する方法を学びます。

ステップ1-ビューを作成する

APIにリクエストを送信するために使用される4つのボタンを作成しましょう。

appl

<template>
   <button click.delegate = "getData()">GET</button>
   <button click.delegate = "postData()">POST</button>
   <button click.delegate = "updateData()">PUT</button>
   <button click.delegate = "deleteData()">DEL</button>
</template>

ステップ2-ビューモデルを作成する

サーバーにリクエストを送信する場合、Aureliaは fetch クライアントを推奨しています。必要なすべてのリクエスト（GET、POST、PUT、DELETE）に対して関数を作成しています。

import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';

let httpClient = new HttpClient();

export class App {
   getData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myPostData = {
      id: 101
   }
    postData(myPostData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts', {
         method: "POST",
         body: JSON.stringify(myPostData)
      })

      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   myUpdateData = {
      id: 1
   }
    updateData(myUpdateData) {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "PUT",
         body: JSON.stringify(myUpdateData)
      })

      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
   deleteData() {
      httpClient.fetch('http://jsonplaceholder.typicode.com/posts/1', {
         method: "DELETE"
      })
      .then(response => response.json())
      .then(data => {
         console.log(data);
      });
   }
}

アプリを実行して、それぞれ GET 、 POST 、 PUT および DEL ボタンをクリックします。コンソールでは、すべてのリクエストが成功し、結果が記録されていることがわかります。

Aurelia HTTPの例

アウレリア-参照

この章では、Aureliaの参照の簡単な例をいくつか紹介します。これを使用して、特定のオブジェクトへの参照を作成できます。次の表に示すように、要素または属性への参照を作成できます。

参照表

Sr.No	Example & Description
1	ref = "myRef" DOM要素への参照を作成するために使用されます。
2	attribute-name.ref = "myRef" カスタム属性のビューモデルへの参照を作成するために使用されます。
3	view-model.ref = "myRef カスタム要素のビューモデルへの参照を作成するために使用されます。
4	view.ref = "myRef" カスタム要素ビューインスタンスへの参照を作成するために使用されます。
5	rcontroller.ref = "myRef" カスタム要素のコントローラーインスタンスへの参照を作成するために使用されます。

次の例では、 input 要素への参照を作成します。デフォルトのクラス構文を view-model として使用します。

app.js

export class App { }

*ref = "name"* 属性を追加して、 *input* 要素への参照を作成しています。

appl

<template>
   <input type = "text" ref = "name"><br/>
   <h3>${name.value}</h3>
</template>

アプリを実行すると、入力フィールドに入力されたテキストが画面に表示されることがわかります。

Aurelia Refs Example Aurelia-routing

アウレリア-歴史

この章では、 aurelia-history プラグインの使用方法を学習します。

ステップ1-プラグインをインストールする

このプラグインは、標準構成の一部としてすでに利用可能です。手動構成の一部として* aurelia.use.standardConfiguration（）*を設定している場合、準備は完了です。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging();

   aurelia.start().then(() => aurelia.setRoot());
}

ステップ2-履歴の使用

最後の章（ Aurelia-Routing ）の例を使用します。前後にナビゲートする機能を設定する場合、* back（）および forward（）メソッドで *history オブジェクトを使用できます。これは、ルーターの構成後に追加します。

app.js

export class App {
   configureRouter(config, router) {
      config.title = 'Aurelia';
      config.map([
         { route: ['','home'],  name: 'home',
            moduleId: './pages/home/home',  nav: true, title:'Home' },
         { route: 'about',  name: 'about',
            moduleId: './pages/about/about',    nav: true, title:'About' }
      ]);
      this.router = router;
   }
   goBack() {
      history.back();
   }
    goForward() {
      history.forward();
   }
}

それでは、 view に2つのボタンを追加しましょう。

appl

<template>
   <nav>
      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>
   </nav>

   <button click.delegate = "goBack()"></button>
  //The button used for navigationg back...

   <button click.delegate = "goForward()"></button>
  //The button used for navigationg forward...

   <router-view></router-view>
</template>

ユーザーは、追加したボタンをクリックして、前後に移動できます。

Aurelia History Example

アウレリア-アニメーション

この章では、AureliaフレームワークでCSSアニメーションを使用する方法を学びます。

ステップ1-表示

ビューには、アニメーション化される1つの要素と、* animateElement（）*関数をトリガーするボタンがあります。

appl

<template>
   <div class = "myElement"></div>
   <button click.delegate = "animateElement()">ANIMATE</button>
</template>

ステップ2-モデルの表示

JavaScriptファイル内で、 CssAnimator プラグインをインポートし、依存関係として挿入します。 animateElement 関数は、アニメータを呼び出してアニメーションを開始します。アニメーションは次のステップで作成されます。

import {CssAnimator} from 'aurelia-animator-css';
import {inject} from 'aurelia-framework';

@inject(CssAnimator, Element)
export class App {
   constructor(animator, element) {
      this.animator = animator;
      this.element = element;
   }

   animateElement() {
      var myElement = this.element.querySelector('.myElement');
      this.animator.animate(myElement, 'myAnimation');
   }
}

ステップ3-スタイル

CSSを styles/styles.css ファイル内に記述します。 .myAnimation-add はアニメーションの開始点であり、*。myAnimation-remove *はアニメーションの完了時に呼び出されます。

styles.css

.myElement {
   width:100px;
   height: 100px;
   border:1px solid blue;
}

.myAnimation-add {
   -webkit-animation: changeBack 3s;
   animation: changeBack 3s;
}

.myAnimation-remove {
   -webkit-animation: fadeIn 3s;
   animation: fadeIn 3s;
}

@-webkit-keyframes changeBack {
   0% { background-color: #e6efff; }
   25% { background-color: #4d91ff; }
   50% { background-color: #0058e6; }
   75% { background-color: #003180; }
   100% { background-color: #000a1a; }
}

@keyframes changeBack {
   0% { background-color: #000a1a; }
   25% { background-color: #003180; }
   50% { background-color: #0058e6; }
   75% { background-color: #4d91ff; }
   100% { background-color: #e6efff; }
}

[アニメーション]ボタンをクリックすると、背景色が水色から濃い色に変わります。このアニメーションが3秒後に完了すると、要素は開始状態にフェードします。

Aureliaアニメーションの例

アウレリア-ダイアログ

Aureliaは、ダイアログ（モーダル）ウィンドウを実装する方法を提供します。この章では、その使用方法を示します。

手順1-ダイアログプラグインのインストール

ダイアログプラグインは、*コマンドプロンプト*ウィンドウからインストールできます。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-dialog

このプラグインが機能するには、手動ブートストラップを使用する必要があります。これについては、構成の章で説明しました。 main.js ファイル内に、 aurelia-dialog プラグインを追加する必要があります。

main.js

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()
   .plugin('aurelia-dialog');

   aurelia.start().then(() => aurelia.setRoot());
}

ステップ2-フォルダーとファイルの作成

まず、 modal という新しいディレクトリを作成します。 components フォルダー内に配置しましょう。 *コマンドプロンプト*を開き、次のコードを実行します。

C:\Users\username\Desktop\aureliaApp\src\components>mkdir modal

このフォルダーに、2つの新しいファイルを作成します。これらのファイルは、モーダルの view および view-model を表します。

C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modall
C:\Users\username\Desktop\aureliaApp\src\components\modal>touch my-modal.js

ステップ3-モーダルを作成する

まず、 view-model コードを追加しましょう。 dialog-controller をインポートして挿入する必要があります。このコントローラーは、モーダル固有の機能を処理するために使用されます。次の例では、モーダルを水平方向に集中化するために使用しています。

my-modal.js

import {inject} from 'aurelia-framework';
import {DialogController} from 'aurelia-dialog';

@inject(DialogController)

export class Prompt {
   constructor(controller) {
      this.controller = controller;
      this.answer = null;

      controller.settings.centerHorizontalOnly = true;
   }
   activate(message) {
      this.message = message;
   }
}

*view* コードは次のようになります。 ボタンをクリックすると、モーダルが開閉します。

my-modall

<template>
   <ai-dialog>
      <ai-dialog-body>
         <h2>${message}</h2>
      </ai-dialog-body>

      <ai-dialog-footer>
         <button click.trigger = "controller.cancel()">Cancel</button>
         <button click.trigger = "controller.ok(message)">Ok</button>
      </ai-dialog-footer>
   </ai-dialog>
</template>

ステップ4-モーダルのトリガー

最後のステップは、モーダルをトリガーする機能です。 DialogService をインポートして挿入する必要があります。このサービスには open メソッドがあり、 my-modal ファイルと model から view-model を渡すことができるため、データを動的にバインドできます。

app.js

import {DialogService} from 'aurelia-dialog';
import {inject} from 'aurelia-framework';
import {Prompt} from './components/modal/my-modal';

@inject(DialogService)

export class App {
   constructor(dialogService) {
      this.dialogService = dialogService;
   }
   openModal() {
      this.dialogService.open( {viewModel: Prompt, model: 'Are you sure?' }).then(response => {
         console.log(response);

         if (!response.wasCancelled) {
            console.log('OK');
         } else {
            console.log('cancelled');
         }
         console.log(response.output);
      });
   }
};

最後に、ボタンを作成して、 openModal 関数を呼び出すことができます。

appl

<template>
   <button click.trigger = "openModal()">OPEN MODAL</button>
<template>

アプリを実行する場合、 OPEN MODAL ボタンをクリックして、新しいモーダルウィンドウをトリガーできます。

Aurelia Dialog Modal

アウレリア-ローカリゼーション

Aureliaは i18n プラグインを提供しています。この章では、このプラグインを使用してアプリをローカライズする方法を学びます。

ステップ1-プラグインをインストールする

コマンドプロンプト*ウィンドウを開き、次のコードを実行して *i18n プラグインをインストールします。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

バックエンドプラグインもインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

ステップ2-フォルダーとファイルの作成

プロジェクトのルートフォルダーに、 locale ディレクトリを作成する必要があります。

C:\Users\username\Desktop\aureliaApp>mkdir locale

このフォルダーに、必要な言語の新しいフォルダーを追加する必要があります。内部に translation.js ファイルを含む en を作成します。

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

ステップ3-プラグインを使用する

このプラグインを使用するには、手動ブートストラップを使用する必要があります。詳細については、構成の章を確認してください。 i18n プラグインを main.js ファイルに追加する必要があります。

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()

   .plugin('aurelia-i18n', (instance) => {
     //register backend plugin
      instance.i18next.use(XHR);

     //adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },

         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

ステップ4-翻訳JSONファイル

これは、翻訳値を設定できるファイルです。公式ドキュメントの例を使用します。 de-DE フォルダーは、実際にはドイツ語に翻訳するために使用する必要がありますが、わかりやすくするために、代わりに英語のフレーズを使用します。

translation.json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

ステップ5-ロケールの設定

*i18n* プラグインをインポートし、 *de-DE* フォルダーからJSONコードを使用するように設定するだけです。

app.js

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];

   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')

      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

ステップ6-表示

データを変換する方法はいくつかあります。 t という名前のカスタムValueConverterを使用します。次の例では、データをフォーマットするさまざまな方法を見ることができます。これを translation.json ファイルと比較すると、フォーマットに使用されるパターンがわかります。

<template>
   <p>
      Translation with Variables: <br/>
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br/>
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br/>
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>
      Translation singular indefinite: <br/>
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br/>
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br/>
      ${ 'friend' | t } <br/>
      ${ 'friend' | t: { context: 'male' } } <br/>
      ${ 'friend' | t: { context: 'female' } }
   </p>

</template>

アプリを実行すると、次の出力が得られます。

Aureliaローカリゼーションの例

アウレリア-ツール

この章では、 aurelia-tools をセットアップして使用する方法を学習します。

手順1-ルートフォルダー

すべてのAureliaアプリを保持するルートフォルダーを作成しましょう。

C:\Users\username\Desktop>mkdir aurelia-projects

ステップ2-Aureliaツール

*aurelia-projects* フォルダー内で、githubから *aurelia-tools* リポジトリーを複製します。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/tools.git

ステップ3-新しいプロジェクトを作成する

新しいAureliaプロジェクトを開始するには、 aurelia-skeletons のいずれかを使用することをお勧めします。 gitからAureliaスケルトンをクローンしましょう。

C:\Users\username\Desktop\aurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git

また、パッケージ、モジュール、および依存関係をインストールする必要があります。さまざまなスケルトンアプリから選択できます。 skeleton-es2016 を使用します。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>npm install
C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>jspm install

最後に、開発環境を構築するために次のコードを実行する必要があります。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp build-dev-env

ステップ4-更新

次のコマンドを使用して、ローカルリポジトリを更新します。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp update-own-deps

ステップ5-プル

また、構築せずにAurelia依存関係をプルすることもできます。

C:\Users\username\Desktop\aurelia-projects\skeleton-navigation\skeleton-es2016>gulp pull-dev-env

アウレリア-バンドリング

この章では、Aureliaフレームワークでバンドリングを使用する方法を学びます。

ステップ1-前提条件のインストール

コマンドプロンプト*で次のコマンドを実行して、 *aurelia-bundler をインストールできます。

C:\Users\username\Desktop\aureliaApp>npm install aurelia-bundler --save-dev

gulpがインストールされていない場合は、このコードを実行してインストールできます。

C:\Users\username\Desktop\aureliaApp>npm install gulp

*require-dir* パッケージを *npm* からインストールすることもできます。

C:\Users\username\Desktop\aureliaApp>npm install require-dir

ステップ2-フォルダーとファイルの作成

最初に、アプリのルートディレクトリに gulpfile.js ファイルを作成します。

C:\Users\username\Desktop\aureliaApp>touch gulpfile.js

*build* フォルダーが必要です。 このディレクトリに、 *tasks* という名前の別のフォルダーを追加します。

C:\Users\username\Desktop\aureliaApp>mkdir build
C:\Users\username\Desktop\aureliaApp\build>mkdir tasks

*bundle.js* ファイルを *tasks* フォルダー内に作成する必要があります。

C:\Users\username\Desktop\aureliaApp\build\tasks>touch bundle.js

ステップ3-ガルプ

*gulp* をタスクランナーとして使用します。 *build \ tasks \ bundle.js* からコードを実行するように指示する必要があります。

gulpfile.js

require('require-dir')('build/tasks');

次に、必要なタスクを作成します。このタスクはアプリを取得し、 dist/appbuild.js および dist/vendor-build.js ファイルを作成します。バンドルプロセスが完了すると、 config.js ファイルも更新されます。挿入および縮小するすべてのファイルとプラグインを含めることができます。

bundle.js

var gulp = require('gulp');
var bundle = require('aurelia-bundler').bundle;

var config = {
   force: true,
   baseURL: '.',
   configPath: './config.js',

   bundles: {
      "dist/app-build": {
         includes: [
            '[*.js]',
            '*l!text',
            '*.css!text',
         ],
         options: {
            inject: true,
            minify: true
         }
      },
        "dist/vendor-build": {
         includes: [
            'aurelia-bootstrapper',
            'aurelia-fetch-client',
            'aurelia-router',
            'aurelia-animator-css',
         ],
         options: {
            inject: true,
            minify: true
         }
      }
   }
};

gulp.task('bundle', function() {
   return bundle(config);
});

バンドルが完了すると、*コマンドプロンプト*から通知されます。

Aurelia Bundling CMD

Aurelia-デバッグ

この章では、AureliaコンテキストデバッガーをChrome拡張機能として追加する方法を学習します。

注意-拡張機能を追加する前に、 aurelia-tools ファイルが必要です。お持ちでない場合は、ツールの章をご覧ください。

ステップ1-Chrome拡張機能を開く

Chrome拡張機能を開く最も簡単な方法は、ブラウザのURLバーで次のコードを実行することです。

chrome://extensions

ステップ2-拡張機能の追加

この拡張機能はまだChromeストアから入手できないため、 developermode チェックボックスをオンにして、 Unpacked Extensions をロード*をクリックします。これにより、追加する拡張子を選択できる小さなウィンドウが開きます。

この例では、Desktop/aurelia-projects/tools/context-debuggerフォルダーを選択して開きます。

これで、拡張機能がブラウザにロードされていることがわかります。

Aurelia Debugging Context Debugger

開発者コンソールも確認できます。 elements タブをクリックすると、右下隅に aurelia-properties が表示されます。

Aureliaデバッグコンソール

アウレリア-コミュニティ

コミュニティは、フレームワークを選択する際に考慮すべき最も重要な要素の1つです。 Aureliaは顧客に素晴らしいサポートを提供しています。この章では、立ち往生しているときに助けを得る方法を学びます。

Aurelia-公式ドキュメント

Aureliaのドキュメントはこのリンクで見つけることができます-https://aurelia.io/docs[https://aurelia.io/docsl]

Aurelia Gitter-チャンネル

迅速な回答が必要な場合は、いつでもaurelia gitterチャンネルに質問を送信できます。このチャネルは次のリンクで見つけることができます-https://gitter.im/Aurelia/Discuss

アウレリア-Github

公式のAurelia githubリポジトリhttps://github.com/aureliaに問題を送信することもできます

アウレリア-ブログ

Aureliaの更新や変更を追跡する場合は、Durandalの公式ブログhttp://blog.durandal.io/をフォローできます。

アウレリア-ロブ・アイゼンバーグのブログ

Aureliaフレームワークの作成者であるRob Eisenbergの公式ブログhttp://eisenbergeffect.bluespire.com/をフォローすることもできます

Aurelia-エンタープライズサポート

Aureliaは、チームおよび個人にエンタープライズサポートを提供します。興味がある場合は、次のアドレスにメールを送信してください-

support@durandal.io

Aurelia-開発チームを雇う

このアドレスにメールを送信して、Aureliaエキスパート開発者を雇うことができます。

consulting@durandal.io

アウレリア-トレーニング

チームのAurelia公式トレーニングが必要な場合は、このアドレスにメールを送信できます。

training@durandal.io

アウレリア-ベストプラクティス

Aureliaは新しいフレームワークであるため、ベストプラクティスはまだ確立されていません。この章では、従うべきいくつかの有用なガイドラインを見つけます。

新しいプロジェクトを開始する

Aureliaは aurelia-skeletons を提供しています。いくつかのスケルトンから選択できます。 Aureliaの背後にあるチームはスケルトンを積極的にサポートしており、スケルトンは常に最新バージョンのフレームワークに対応しています。

アウレリアスケルトン

skeleton-es2016-webpack を使用すると、 ES2016 コードを記述し、パッケージ管理に npm を使用し、バンドルに webpack を使用できます。
skeleton-es2016 を使用すると、 ES2016 コードを記述し、パッケージ管理に jspm を、ロードおよびバンドルに SystemJS を使用できます。
skeleton-typescript-webpack を使用すると、 TypeScript コードを記述し、パッケージ管理に npm を使用し、バンドルに webpack を使用できます。
skeleton-typescript を使用すると、 TypeScript コードを記述し、パッケージ管理に jspm を使用し、ロードとバンドルに SystemJS を使用できます。
skeleton-typescript-asp.net5 を使用すると、 TypeScript コードを記述し、パッケージ管理に jspm を、ロードおよびバンドルに SystemJS を使用できます。 ASP.NET バックエンドも統合されています。
skeleton-es2016-asp.net5 を使用すると、 ES2016 コードを記述し、パッケージ管理に jspm を、ロードおよびバンドルに SystemJS を使用できます。 ASP.NET バックエンドが統合されています。
```
*GitHub* からすべてのスケルトンを複製できます。 インストール手順は、各スケルトンの *README.md* ファイル内にあります。
```

C:\Users\username\Desktop>git clone https://github.com/aurelia/skeleton-navigation.git

フォルダー構造

任意のフォルダ構造を自由に使用できます。どこから始めればよいかわからない場合は、次のフォルダ構造を使用できます。この画像は、 src ディレクトリ内のファイルとフォルダーを表しています。

Aureliaベストプラクティス

Web標準

Aureliaは、Web標準に対応したフレームワークです。これは、その背後にあるチームの主要な目標の1つでした。彼らは、フレームワークが常に最新のウェブに従うようにします。これは開発者にとって非常に良いことです。将来的にはフレームワークの使いやすさに頼ることができるからです。また、ブラウザとWebを最新の状態に保つのにも役立ちます。

EcmaScript 6

これは、Aureliaだけでなく、他のJavaScriptフレームワークにとっても良い習慣です。 ES6 は、開発プロセスに役立つ新しい機能を提供します。強く型付けされた言語が必要な場合は、 TypeScript も使用できます。

Aurelia-quick-guide

アウレリア-概要

アウレリア-機能

アウレリア-利点

制限事項

Aurelia-環境設定

ステップ1-Aureliaパッケージのダウンロード

ステップ2-Webサーバーのインストール

手順3-Webサーバーの起動

アウレリア-最初のアプリケーション

フォルダー構造

ソースファイル

app.js

appl

アウレリア-コンポーネント

単純なコンポーネント

app.js

appl

コンポーネント機能

app.js

appl

Aurelia-コンポーネントのライフサイクル

app.js

Aurelia-カスタム要素

手順1-カスタムコンポーネントの作成

カスタムコンポーネント

手順2-メインコンポーネントの作成

app.js

手順3-カスタムコンポーネントの追加

appl

アウレリア-依存性注入

src/dependency-test.js

注入する

Aurelia-設定

ステップ1-main.jsを作成する

インデックス

ステップ2-デフォルト設定

main.js

ステップ3-詳細設定

Aurelia-プラグイン

標準プラグイン

公式プラグイン

プラグインのインストール

main.js

Aurelia-データバインディング

シンプルバインディング

app.js

appl

双方向バインディング

app.js

appl

アウレリア-結合行動

スロットル

app.js

appl

デバウンス

app.js

appl

一度

app.js

appl

Aurelia-コンバーター

日付変換

converter.js

converters.js

app.js

appl

通貨を変換する

converters.js

app.js

appl

アウレリア-イベント

イベントデリゲート

appl

app.js

イベントトリガー

appl

app.js

Aurelia-イベントアグリゲーター

appl