Vheissu/app.html

## app.html
<template>
    <router-view></router-view>
</template>

## app.js
export class App {
    configureRouter(config) {
      config.map([
        {route: '', name: 'component1', moduleId: './component1'},
        {route: 'component2', name: 'component2', moduleId: './component2'},
      ]);
    }
}

## component1.html
<template>
  <h1>Component 1</h1>
  <p>Component 1: ${dataStore.val}</p>
  <button click.delegate="someMethod()">Set value to "b"</button>
  <button click.delegate="navigateToComponentTwo()">Go to component 2</button>
</template>

## component1.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

import {DataStore} from './data-store';

@inject(Router, DataStore)
export class Comp1 {
    constructor(router, dataStore) {
      this.router = router;
      this.dataStore = dataStore;
    }

    someMethod() {
      this.dataStore.val = 'b';
      console.log(`Component 1: ${this.dataStore.val}`);
    }

    navigateToComponentTwo() {
      this.router.navigateToRoute('component2');
    }
}

## component2.html
<template>
  <h1>Component 2</h1>
  <p>Component 2: ${dataStore.val}</p>
  <button click.delegate="navigateToComponentOne()">Go to component 1</button>
</template>

## component2.js
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

import {DataStore} from './data-store';

@inject(Router, DataStore)
export class Comp2 {
    constructor(router, dataStore) {
      this.router = router;
      this.dataStore = dataStore;
    }

    someMethod() {
        console.log(`Component 2: ${this.dataStore.val}`);
    }

    navigateToComponentOne() {
      this.router.navigateToRoute('component1');
    }
}

## data-store.js
export class DataStore {
    constructor() {
        this.val = 'a';
    }
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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>
	export class App {
	configureRouter(config) {
	config.map([
	{route: '', name: 'component1', moduleId: './component1'},
	{route: 'component2', name: 'component2', moduleId: './component2'},
	]);
	}
	}
	<template>
	<h1>Component 1</h1>
	<p>Component 1: ${dataStore.val}</p>
	<button click.delegate="someMethod()">Set value to "b"</button>
	<button click.delegate="navigateToComponentTwo()">Go to component 2</button>
	</template>
	import {inject} from 'aurelia-framework';
	import {Router} from 'aurelia-router';

	import {DataStore} from './data-store';

	@inject(Router, DataStore)
	export class Comp1 {
	constructor(router, dataStore) {
	this.router = router;
	this.dataStore = dataStore;
	}

	someMethod() {
	this.dataStore.val = 'b';
	console.log(`Component 1: ${this.dataStore.val}`);
	}

	navigateToComponentTwo() {
	this.router.navigateToRoute('component2');
	}
	}
	<template>
	<h1>Component 2</h1>
	<p>Component 2: ${dataStore.val}</p>
	<button click.delegate="navigateToComponentOne()">Go to component 1</button>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</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>