Routes

The Jagwah Router can be used to perform tasks when the URL (history api) changes.

Usage

You can add Routes to Jagwah with the Route() method.

jagwah.Route(Route)

Path

All Routes require a static $route property to be set which should be a relative URL.

@Route('/account')
export class AccountRoute {
  constructor() {}
}

Before & After

The before and after methods of a Route can be async methods and will be called before and after a route has been rendered. Once the before method has been called an internal jagwah.update() which will update any Templates and then the after method will be called.

import { Jagwah } from 'jagwah';
import { AccountTemplate } from '../templates';
​
const jagwah = new Jagwah();

export class AccountRoute {
  static $route = '/account';
  constructor() {}
  public async before() {
    jagwah.template(AccountTemplate);
  }
  public async after() {
    // ...
  }
}
jagwah.Route(AccountRoute);

Templates

It's pretty likely that you'll want to change templates based on the current Route, to do this, you can set a static $templates property on the Route class with an array of Templates.

import { AccountTemplate } from '../templates';
​
@Route('/account')
@Templates([AccountTemplate])
export class AccountRoute {
  constructor() {}
}

Middleware

Middleware can be defined as a class and is used a little differently to Providers, Routes and Templates.

Middleware is constructed by the caller (not Jagwah), this allows arbitrary values to be passed in during construction. This may change in the future. Each Middleware must have a task() method which will be called by Jagwah when the middleware is used.

The example below shows a Middleware used to check if a user is signed in.

routes/middleware/signed-in.ts

export class SignedInMiddleware {
  constructor(
    private redirect: string = '/account/sign/in',
  ) {}
  public async task(
    @Inject('$jagwah') $jagwah: Jagwah,
    @Inject('$account') $account: AccountProvider
  ) {
    if($account.authenticated !== true) {
      $jagwah.router.navigate(this.redirect)
    }
  }
}

routes/account.ts

@Route('/account')
@Templates([AccountTemplate])
@Middleware('before', [new SignedInMiddleware('/account/sign/in')])
export class AccountRoute {
  constructor() {}
}

Redirection does not currently stop Route execution, see this issue for more information.