Aurelia - Prima applicazione

In questo capitolo, spiegheremo l'app di partenza di Aurelia creata nel nostro ultimo capitolo. Ti guideremo anche attraverso la struttura delle cartelle, in modo da poter cogliere i concetti fondamentali dietro il framework Aurelia.

Struttura delle cartelle

  • package.json rappresenta la documentazione su npmpacchetti installati. Mostra anche la versione di questi pacchetti e fornisce un modo semplice per aggiungere, eliminare, modificare la versione o installare automaticamente tutti i pacchetti quando l'app deve essere condivisa tra sviluppatori.

  • index.htmlè la pagina predefinita dell'app come nella maggior parte delle app basate su HTML. È un luogo in cui vengono caricati script e fogli di stile.

  • config.jsè il file di configurazione del caricatore Aurelia. Non passerai molto tempo a lavorare con questo file.

  • jspm_packages è la directory per il SystemJS moduli caricati.

  • stylesè la directory di styling predefinita. Puoi sempre cambiare il luogo in cui conservi i file di styling.

  • srccartella è un luogo in cui trascorrerai la maggior parte del tempo di sviluppo. TieneHTML e js File.

File sorgenti

Come abbiamo già affermato, il srcdirectory è il luogo in cui verrà conservata la logica dell'app. Se guardi l'app predefinita puoi vederloapp.js e app.html sono molto semplici.

Aurelia ci consente di utilizzare il linguaggio di base JavaScript per le definizioni di classe. Il seguente esempio predefinito mostra la classe EC6.

app.js

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

Il message la proprietà è associata al modello HTML utilizzando ${message}sintassi. Questa sintassi rappresenta l'associazione unidirezionale convertita in stringa e mostrata nella visualizzazione del modello.

app.html

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

Come abbiamo già discusso nell'ultimo capitolo, possiamo avviare il server eseguendo il seguente comando nel file command prompt finestra.

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

L'applicazione verrà visualizzata sullo schermo.