Aurelia - Erste Bewerbung
In diesem Kapitel erklären wir die Aurelia-Start-App, die in unserem letzten Kapitel erstellt wurde. Wir werden Sie auch durch die Ordnerstruktur führen, damit Sie die Kernkonzepte hinter dem Aurelia-Framework verstehen.
Ordnerstruktur
package.json repräsentiert Dokumentation über npmPakete installiert. Es zeigt auch die Version dieser Pakete an und bietet eine einfache Möglichkeit, alle Pakete hinzuzufügen, zu löschen, zu ändern oder automatisch zu installieren, wenn die App von Entwicklern gemeinsam genutzt werden muss.
index.htmlist die Standardseite der App wie in den meisten HTML-basierten Apps. Hier werden Skripte und Stylesheets geladen.
config.jsist die Aurelia Loader-Konfigurationsdatei. Sie werden nicht viel Zeit damit verbringen, mit dieser Datei zu arbeiten.
jspm_packages ist das Verzeichnis für die SystemJS geladene Module.
stylesist das Standard-Styling-Verzeichnis. Sie können jederzeit den Ort ändern, an dem Sie Ihre Styling-Dateien aufbewahren.
srcOrdner ist ein Ort, an dem Sie den größten Teil Ihrer Entwicklungszeit verbringen werden. Es hältHTML und js Dateien.
Quelldaten
Wie bereits erwähnt, ist die srcVerzeichnis ist der Ort, an dem Ihre App-Logik gespeichert wird. Wenn Sie sich die Standard-App ansehen, können Sie das sehenapp.js und app.html sind sehr einfach.
Mit Aurelia können wir die JavaScript-Kernsprache für Klassendefinitionen verwenden. Das folgende Standardbeispiel zeigt die EC6-Klasse.
app.js.
export class App {
message = 'Welcome to Aurelia!';
}
Das message Eigenschaft wird mit an die HTML-Vorlage gebunden ${message}Syntax. Diese Syntax stellt eine Einwegbindung dar, die in eine Zeichenfolge konvertiert und in der Vorlagenansicht angezeigt wird.
app.html
<template>
<h1>${message}</h1>
</template>
Wie bereits im letzten Kapitel erläutert, können wir den Server starten, indem wir den folgenden Befehl in ausführen command prompt Fenster.
C:\Users\username\Desktop\aureliaApp>http-server -o -c-1
Die Bewerbung wird auf dem Bildschirm gerendert.