Vorstellung des JavaScript-Frameworks Aurelia

Seite 2: Projektstruktur und Navigation

Aufbau einer Projektstruktur

Um mit dem Projekt zu starten, ist das einfachste Vorgehen, den bestehenden GitHub-Code lokal mittels folgendem Befehls zu klonen:

git clone https://github.com/aurelia/skeleton-navigation.git

Damit wird im aktuellen Ordner ein Unterordner "skeleton-navigation" erstellt, in den man im Anschluss wechselt.

Als nächster Schritt sind die benötigten Werkzeuge zu installieren. Sie nutzen Node.js und werden durch dessen Paketmanager npm geladen. Die ersten beiden Kommandos installieren eine globale Instanz von Gulp und JSPM, das letzte hingegen die lokalen Abhängigkeiten des Projekts.

// globale Instanzen
npm install -g gulp
npm install -g jspm
   
// lokale Projektabhängigkeiten
npm install

Abschließend sind noch die Frontend-Abhängigkeiten mittels JSPM zu installieren:

jspm install -y

Aktuell ist eine eigene Kommandozeilenanwendung namens Aurelia-CLI in Entwicklung, die den Einrichtungsprozess künftig noch vereinfachen soll. Alternativ dazu steht für einen schnellen Start bereits ein Yeoman-Generator zur Verfügung.

Bei näherer Betrachtung des Pakets lässt sich erkennen, dass Dateien mit Quellcode im Ordner src abgelegt und in den Ordner dist transpiliert werden. Des Weiteren werden Unit- und E2E-Tests im Ordner test gesammelt.

Den Ausgangspunkt des Projekts stellt die Datei index.html dar. Das Musterbeispiel verwendet Twitter Bootstrap und Font Awesome. Die CSS-Datei für Letzteres ist im head-Bereich einzubinden.

<!doctype html>
<html>
 <head>
  <title>Aurelia</title>
  <link rel="stylesheet" type="text/css" 
   href="jspm_packages/npm/font-awesome@4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="styles/styles.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>

Zwischen den body-Tags teilt das Attribut aurelia-app mit, dass an der Stelle die App zu laden und einzubetten ist. Der Wert des Attributs verweist auf eine manuelle Bootstrapping-Datei, in der sich gesondert mitteilen lässt, welche zusätzlichen Plug-ins Aurelia beim Start laden soll. Ist der Wert leer, wird per Konvention zur Datei app.js navigiert und ein automatisches Bootstrapping vorgenommen.

Nachfolgend sind der SystemJS-Loader sowie die JSPM-Konfigurationsdatei referenziert, die der Befehl jspm install erzeugt. Sie dient als einfache Verknüpfung zwischen Modulen und ihren Speicherorten. Die Überladung System.config teilt mit, dass sämtliche Projektdateien innerhalb des Ordners dist gesucht werden, um die transpilierten Varianten zu erhalten. Abschließend startet die Anwendung durch den Import des aurelia-bootstrapper.

  <body aurelia-app="animation-main">
    <div class="splash">
      <div class="message">Aurelia Navigation Skeleton</div>
      <i class="fa fa-spinner fa-spin"></i>
      </div>
        
      <script src="jspm_packages/system.js"></script>
      <script src="config.js"></script>
      <script>
         System.config({
          "paths": {
          "*": "dist/*.js"
        }
      });
      </script>
      <script>
        System.import('aurelia-bootstrapper');
      </script>
  </body>
</html>

Wie erwähnt, gibt aurelia-app den Ort des manuellen Bootstrappers an. Die referenzierte Datei animation-main.js exportiert dabei per Konvention eine Funktion configure, die den Startprozess übernimmt. Im gezeigten Fall wird Aurelia mitgeteilt, dass das übliche Set an Konventionen, dass Loggen von Entwicklerhinweisen sowie ein zusätzliches Plug-in für CSS-Animationen zu laden ist. Die Funktion start des Objekts aurelia liefert sodann ein Promise zurück, das nach dem Ladevorgang die Applikationen startet und nach einer Datei app.js sucht.

export function configure(aurelia) {
  aurelia.use
  .standardConfiguration()
  .developmentLogging()
  .plugin('aurelia-animator-css');
    
  aurelia.start().then(a => a.setRoot('app', document.body));
}

Anwendungsstart und Seitennavigation

Die Datei app.js dient als primärer Einstieg der Anwendung. Unter anderem eignet sie sich dafür, eine applikationsweite Navigation zu definieren. Hier kommt bereits das Dependency-Injection-System (DI) inject von Aurelia ins Spiel. Es dient zur Instanziierung von Modulen und sorgt somit für eine losere Koppelung.

Dazu ist inject gemeinsam mit dem Router zu importieren, der die Seitennavigation ermöglicht. Danach ist die Skript-Datei von Bootstrap und deren CSS-Markup einzubinden.

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import 'bootstrap';
import 'bootstrap/css/bootstrap.css!';

Das nächste Konstrukt ist ein ES2016-Dekorator, der die erstellte Instanz des Routers an den Konstruktor der Klasse App übergibt. Die Konfiguration dessen geschieht nun mit einfachen Objekten, die neben der URL-Route route auch die zu verwendende moduleId, den Boolean nav und den Seitentitel umfassen. moduleId ist per Konvention der relative Pfad zur Seite, während nav zum Steuern der Anzeige zum Einsatz kommt.

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
    config.map([
      { route: ['','welcome'],  moduleId: './welcome',
      nav: true, title:'Welcome' },
      { route: 'flickr',        moduleId: './flickr',
       nav: true },
      { route: 'child-router',  moduleId: './child-router',
       nav: true, title:'Child Router' }
    ]);
    });
  }
}

Alle Angebote

Newsletter heise-Bot Push Push-Nachrichten

${intro} ${title}