Aurelia First Application

In the previous section, we defined some basic terms that will be used throughout this tutorial as we create our Aurelia app. Now, we will try to create our first Aurelia application.

For this example, we are going to use VS code for our basic Aurelia To do app. First, we will create the Todo class. Create a todo.js file and type:

first aurelia application

This class is used to monitor Todo’s description text and whether it has been done or not.

Next let’s create an app.js class. This class will compile the list of todos in an array.

first aurelia application

This will also have a header property containing the application name and a todo description property to monitor the description that the user wants to insert. The addTodo() and removeTodo() methods are also included to work with our Todo() class that was created earlier.

first aurelia application

That’s it! Maybe now you’re wondering where Aurelia is in this. Well as we’ve said, it’s part of Aurelia’s beauty. It’s designed to not get in your way! This is all plain vanilla JavaScript.

Now, we just need to tell Aurelia to render our heading. To do that, we have to create the view of the app. In an app.html file, type: 

first aurelia application

If you notice, every Aurelia view is wrapped with a <template> tag and you can use ES2015 string template syntax to render any property on a corresponding class in this view.

first aurelia application

The <form> tag enables the user to input an additional item to the todo list. Notice that our <input> value is bound to our todoDescription property and our form is bound to a trigger event that calls the addTodo() method.

Next, let us render the list of our Todo app. Create an unordered list that use the repeat syntax that will generate the list of todos.

first aurelia application

As you can see, the syntax also mirror the ES2015 for loop. As such, same techniques were used from the last example. The remove button is also added to call the removeTodo() method.

To finish it up, we will include a CSS binding that will make a strikethrough appear in the checked todos.

first aurelia application

Your app can now be run. In a command line, type au run –watch. The watch attribute is included to make it automatically refresh every time we make changes in our app. In your browser, go to localhost:9000.

first aurelia application

Amazingly, your app is now done. Aurelia enables this kind of simple and powerful development as your lines of code progresses. It helps you to get the job done and still stays out of your way while giving you top notch web performance.

On the next section, we will talk about creating components with Aurelia.

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.