Aurelia App Config & Plugins

On the previous article,  we gave an overview on how Aurelia can add components dynamically. In this post, we’ll be tackling Aurelia App Configuration and Plugins.

To start, create a main.js file inside a src folder. Configurations of Aurelia is done in this folder. Then, you must command Aurelia to load the configuration module.

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>

To manually set the default configuration, we use the function configure. Then set the use property to address what we need.

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

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

To do more advanced configurations, there are a lot of options that we can use. But this article can only show you how the configurations work with the code below. The standard set of plugins are default data binding language, default resources, development logging, router, history and event aggregator.

export function configure(aurelia) {

  aurelia.use
  .defaultBindingLanguage()
  .defaultResources()
  .developmentLogging()
  .router()
  .history()
  .eventAggregator();

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

The term plugins are used in the previous paragraph. Plugins are often used when you start building your Aurelia app. From the last examples, we showed you how to use default configurations and they come with the standard set of plugins.

defaultBindingLanguage()

This plugin is used to easily connect view-model with view. Although you already knew the one-way data binding syntax (${sampleValue}), it is encouraged to practice this default binding language.

defaultResources()

Primitive constructs like if, repeat and compose are sample of default resources. Aurelia already created these in its library because it’s commonly used.

Router()

Because most apps use some kind of routing, it became a part of a standard plugin.

History()

It is usually paired with router plugin

eventAggregator()

Takes care of publishing and subscribing to the messages/channels inside your app. Basically, it’s a plugin used for cross component communication.

If there is standard plugins, There is also the official plugins. They are not part of the standard plugins but used frequently.

fetch()

Used for handling HTTP requests. You can also use AJAX library depending on your preference.

animatorCSS()

It is a way to handle CSS animations.

animator-velocity()

This is an alternative animation library instead of CSS animation. This plugin enables Velocity to be used inside Aurelia.

dialog()

It is a very customizable modal window plugin

i18n()

It is a plugin for internalization and localization

ui-virtualization()

Used for handling large performance and heavy UI tasks, this plugin is used.

validation()

It is a plugin for data validation.

Above plugins are officially maintained by the Aurelia Core Team as this article is written. It is likely that there will be more useful plugins in the future.

Next is configuring these plugins to use in your applications.

For example, we will use animator-css and animator-velocity. We need to install it first.

In your command prompt:

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

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

Then add the plugins in our main.js file

export function configure(aurelia) {

  aurelia.use
  .defaultBindingLanguage()
  .defaultResources()
  .developmentLogging()
  .router()
  .history()
  .eventAggregator()
  .plugin(‘aurelia-animatorCSS’)
  .plugin(‘aurelia-animator-velocity’)

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

On the next article, we will discuss Binding Behaviors.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.