mttmccb/another-home.html

## another-home.html
<template>
  <h1>Another home</h1>

  <p>The grass is not greener <a route-href="route: home">take me back</a>.</p>
</template>

## another-home.js
export class AnotherHome { }

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

## app.js

export class App {
  configureRouter(config, router) {
    this.router = router;
    config.title = 'Aurelia';
    config.map([
      { route: ['', 'home'],    name: 'home',         moduleId: 'home' },
      { route: 'another-home',  name: 'anotherhome',  moduleId: 'another-home' }
    ]);
  }
}

## home.html
<template>
  <h1>Home</h1>

  <button click.trigger="moveHome()">Move Home</button>

  <input checked.bind="canLeaveHome" type="checkbox"> Can leave home.

  <p if.bind="navigationFailed">NOPE!</p>
</template>

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

@inject(Router)
export class Home {
  navigationFailed = false;
  canLeaveHome = false;

  constructor(router) {
    this.router = router;
  }

  canDeactivate() {
    return this.canLeaveHome;
  }

  moveHome() {
    this.router.navigateToRoute('anotherhome')
      .then((navigated) => {
        this.navigationFailed = navigated;
      });
  }
}

## 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://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>
	<h1>Another home</h1>

	<p>The grass is not greener <a route-href="route: home">take me back</a>.</p>
	</template>

	export class App {
	configureRouter(config, router) {
	this.router = router;
	config.title = 'Aurelia';
	config.map([
	{ route: ['', 'home'], name: 'home', moduleId: 'home' },
	{ route: 'another-home', name: 'anotherhome', moduleId: 'another-home' }
	]);
	}
	}
	<template>
	<h1>Home</h1>

	<button click.trigger="moveHome()">Move Home</button>

	<input checked.bind="canLeaveHome" type="checkbox"> Can leave home.

	<p if.bind="navigationFailed">NOPE!</p>
	</template>
	import { Router } from 'aurelia-router';
	import { inject } from 'aurelia-framework';

	@inject(Router)
	export class Home {
	navigationFailed = false;
	canLeaveHome = false;

	constructor(router) {
	this.router = router;
	}

	canDeactivate() {
	return this.canLeaveHome;
	}

	moveHome() {
	this.router.navigateToRoute('anotherhome')
	.then((navigated) => {
	this.navigationFailed = navigated;
	});
	}
	}
	<!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://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>