BruceL33t · November 24, 2016 21:21
diff --git a/app.html b/app.html
 <template>
  <p>Parent App</p>
  <require from="./child-app"></require>
  
  <child-app main.bind="main1"></child-app>
  <child-app main.bind="main2"></child-app>
 </template>
diff --git a/app.js b/app.js
 export class App {
  main1 = './one/app';
  main2 = './two/app';
 }
diff --git a/child-app.js b/child-app.js
 import {
  Aurelia,
  noView,
  bindable,
  inject,
  Container
 } from 'aurelia-framework';
 import {Loader} from 'aurelia-loader';

 @noView()
 @inject(Loader, Element)
 export class ChildApp {
  @bindable main;

  
   
  constructor(loader, element) {
    this.host = element;
    this.app = new Aurelia(this.loader, new Container());
    this.app.use.standardConfiguration();
  }

  mainChanged() {
    this.app.start().then(a => a.setRoot(this.main, this.host));
  }
 }
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      child-app {
        display: block;
        border: 1px solid green;
      }
    </style>
  </head>
  <body aurelia-app>
    <h1>Loading...</h1>
    
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
    <script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
 </html>
diff --git a/one\app.html b/one\app.html
 <template>


      <ul>
         <li repeat.for = "row of router.navigation">
            <a href.bind = "row.href">${row.title}</a>
         </li>
      </ul>

   <router-view></router-view>
 </template>
diff --git a/one\app.js b/one\app.js
 export class App {
  message = 'I am a separate app!';
  
  configureRouter(config, router){
      config.title = 'Aurelia';
 		
      config.map([
         { route: ['','test'],  name: 'test',  
            moduleId: '../test',  nav: true, title:'Test' },
            { route: ['test2'],  name: 'home2',  
            moduleId: '../test2',  nav: true, title:'Test2' }
      ]);

      this.router = router;
   }
 }
diff --git a/test.html b/test.html
 <template>
  ${message}
 </template>
diff --git a/test.js b/test.js
 export class Test {
  message = 'test';
 }
diff --git a/test2.html b/test2.html
 <template>
  ${message}
 </template>
diff --git a/test2.js b/test2.js
 export class Test2 {
  message = 'test2';
 }
diff --git a/two\app.html b/two\app.html
 <template>
  ${message}
 </template>
diff --git a/two\app.js b/two\app.js
 export class App {
  message = 'I am another separate app!';
 }
	<template>
	<p>Parent App</p>
	<require from="./child-app"></require>

	<child-app main.bind="main1"></child-app>
	<child-app main.bind="main2"></child-app>
	</template>
	import {
	Aurelia,
	noView,
	bindable,
	inject,
	Container
	} from 'aurelia-framework';
	import {Loader} from 'aurelia-loader';

	@noView()
	@inject(Loader, Element)
	export class ChildApp {
	@bindable main;



	constructor(loader, element) {
	this.host = element;
	this.app = new Aurelia(this.loader, new Container());
	this.app.use.standardConfiguration();
	}

	mainChanged() {
	this.app.start().then(a => a.setRoot(this.main, this.host));
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	child-app {
	display: block;
	border: 1px solid green;
	}
	</style>
	</head>
	<body aurelia-app>
	<h1>Loading...</h1>

	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
	<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	<template>


	<ul>
	<li repeat.for = "row of router.navigation">
	<a href.bind = "row.href">${row.title}</a>
	</li>
	</ul>

	<router-view></router-view>
	</template>
	export class App {
	message = 'I am a separate app!';

	configureRouter(config, router){
	config.title = 'Aurelia';

	config.map([
	{ route: ['','test'], name: 'test',
	moduleId: '../test', nav: true, title:'Test' },
	{ route: ['test2'], name: 'home2',
	moduleId: '../test2', nav: true, title:'Test2' }
	]);

	this.router = router;
	}
	}