Aurelia - Plugins

Lorsque vous commencez à créer votre application, la plupart du temps, vous souhaiterez utiliser des plugins supplémentaires. Dans ce chapitre, vous apprendrez à utiliser les plugins dans le framework Aurelia.

Plugins standard

Dans le dernier chapitre, nous avons vu comment utiliser la configuration par défaut dans le framework Aurelia. Si vous utilisez la configuration par défaut, un ensemble standard de plugins sera disponible.

  • defaultBindingLanguage() - Ce plugin offre un moyen facile de se connecter view-model avec view. Vous avez déjà vu la syntaxe de liaison de données à sens unique(${someValue}). Même si vous pouvez utiliser un autre langage de liaison, il est recommandé d'utiliser le langage de liaison par défaut.

  • defaultResources() - Les ressources par défaut nous donnent des constructions primitives telles que if, repeat, compose, etc. Vous pouvez même construire ces constructions vous-même, mais comme elles sont si couramment utilisées, Aurelia les a déjà créées dans cette bibliothèque.

  • Router()- La plupart des applications utilisent une sorte de routage. Par conséquent,Routerfait partie des plugins standard. Vous pouvez en savoir plus sur le routage dans un chapitre suivant.

  • History() - Le plugin History est généralement utilisé avec router.

  • eventAggregator()- Ce plugin est utilisé pour la communication entre composants. Il gère la publication et l'abonnement aux messages ou aux canaux dans votre application.

Plugins officiels

Ces plugins ne font pas partie de la configuration par défaut mais sont fréquemment utilisés.

  • fetch()- Le plugin Fetch est utilisé pour gérer les requêtes HTTP. Vous pouvez utiliser une autre bibliothèque AJAX si vous le souhaitez.

  • animatorCSS() - Ce plugin offre un moyen de gérer les animations CSS.

  • animator-velocity()- Au lieu d'animations CSS, vous pouvez utiliser la bibliothèque d'animations Velocity. Ces plugins nous permettent d'utiliser Velocity dans les applications Aurelia.

  • dialog() - Le plugin Dialog propose une fenêtre modale hautement personnalisable.

  • i18n() - Ceci est le plugin pour l'internalisation et la localisation.

  • ui-virtualization() - La virtualisation est une bibliothèque utile pour gérer les tâches d'interface utilisateur lourdes de hautes performances.

  • validation() - Utilisez ce plugin lorsque vous avez besoin de valider vos données.

Tous les plugins expliqués ci-dessus sont officiellement maintenus par l'équipe Aurelia Core au moment de la rédaction de ce tutoriel. Il y aura d'autres plugins utiles ajoutés à l'avenir. L'exemple suivant montre comment configurer votre application pour utiliser des plugins.

Installer des plugins

Si, par exemple, nous voulons utiliser animator-css et animator-velocity, nous devons d'abord l'installer.

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

Dans le dernier chapitre, vous avez appris à utiliser la configuration manuelle. Nous pouvons ajouter nos plugins dansmain.js fichier.

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());
}