airboss001 · August 13, 2020 19:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
 </head>
 <!--
 Dumber gist uses dumber bundler, the default bundle file
 is /dist/entry-bundle.js.
 The starting module is pointed to aurelia-bootstrapper
 (data-main attribute on script) for Aurelia,
 The aurelia bootstrapper then loads up user module "main"
 (aurelia-app attribute on <body>) which is your src/main.ts.
 -->
 <body aurelia-app="main">
  <script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia-bootstrapper": "^2.3.3"
  }
 }
diff --git a/src\about.html b/src\about.html
 <template>
  <h3>My About Page</h3>
 </template>
diff --git a/src\about.ts b/src\about.ts
 export class About
 {
 }
diff --git a/src\app.html b/src\app.html
 <template>
  <ul>
    <li repeat.for="row of routes" class="${row.isActive ? 'active' : ''}">
       <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view swap-order="after"></router-view>
 </template>
diff --git a/src\app.ts b/src\app.ts
 import { inject } from 'aurelia-framework';
 import { Router } from 'aurelia-router';
 import routes from 'routes';
 import { CustomPipelineStep } from 'custom-pipeline-step';

 @inject(Router)
 export class App 
 {
  routes = [];
  
  constructor(private router: Router) {}
  
  configureRouter(config, router)
  {
    config.title = 'Sample App';
    config.options.pushState = true;
    config.options.hashChange = false;
    // Add a route filter to the authorize extensibility point.
    config.addPipelineStep('authorize', CustomPipelineStep); 
    config.map(routes);
    config.mapUnknownRoutes('./home');
  }
  
  attached()
  {
    this.routes = this.router.navigation;
  }  
 }
diff --git a/src\child-routes.ts b/src\child-routes.ts
 export default [
    // Authentication Routes
    {
        route: 'child1',
        name: 'child1',
        moduleId: 'child1',
        nav: true,
        title: 'Child First'
    },
    {
        route: 'child2',
        name: 'child2',
        moduleId: 'child2',
        nav: true,
        title: 'Child Second'
    },
  ]
diff --git a/src\child1.html b/src\child1.html
 <template>
  Child First: Passed Id = [${id}]
 </template>
diff --git a/src\child1.ts b/src\child1.ts
 export class Child1
 {
  id: string = "";
  activate(params, route, nav)
  {
     console.log(params, route, nav);

     this.id = route.settings.id;
  }
 }
diff --git a/src\child2.html b/src\child2.html
 <template>
  Child Second: Passed Id = [${id}]
 </template>
diff --git a/src\child2.ts b/src\child2.ts
 export class Child2
 {
  id: string = "";
  activate(params, route, nav)
  {
    console.log(params, route, nav);

    console.log(route);
    this.id = nav.parentInstruction.config.settings.id;
  }
 }
diff --git a/src\custom-pipeline-step.ts b/src\custom-pipeline-step.ts
 export class CustomPipelineStep
 {
  run(instruction, next)
    {
      console.log(instruction);
      
      //add an id field to settings
      if(instruction.name === "child2") instruction.params.id = "Custom Pipeline";
      
      return Promise.resolve()
        //.then(() => this.checkAuthorization(instruction, next))
        //.then(result => result || this.checkOrigin(instruction, next))
        .then(result => result || next());
    }
 }
diff --git a/src\home.html b/src\home.html
 <template>
  <h1>Home</h1>
  
  <ul>
    <li repeat.for="row of routes" class="${row.isActive ? 'active' : ''}">
       <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  
  <router-view swap-order="after"></router-view>
 </template>
diff --git a/src\home.ts b/src\home.ts
 import { inject } from 'aurelia-framework';
 import { Router } from 'aurelia-router';
 import routes from 'child-routes';
 import { CustomPipelineStep } from 'custom-pipeline-step';

 @inject(Router)
 export class Home
 {
  childRouter: any;
  routes = [];
  
  constructor(private parentRouter: Router) {}
  
  configureRouter(config, router)
  {
    this.childRouter = router;
    config.title = 'Child Router';
    config.options.pushState = true;
    config.options.hashChange = false;
    config.map(routes);
    config.mapUnknownRoutes('./child-first');
  }
  
  activate(params, route, nav)
  {
    console.log(params, route, nav);
    this.modRoute = this.childRouter.navigation.find(i => {
      return i.config.name === "child1"
    });
    
    if(this.modRoute) this.modRoute.config.settings.id = route.settings.id;
    
    this.routes = this.childRouter.navigation;
  }  
 }
