Aurelia - Plugins

When you start building your app, most of the time you will want to use some additional plugins. In this chapter, you will learn how to use plugins in Aurelia framework.

Standard Plugins

In the last chapter, we saw how to use default configuration in Aurelia framework. If you are using default configuration, standard set of plugins will be available.

  • defaultBindingLanguage() − This plugin offers an easy way to connect view-model with view. You already saw one-way data-binding syntax (${someValue}). Even though you could use some other binding language, it is a recommended practice to use default binding language.

  • defaultResources() − Default resources give us some primitive constructs such as if, repeat, compose, etc. You can even build these constructs on your own, but since they are so commonly used, Aurelia already created it inside this library.

  • Router() − Most of the applications use some kind of routing. Hence, Router is a part of the standard plugins. You can check more about routing in a subsequent chapter.

  • History() − History plugin is usually used together with router.

  • eventAggregator() − This plugin is used for cross-component communication. It handles publishing and subscribing to messages or channels inside your app.

Official Plugins

These plugins aren't part of the default configuration but are frequently used.

  • fetch() − Fetch plugin is used for handling HTTP requests. You can use some other AJAX library if you want.

  • animatorCSS() − This plugin offers a way of handling CSS animations.

  • animator-velocity() − Instead of CSS animations, you can use Velocity animation library. These plugins enable us to use Velocity inside Aurelia apps.

  • dialog() − Dialog plugin offers a highly customizable modal window.

  • i18n() − This is the plugin for internalization and localization.

  • ui-virtualization() − Virtualization is a useful library for handling large performance heavy UI tasks.

  • validation() − Use this plugin when you need to validate your data.

All plugins explained above are officially maintained by the Aurelia Core Team at the moment of writing this tutorial. There will be some other useful plugins added in future. Following example shows how to configure your app to use plugins.

Installing Plugins

If, for example, we want to use animator-css and animator-velocity, we need to install it first.

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

In the last chapter, you learnt how to use manual configuration. We can add our plugins in main.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());
}
Advertisements