Hands-On Full Stack Web Development with Aurelia

Understanding components

In the last section, we saw that Aurelia requires a component to mount as the root of our entire application and by default, it was the app component. Now let's explore this component.

A component is composed of two files, the first written in JavaScript that contains the component's view model and the second one is the markup template written in HTML. They must have the same filename to help the view model resolve its view template. The component's view model is a JavaScript file, which exports a class that contains the component's attributes and functions. For example, this is the content of the app.js component:

export class App {  constructor() {    this.message = 'Hello World!';  }}

The App class declares a constructor ...