Vivasoft-logo

Configuring Aurelia Router and Its Basics

Routing is necessary for users to navigate through the whole web site. To make SPA project routing in frontend is must. Configure aurelia router in a aurelia project is pretty easy. First Create a fresh project using aurelia-cli. Check out this post how to do that.

To configure router we need to add configureRouter method in app.js file. See this code below.

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = "Aurelia Router";
    config.map([
     {
       route: ["", "home"],
       name: "home",
       moduleId: PLATFORM.moduleName("home")
     },
     {
       route: "user/:id",
       name: "user",
       moduleId: PLATFORM.moduleName("user")
     },     {
       route: "about",
       name: "about",
       moduleId: PLATFORM.moduleName("about")
     },
     {
       route: "contact",
       name: "contact",
       moduleId: PLATFORM.moduleName("contact")
     },
    ]);
  }
}

We will create 4 pages Home, User , About and Contact Page. For each page there will be 2 files with the same name one will be .js and the other will be .html. So we need 8 files for these 4 pages. File contents will be as follows

home.js

export class Home {}

home.html

<code class="language-markup">
<template>
  <h1>Home Page</h1>
</template>

user.js

export class User {
  userId = '';
  activate(data){
    this.userId = data.id;
  }
}

Here we define active method which will be called and data object will contain route parameters value as an object.

user.html

<template>
  <h1>User Page</h1>
  <p>User ID ${userId}</p>
</template>

about.js

export class About {}

about.html

<template>
  <h1>User Page</h1>
  <p>User ID ${userId}</p>
</template>

contact.js

export class Contact {}

contact.html

<template>
  <h1>Contact Page</h1>
</template>

You will see we are mapping routes by using config.map . This accepts an array of route object which registers url and the page it will display. route is the url pattern and we can specify route parameter also by using :param in the pattern, name is the route name, moduleId is the component/page name.

config.title is just setting the value of html title tag and a router instance is passed in the function parameter which is setting the router variable which will be used to redirect and change url programmatically and for other stuff.

Now only one thing left we need to tell in app.html where our page will be displayed. there is a <router-view> tag for this. So Our app.html file will look like this.

<template>
   <ul>
    <li><a href="/">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
   </ul>
   <router-view></router-view>
</template>

router-view will be replaced by actual page based on the url. Now If you run the project you will see something like this. We put some links in the li tag so user can navigate by clicking. You will notice there is a # tag in the url which tells aurelia that match url pattern after # and render view accordingly.

home Configuring Aurelia Router and Its Basics

If you click on the links (Home, About, Contact), corresponding page will be displayed and if you go to http://localhost:8080/#user/1 it will display user page with the route parameter value which was passed with url.

Check out my next post about Custom Elements

Yml or Yaml for DevOps

As software engineers, we are always learning new tech stacks as we process our careers. Everyone who works on any short of software farm all came across a term called DevOps. As the name suggests, ...

Working with DocuSign, Authorization and Sending Document for Signature

DocuSign is a well known platform where users can send their document for signing via email or your app. I will try to show you how DocuSign authorize an user and how can we send a document to users ...

Worker Pool in Golang

Tags: #advance #topic #golang #goroutine #channels #workerpool #threadpool Often we end up with some work which is so time-consuming that if we’re able to assign, multiple person/worker, to do ...
java web application

Top 9 Practical Benefits Of Using Java Web Application

Java web application frameworks have one of the greatest and largest communities of software engineers in the world. Companies can build a team with the help of this community at ease. There are different communities to help beginners, intermediate as well as expert developers.

Read More