config.ts

The config file contains the application specific logic and is broken into a number of keys.

contentElementId

contentElementId: string = "application";

This tells the routing which element in index.html should hold the application view associated with the state of the URL. This is the location on the page that displays the components.

<!-- DOM element for holding the dinamic routed content -->
<div class="container" style="max-width: 100%;">
    <div id="application">Loading...</div>
</div>

routes

routes: Route[] = [
        // a component to handle any errors, such as 404, must be first
        new Route("error/?code:number", ClientError), 
        // actual content pages
        new Route("", Home),
    ];

Each JSPA application will have differnt routing logic and use differnt components. This section of the config.ts file identifes to the routing which componet should be rendered based on the URL pattern.

new Route("path", Class);

The path associated with a route is not related to phisical location of the componets or their templates, but rather to a lofgical representation of an application state, based on the part of the URL following the #

So in the exaple above the URL http://myApp.io/# will route the user to the Home component, as there is no URL after # and the Home route maps to an empty string.

Routes do not have to be hard coded but can contain variables, however the route much match the pattern exacally, so the configured route

new Route("error/?code:number", ClientError),

Will only map to the error component if the URL after the # is (for example) error/404or error/401. error and error/nasty wont

There are two types of variables that can be passed in route paths, which are mapped to regular expressions

/?name:number/ => RegExp = RegExp("[0-9]{1,}", "i");

/?name:string/ => RegExp = RegExp("[0-9a-z]{1,}", "i");

URL routs can contain any number of static segments and variable segments in any position. The parameters on the URL are passed to the component are parsed off the URL and supplied to the components draw(args: any) method as an object.

new Route("employee/?id:number", Employee)
http://myApp.io/#employee/1

Employee draw() would recieve
{
    id: 1
}


new Route("shelf/?shelf:number/book/?ISBN:string", Book)
http://myApp.io/#shelf/4/book/ABC123456

Book.draw() would recieve
{
    shelf: 4,
    ISBN: "ABC123456"
}