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-configuration