In VivaSoft Limited We have some Clients who want to develop their project using aurelia in the frontend. So recently I have learned Aurelia to work with a Client. It is similar with Angular and VueJS. Here I will try to show you how to start a project with aurelia and its basic structure.
Aurelia is a Javascript Frontend Framework. It is very simple to understand and learn. As It is a frontend framework its purpose is to render UI in the browser. We can easily make SPA Web Applications using Aurelia.
Before learning it you must know JS as it is a JS framework and You should know Modern ES Syntax (ES6). You must know HTML and CSS very well also as it deals with Web UI.
You need to have NodeJS installed in your Machine as Aurelia uses NPM as Dependency Manager. NPM will be installed with NodeJS.
After Installing NodeJS run the following command in your cmd/bash terminal to install Aurelia CLI tool.
npm install -g aurelia-cli
Using aurelia-ali we can create a basic project with all the things we need to develop a project with Aurelia. To create a project go to the folder where you want to create your project and run `au new` command in your terminal. Give a name to your project and enter then a couple of options will appear select Default Setup. When it asks for “if you would like to install your new project’s dependencies” Select Yes to install Dependencies. Wait for a few seconds until this process finishes. After Successfully created go to the project folder and run `npm start` . it will start the project and You will see a Hello World! Page at http://localhost:8080/ in your Browser.
Now open the project folder in your Code Editor (I prefer VS Code for JS Development). If you see the Project Folder Structure you will see a src folder basically all our codes will be there. There you will see an app.js and app.html file which is rendering Hello World! Page. In Aurelia every page will have 2 files one will be a .js file and the other will be a .html file with the same name. HTML file will contain the html and css code related to this page which will be used for styling and UI layout and js will contain a Class with properties and methods which will be used for event handling and show dynamic content based on properties. JS file is called View Model and HTML file is called View.
In the view file there will be a <template> tag basically all your html will be wrapped by this tag. To show a value of a JS property in the View use ${PROPERTY_NAME}. In our generated project you will see ${message}. Message property is the property defined in our App Class (View Model) and the value of this property will be displayed in the browser. We can use any js expression here. ${ANY_EXPRESSION}
I will try to show you some basic things in Aurelia like data binding and event handling by doing a TODO Application. I will use app.js and app.html for now. I have created 3 properties and 2 methods. Here is the code below for our App Class.
export class App {
constructor() {
this.heading = ‘Todos’;
this.tasks = [];
this.description = ‘’;
}
addTask() {
if (this.description) {
this.tasks.push({
description: this.description,
done: false
});
this.description = ‘’;
}
}
removeTask(task) {
let index = this.tasks.indexOf(task);
if (index !== -1) {
this.task.splice(index, 1);
}
}
}
You can see that the first method will add a new task to our tasks property and the second one will remove a task which the user wants to delete. To capture which value user types for description we will use description property. Heading property will be used to show the Header text.
Our View file will look like this.
<template>
<h1>${heading}</h1>
<form submit.trigger=”addTask()”>
<input type=”text” value.bind=”description”>
<button type=”submit” disabled.bind=”!description”>
Add Task
</button>
</form>
</template>
I am using h1 tag to show the heading. I have created a form to get input from the user. You can see that input tag has value.bind property and the value is description. Basically thats how we tell aurelia that the description property will be used to store the value from user. This is called 2 way data binding because if we change description from js file it will display that value and If user changes input from browser the value will be changed also. For button disabled.bind will enable/disable this button based on description property. In form tag submit.trigger is binded with addTask method. When user submits this form addTask method will be called. There are many types of html properties in aurelia check out their doc (https://aurelia.io/)to know all the available properties and their behavior.
Now we need to show the list of tasks in a ul tag. We will loop through tasks array using repeat.for. This will repeat the li tag and display the values of a single task. See the code below.
<template>
<h1>${heading}</h1>
<form submit.trigger=”addTask()”>
<input type=”text” value.bind=”description”>
<button type=”submit” disabled.bind=”!description”>
Add Task
</button>
</form>
<ul>
<li repeat.for=”task of tasks”>
<input type=”checkbox” checked.bind=”task.done”>
<span css=”text-decoration: ${task.done ? ‘line-through’ : ‘none’}”>
${task.description}
</span>
<button click.trigger=”removeTask(task)”>Remove</button>
</li>
</ul>
</template>
click.trigger is used to handle click event and checked.bind is check/uncheck the check box based on done property of a task. If you run this project a form will be displayed in the browser. If user submits form after writing something in the text box a new task will be created and will be displayed in a list. User can delete a task by clicking remove button. And User can check/uncheck a particular task.
I will try to show you How to use Custom Element (Components) , Aurelia Router, Event Aggregator in later posts. Check out next post about Aurelia Router.
