jdanyow/app.html

## app.html
<template>
  <style>
    .active {
      font-weight: bold;
    }
  </style>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
    </li>
  </ul>
  <router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>
</template>

## app.js
export class App {
  message = 'Hello World!';

  configureRouter(config, router){
    config.title = 'Aurelia';
    config.map([
        { route: ['','shared-parent/child-a'],  moduleId: './child-a' , nav: true, title: 'child-a' },
        { route: 'shared-parent/child-b', moduleId: './child-b', nav: true, title: 'child-b' },
    ]);

    this.router = router;
  }
}

## child-a.html
<template>
  <div slot="somename" class="child">
   Child A
  </div>
</template>

## child-a.js
import {inject} from 'aurelia-framework';
import {SharedParent} from './shared-parent';

@inject(SharedParent)
export class ChildA {
  constructor(parent) {
    parent.heading = 'Set by Child A';
  }
}

## child-b.html
<template>
  <div slot="somename" class="child">
    Child B
  </div>
</template>

## child-b.js
import {inject} from 'aurelia-framework';
import {SharedParent} from './shared-parent';

@inject(SharedParent)
export class ChildB {
  constructor(parent) {
    parent.heading = 'Set by Child B';
  }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .shared-parent,
      .shared-parent > form {
        border: 5px solid green;
        padding: 10px;
      }
      .shared-parent > form {
        width: 50%;
      }

      .child {
        border: 5px solid blue;
        margin-top: 10px;
        padding: 10px;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## shared-parent.html
<template>
  <div class="shared-parent">
    Parent heading is: ${heading}
    <slot name="somename"></slot>
  </div>
</template>

## shared-parent.js
export class SharedParent {
  constructor(signaler) {
    debugger;
    this.heading = 'Shared Parent';
  }
}
	<template>
	<style>
	.active {
	font-weight: bold;
	}
	</style>
	<ul>
	<li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
	<a href.bind="row.href">${row.title}</a>
	</li>
	</ul>
	<router-view layout-view="shared-parent.html" layout-view-model="shared-parent"></router-view>
	</template>
	export class App {
	message = 'Hello World!';

	configureRouter(config, router){
	config.title = 'Aurelia';
	config.map([
	{ route: ['','shared-parent/child-a'], moduleId: './child-a' , nav: true, title: 'child-a' },
	{ route: 'shared-parent/child-b', moduleId: './child-b', nav: true, title: 'child-b' },
	]);

	this.router = router;
	}
	}
	<template>
	<div slot="somename" class="child">
	Child A
	</div>
	</template>
	import {inject} from 'aurelia-framework';
	import {SharedParent} from './shared-parent';

	@inject(SharedParent)
	export class ChildA {
	constructor(parent) {
	parent.heading = 'Set by Child A';
	}
	}
	<template>
	<div slot="somename" class="child">
	Child B
	</div>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	.shared-parent,
	.shared-parent > form {
	border: 5px solid green;
	padding: 10px;
	}
	.shared-parent > form {
	width: 50%;
	}

	.child {
	border: 5px solid blue;
	margin-top: 10px;
	padding: 10px;
	}
	</style>
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	<template>
	<div class="shared-parent">
	Parent heading is: ${heading}
	<slot name="somename"></slot>
	</div>
	</template>
	export class SharedParent {
	constructor(signaler) {
	debugger;
	this.heading = 'Shared Parent';
	}
	}