Aurelia - Konfiguration

In diesem Kapitel zeigen wir Ihnen, wie Sie das Aurelia-Framework für Ihre Anforderungen konfigurieren. Manchmal müssen Sie eine Erstkonfiguration festlegen oder Code ausführen, bevor die App für die Benutzer gerendert wird.

Schritt 1 - Erstellen Sie main.js

Lassen Sie uns erstellen main.js Datei im Inneren srcOrdner. In dieser Datei konfigurieren wir Aurelia.

Sie müssen Aurelia außerdem anweisen, das Konfigurationsmodul zu laden. Sie können den kommentierten Teil im folgenden Beispiel sehen.

index.html

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

Schritt 2 - Standardkonfiguration

Der folgende Code zeigt, wie die Standardkonfiguration verwendet wird. configureMit dieser Funktion kann die Konfiguration manuell eingestellt werden. Wir setzenuse Eigenschaft, um anzugeben, was wir brauchen.

main.js

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

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

Schritt 3 - Erweiterte Konfiguration

Es gibt viele Konfigurationsoptionen, die wir verwenden könnten. Es liegt außerhalb des Rahmens dieses Artikels, Ihnen alles zu zeigen, sodass wir im folgenden Beispiel erläutern, wie die Konfiguration funktioniert. Wir sagen Aurelia im Grunde, dass sie es benutzen solldefault data binding language, default resources, development logging, router, history und event aggregator. Dies sind Standard-Plugins.

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

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

Note - Diese Einstellungen werden im nächsten Kapitel ausführlich erläutert.