diff --git a/src\main.ts b/src\main.ts
 import {Aurelia} from 'aurelia-framework';

 export function configure(aurelia: Aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging('info');
  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/src\routes.ts b/src\routes.ts
 export default [
    // Authentication Routes
    {
        route: 'home',
        name: 'home',
        moduleId: 'home',
        nav: true,
        title: 'Home',
      settings: {id: 'home'}
    },
    {
        route: 'about',
        name: 'about',
        moduleId: 'about',
        nav: true,
        title: 'About',
      settings: {id: 'about'}
    },
  ]
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to aurelia-bootstrapper
	(data-main attribute on script) for Aurelia,
	The aurelia bootstrapper then loads up user module "main"
	(aurelia-app attribute on <body>) which is your src/main.ts.
	-->
	<body aurelia-app="main">
	<script src="/dist/entry-bundle.js" data-main="aurelia-bootstrapper"></script>
	</body>
	</html>
	<template>
	<ul>
	<li repeat.for="row of routes" class="${row.isActive ? 'active' : ''}">
	<a href.bind="row.href">${row.title}</a>
	</li>
	</ul>
	<router-view swap-order="after"></router-view>
	</template>
	import { inject } from 'aurelia-framework';
	import { Router } from 'aurelia-router';
	import routes from 'routes';
	import { CustomPipelineStep } from 'custom-pipeline-step';

	@inject(Router)
	export class App
	{
	routes = [];

	constructor(private router: Router) {}

	configureRouter(config, router)
	{
	config.title = 'Sample App';
	config.options.pushState = true;
	config.options.hashChange = false;
	// Add a route filter to the authorize extensibility point.
	config.addPipelineStep('authorize', CustomPipelineStep);
	config.map(routes);
	config.mapUnknownRoutes('./home');
	}

	attached()
	{
	this.routes = this.router.navigation;
	}
	}
	export default [
	// Authentication Routes
	{
	route: 'child1',
	name: 'child1',
	moduleId: 'child1',
	nav: true,
	title: 'Child First'
	},
	{
	route: 'child2',
	name: 'child2',
	moduleId: 'child2',
	nav: true,
	title: 'Child Second'
	},
	]
	export class Child1
	{
	id: string = "";
	activate(params, route, nav)
	{
	console.log(params, route, nav);

	this.id = route.settings.id;
	}
	}
	export class Child2
	{
	id: string = "";
	activate(params, route, nav)
	{
	console.log(params, route, nav);

	console.log(route);
	this.id = nav.parentInstruction.config.settings.id;
	}
	}
	export class CustomPipelineStep
	{
	run(instruction, next)
	{
	console.log(instruction);

	//add an id field to settings
	if(instruction.name === "child2") instruction.params.id = "Custom Pipeline";

	return Promise.resolve()
	//.then(() => this.checkAuthorization(instruction, next))
	//.then(result => result \|\| this.checkOrigin(instruction, next))
	.then(result => result \|\| next());
	}
	}
	<template>
	<h1>Home</h1>

	<ul>
	<li repeat.for="row of routes" class="${row.isActive ? 'active' : ''}">
	<a href.bind="row.href">${row.title}</a>
	</li>
	</ul>

	<router-view swap-order="after"></router-view>
	</template>
	import { inject } from 'aurelia-framework';
	import { Router } from 'aurelia-router';
	import routes from 'child-routes';
	import { CustomPipelineStep } from 'custom-pipeline-step';

	@inject(Router)
	export class Home
	{
	childRouter: any;
	routes = [];

	constructor(private parentRouter: Router) {}

	configureRouter(config, router)
	{
	this.childRouter = router;
	config.title = 'Child Router';
	config.options.pushState = true;
	config.options.hashChange = false;
	config.map(routes);
	config.mapUnknownRoutes('./child-first');
	}

	activate(params, route, nav)
	{
	console.log(params, route, nav);
	this.modRoute = this.childRouter.navigation.find(i => {
	return i.config.name === "child1"
	});

	if(this.modRoute) this.modRoute.config.settings.id = route.settings.id;

	this.routes = this.childRouter.navigation;
	}
	}
	import {Aurelia} from 'aurelia-framework';

	export function configure(aurelia: Aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging('info');
	aurelia.start().then(() => aurelia.setRoot());
	}