SPA Nested Layout Demo

Middleware based, nested routing

Client-side routing, when it makes sense

Crossbow supports the concept of nested, page-based routing.

You can opt-in to having client-side routing only in certain pages - which means your other static content does not pay the price of being client-side driven.

Server-only routing

Conceptually, you can think of the nested routing for the page you're viewing as being made up of 3 separate router outlets.

Each outlet can register middlewares, making things like auth/guards easy.


<app-outlet path="demos">
  <app-outlet path="spa">
    <app-outlet path="nested" />
  </app-outlet>
</app-outlet>

Client-side routing

Adding client="true" to any outlet causes it & other outlets below it to be handled client-side.

The router is loaded on-demand and does not impose any costs for pages that don't use it


<app-outlet path="demos">
  <app-outlet path="spa">
    <app-outlet path="nested" client="true" />
  </app-outlet>
</app-outlet>

TRY IT OUT

Clicking any of the links within the orange border.

Crossbow will load the relevant module, execute it's middlewares and then replace the contents of the router outlet.

There's more... much more

Powerful, aggregated routing logic

Each 'layer' of nesting has the opportunity to affect what happens when navigation occurs. <head> elements, document titles, route guards and more.