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

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

フォルダー構造

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

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

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

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

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

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

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

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

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