Aurelia - Configurazione

In questo capitolo, ti mostreremo come configurare il framework Aurelia per le tue esigenze. A volte sarà necessario impostare una configurazione iniziale o eseguire del codice prima che l'app venga resa disponibile agli utenti.

Passaggio 1: creare main.js

Creiamo main.js file all'interno srccartella. All'interno di questo file configureremo Aurelia.

Devi anche dire ad Aurelia di caricare il modulo di configurazione. Puoi vedere la parte commentata nel seguente esempio.

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>

Passaggio 2: configurazione predefinita

Il codice seguente mostra come utilizzare la configurazione predefinita. configurela funzione permette di impostare manualmente la configurazione. Ci stiamo ambientandouse proprietà per specificare ciò di cui abbiamo bisogno.

main.js

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

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

Passaggio 3: configurazione avanzata

Ci sono molte opzioni di configurazione che potremmo usare. È fuori dallo scopo di questo articolo mostrarti tutto, quindi spiegheremo come funziona la configurazione nel seguente esempio. In pratica stiamo dicendo ad Aurelia di usaredefault data binding language, default resources, development logging, router, history e event aggregator. Questi sono set standard di plugin.

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

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

Note - Queste impostazioni verranno spiegate in dettaglio nel prossimo capitolo.