• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Introducing Aurelia Router Loader

Aurelia 1 · March 3, 2016

This is a fun little plugin I wrote not long ago for being able to specify routes in JSON files and then load them into your Aurelia application.

In my use-case recently I needed to define a bunch of routers and while I could have used child routers, at present child routers have limitations around things like triggering events and whatnot. I keep things simple by using top-level routes.

As you can imagine, a simple application can grow into 10+ routes with ease, especially with an administration panel. This is why splitting routes into separate files can make your life easier, especially on a large team.

Install

Download the plugin from the Jspm registry like so:

jspm install aurelia-router-loader

Setup

Inside of your main.js/main.ts file where you bootstrap Aurelia, simple register the plugin like you would any other Aurelia plugin.

export function configure(aurelia) {
    aurelia.use
        .standardConfiguration()
        .developmentLogging()
        .plugin('aurelia-router-loader', config => {
            config.defineRoutes([
                '/routes/main.json',
                '/routes/admin.json' 
            ]);
        });

    aurelia.start().then(a => a.setRoot());
}

The above example will look for two routing files inside of a root folder called “routes” one up from the src directory. You can put your routes anywhere you like. If you check out the Github repository, the readme has an example of how routes should be defined. They must be in valid JSON format and contained within an array.

Limitations

Your default route must be specified the original way inside of app.js/app.ts. This is a limitation I am working to remove. It means your first landing route must be manually specified, the rest can go into a JSON file no problem.

Also, your routes need to be valid JSON, using double quotes for properties and values. They must be defined as objects and inside of an array. A basic empty route file will look like this:

[]

The code

You can see the code here on Github.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ats
Ats
7 years ago

Regarding the limitations You mentioned – if i understand You correctly i have cure for all of them ๐Ÿ˜‰
Why don’t You just define routes in another file that exports them, and include them through imported variable, that contains “normal” routes written in javascript/typescript, just the content is externalized to another file?

0
Dmitriy
Dmitriy
6 years ago

bought your book today , very cool keep it up

0
Kristian Mandrup
Kristian Mandrup
6 years ago

Could you please, please write an other post where you go more in depth on the router, using child routers etc.
How do you build your routing logic/routers for large scale (nested) apps.
What are the best practices you have uncovered.
I feel the router is the biggest stumbling block for getting started with Aurelia beyond Hello World, and the biggest mystery… Very hard to find docs on anything beyond having one single App router, monolithic style.
Cheers ๐Ÿ™‚

PS: In frustration I’m embarking on a new project “Not your grandfather’s router” – building an Aurelia router that makes sense, is really composable and provides sane error messages which actively help you track down what you might have screwed up… (or just made a typo) – inspired by the error message system of Elm, using reg exp and perhaps even fussy matching on names to see what you might have intended…

Let me know if you wanna help out on this project ๐Ÿ˜‰

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • The Most Common iPhone Passcodes (and how to guess them)
  • Wild Natural Deodorant Review
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 ยท Dwayne Charrington ยท Log in

wpDiscuz