Welcome to Part 5 of this series reviewing the Pluralsight course Aurelia Fundamentals by Brian Noyes.

Brian is CTO and Architect at Solliance, an expert technology solutions development company.

Brian is a Microsoft Regional Director and MVP, and specializes in rich client technologies including XAML and HTML 5, as well as building the services that back them with WCF and ASP.NET Web API.

You can follow Brian through his blog at http://briannoyes.net

Also in this series:

Part 1 – Aurelia Prerequisites

Part 2 – Getting Started

Part 3 – Implementing MVVM

Part4 – Using Depending Injection

Aurelia Routing Fundamentals

Routing Overview

Traditional Web application navigation moves from one page to another as GET requests are sent to the server and the server sends down HTML for the new page.

In a single page app, a GET request is still made for a given page, but the page contains the whole application.

There is a client side mechanism for swapping views in and out and this is called Routing.

MVVM applications are typically a hierarchy of Views and ViewModels. A good Routing system allows us to treat any of these as a container for navigation, and the Aurelia Router does just that.

Defining and Configuring Routes

1. Define container routing with <router-view>
2. Implement configureRouter() in ViewModel
3. Define modules for routes

Route properties to learn are:

• route
• moduleId
• title
• name
• nav
• href
• viewPorts

In this lesson Brian describes all of these properties, except viewPorts which are covered in the next module.

Removing Unnecessary ViewModels

This lesson revisits the code written in the module on implementing MVVM.

Event.js is removed and the Events.html template is updated to point to the Event.html view rather than the deleted ViewModel.

This demonstrates that we don’t always need to have a ViewModel.

Defining and Using Basic Routes

By convention the router looks for a method on each ViewModel named configureRouter.

configureRouter takes two object arguments config and router.

Brian adds some code to define the config object. The map contains only the route and the moduleId, which is the minimum required.

In shell.html he replaces the compose element with a <router-view> element. This works as it did before.

Also see the Aurelia cheat sheet’s routing examples.

Routing to Multiple Views and Dynamically Generating Nav Menus

In this lesson we add a Discussion module and a Job Board module by defining more routes.

In config.map we add name, title and nav. We also create new routes for jobs and discussions.

It’s also time to organize our file structure: we create new directories for discussion, events, jobs and sponsors. After moving the Views and ViewModels into these directories we get errors. This requires several filepath updates in shell.html, events.html and events.js

With the new routes defined, we can replace the static hyperlink list items for jobs and discussions with a databound single list item that uses repeat.for.

We can now click on Jobs to see the Jobs page, and Discussion for the Discussion page, and the back and forward buttons still work correctly.

Building out the Client Services Layer of an App

Brian adds eventsData.js which defines a variable eventsData as an array of event data. Each item in this array contains id, description, datetime, title, speaker and image.

Also added to the project is all of the speaker images, and a new service dataRepository.js

Brian says datetimes are painful in JavaScript and recommends the library moment.js. I regularly use moment in my projects, and second this endorsement.

I also recommend watching the course Date and Time Fundamentals. For more information on that see Top 10 Pluralsight Courses.

Brian adds a method getEvents, which uses a promise to get the Events data. events.js is updated to use our new dataRepository.getEvents

We now have dynamically loaded data for dozens of events.

Passing and Consuming Parameters in Routing

There’s two ways to encode routing parameters:

1. URL Parameters
2. Query String Parameters

There are a number of ways to consume routes in our ViewModels:

1. Implement activate method on ViewModel
2. Generate URLs with router.generate method
3. Programmatically navigate to another route with router.navigate or router.navigateToRoute

Using URL Parameters

Brian adds a new route to eventDetail in shell.js, and creates the template in eventDetail.html.

Aurelia supports pushstate. Dwayne Charrington has written Getting Aurelia To Work With HTML5 pushState with all the details on this.

Push state is part of the history API. The best framework agnostic tutorial is Mozilla Developer Network’s Manipulating the browser history.

If you are considering React as an alternative to Aurelia, you may be interested to know that React Router also supports pushstate.

Generating Route URLs from Routing Configuration

We have a date that looks broken – a simple bug that has nothing to do with the Aurelia framework, and is fixed by removing one line of code.

Next we want to use dynamically generated links. We have some hard-coded links, for example:

href='#/eventDetails/${event.id}'

We see how to add the name ‘eventDetail’ to our route definition in shell.js, import Router into events.js and update our constructor to use it.

With this in place we can change the link to be data bound:

href.bind='event.detailUrl'

Using Query String Parameters

This demo shows how we can use Query String parameters to pass information to a ViewModel to drive it’s behavior.

Brian says in the Beta, Query String parameters without a # won’t work. This may have been fixed in the Release Candidate, I will need to check that…

The example URL that is see is:

localhost:2112/index.html#?speaker=noyes

This displays only the speaking events that Brian was the speaker for.

Programmatic Controlling Navigation

We will sometimes want to programmatically cause navigation to occur to one of our routes.

Brian adds a button to our events view with the click.trigger binding to a new method goToDiscussion().

This method is simply:

this.router.navigate('#/discussion');

We see that we could also use the navigateToRoute method.

Part 6 – Aurelia Routing Beyond the Basics is coming soon