Aurelia - Première application

Dans ce chapitre, nous expliquerons l'application de démarrage Aurelia créée dans notre dernier chapitre. Nous vous guiderons également à travers la structure des dossiers, afin que vous puissiez saisir les concepts de base du framework Aurelia.

Structure des dossiers

package.json représente la documentation sur npmpackages installés. Il affiche également la version de ces packages et fournit un moyen simple d'ajouter, de supprimer, de modifier la version ou d'installer automatiquement tous les packages lorsque l'application doit être partagée entre les développeurs.
index.htmlest la page par défaut de l'application comme dans la plupart des applications basées sur HTML. C'est un endroit où les scripts et les feuilles de style sont chargés.
config.jsest le fichier de configuration du chargeur Aurelia. Vous ne passerez pas beaucoup de temps à travailler avec ce fichier.
jspm_packages est le répertoire du SystemJS modules chargés.
stylesest le répertoire de style par défaut. Vous pouvez toujours changer l'endroit où vous conservez vos fichiers de style.
srcLe dossier est un endroit où vous passerez la plupart de votre temps de développement. Il conserveHTML et js des dossiers.

Fichiers source

Comme nous l'avons déjà dit, le srcrépertoire est l'endroit où la logique de votre application sera conservée. Si vous regardez l'application par défaut, vous pouvez voir queapp.js et app.html sont très simples.

Aurelia nous permet d'utiliser le langage de base JavaScript pour les définitions de classe. L'exemple par défaut suivant montre la classe EC6.

app.js

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

le message propriété est liée au modèle HTML à l'aide de ${message}syntaxe. Cette syntaxe représente une liaison unidirectionnelle convertie en chaîne et affichée dans la vue modèle.

app.html

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

Comme nous l'avons déjà mentionné dans le dernier chapitre, nous pouvons démarrer le serveur en exécutant la commande suivante dans le command prompt la fenêtre.

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

L'application sera rendue à l'écran.