Aurelia - Plugin

Quando inizi a creare la tua app, la maggior parte delle volte vorrai utilizzare alcuni plugin aggiuntivi. In questo capitolo imparerai come usare i plugin nel framework Aurelia.

Plugin standard

Nell'ultimo capitolo, abbiamo visto come utilizzare la configurazione predefinita nel framework Aurelia. Se stai utilizzando la configurazione predefinita, sarà disponibile un set standard di plugin.

  • defaultBindingLanguage() - Questo plugin offre un modo semplice per connettersi view-model con view. Hai già visto la sintassi di associazione dati unidirezionale(${someValue}). Anche se è possibile utilizzare un altro linguaggio di binding, è consigliabile utilizzare il linguaggio di binding predefinito.

  • defaultResources() - Le risorse predefinite ci forniscono alcuni costrutti primitivi come if, repeat, compose, ecc. Puoi anche costruire questi costrutti da solo, ma poiché sono così comunemente usati, Aurelia lo ha già creato all'interno di questa libreria.

  • Router()- La maggior parte delle applicazioni utilizza un qualche tipo di routing. Quindi,Routerè una parte dei plugin standard. Puoi controllare di più sull'instradamento in un capitolo successivo.

  • History() - Il plug-in History viene solitamente utilizzato insieme a router.

  • eventAggregator()- Questo plugin viene utilizzato per la comunicazione tra componenti. Gestisce la pubblicazione e l'iscrizione a messaggi o canali all'interno della tua app.

Plugin ufficiali

Questi plugin non fanno parte della configurazione predefinita ma vengono utilizzati frequentemente.

  • fetch()- Il plug-in Fetch viene utilizzato per gestire le richieste HTTP. Puoi usare qualche altra libreria AJAX se vuoi.

  • animatorCSS() - Questo plugin offre un modo per gestire le animazioni CSS.

  • animator-velocity()- Invece delle animazioni CSS, puoi utilizzare la libreria di animazioni Velocity. Questi plugin ci consentono di utilizzare Velocity all'interno delle app Aurelia.

  • dialog() - Il plugin di dialogo offre una finestra modale altamente personalizzabile.

  • i18n() - Questo è il plugin per l'interiorizzazione e la localizzazione.

  • ui-virtualization() - La virtualizzazione è una libreria utile per la gestione di attività dell'interfaccia utente con elevate prestazioni.

  • validation() - Usa questo plugin quando hai bisogno di convalidare i tuoi dati.

Tutti i plugin spiegati sopra sono ufficialmente mantenuti dall'Aurelia Core Team al momento della stesura di questo tutorial. In futuro verranno aggiunti altri plugin utili. L'esempio seguente mostra come configurare la tua app per usare i plugin.

Installazione di plugin

Se, ad esempio, vogliamo utilizzare animator-css e animator-velocity, dobbiamo prima installarlo.

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-css
C:\Users\username\Desktop\aureliaApp>jspm install aurelia-animator-velocity

Nell'ultimo capitolo hai imparato come usare la configurazione manuale. Possiamo aggiungere i nostri plugin inmain.js file.

main.js

export function configure(aurelia) {
   aurelia.use
   .defaultBindingLanguage()
   .defaultResources()
   .developmentLogging()
   .router()
   .history()
   .eventAggregator()
   .plugin('aurelia-animatorCSS')
   .plugin('aurelia-animator-velocity')

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