AshleyGrant/about.html

## about.html
<template>
  About us!
</template>

## about.js
export class About { }

## app.html
<template>
  <require from="./nav.html"></require>
  <nav router.bind="router"></nav>
  ${message}
  <hr>
  <router-view></router-view>
</template>

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

  configureRouter(config, router) {
      config.title = "Super Secret Project";
      config.map([
          { route: ["","login"], name: 'login', moduleId: "./login", nav: true, title: "Login" },
          { route: 'about', name:'about', moduleId: "./about", nav: true, title: "About" }
      ]);

      this.router = router;
  }
}

## authorized.html
<template>
  <require from="./nav.html"></require>
  <nav router.bind="router"></nav>
  ${message}
  <br>
  <br>
  <button click.delegate="goToScreen2()">Go To Screen 2</button>
  <button click.delegate="logOut()">Log Out</button>
  <hr>
  <router-view></router-view>
</template>

## authorized.js
import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Authorized {
  message = "authorized";

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

   configureRouter(config, router) {
      config.title = "Super Secret Project";
      config.map([
          { route: [ '', 'screen-1'], moduleId: "./screen-1", nav: true, title: "Screen 1" },
          { route: 'screen-2', name:'screen-2', moduleId: "./screen-2", nav: true, title: "Screen 2" }
      ]);

      config.mapUnknownRoutes(instruction => {
        return './screen-1';
      });

      this.router = router;
  }

  goToScreen2() {
    this.router.navigateToRoute('screen-2');
  }

  logOut() {
   this.aurelia.setRoot('./app')
    .then((aurelia) => {
      aurelia.root.viewModel.router.navigateToRoute('login');
    });
  }
}

## 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>

## login.html
<template>
  ${message}
  <br>
  <button click.delegate="logIn()">Log In</button>
</template>

## login.js
import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {

  message = "Log In";

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

  logIn() {
    this.aurelia.setRoot('./authorized');
  }

}

## nav.html
<template bindable="router">
  <ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
    </li>
  </ul>
</template>

## screen-1.html
<template>
  ${message}
</template>

## screen-1.js
export class Screen1 {

  message = 'Screen 1';

}

## screen-2.html
<template>${message}</template>

## screen-2.js
export class Screen2 {
  message = 'Screen 2';
}
	<template>
	<require from="./nav.html"></require>
	<nav router.bind="router"></nav>
	${message}
	<hr>
	<router-view></router-view>
	</template>
	export class App {
	message = 'Hello World!';

	configureRouter(config, router) {
	config.title = "Super Secret Project";
	config.map([
	{ route: ["","login"], name: 'login', moduleId: "./login", nav: true, title: "Login" },
	{ route: 'about', name:'about', moduleId: "./about", nav: true, title: "About" }
	]);

	this.router = router;
	}
	}
	import { inject, Aurelia } from 'aurelia-framework';

	@inject(Aurelia)
	export class Authorized {
	message = "authorized";

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

	configureRouter(config, router) {
	config.title = "Super Secret Project";
	config.map([
	{ route: [ '', 'screen-1'], moduleId: "./screen-1", nav: true, title: "Screen 1" },
	{ route: 'screen-2', name:'screen-2', moduleId: "./screen-2", nav: true, title: "Screen 2" }
	]);

	config.mapUnknownRoutes(instruction => {
	return './screen-1';
	});

	this.router = router;
	}

	goToScreen2() {
	this.router.navigateToRoute('screen-2');
	}

	logOut() {
	this.aurelia.setRoot('./app')
	.then((aurelia) => {
	aurelia.root.viewModel.router.navigateToRoute('login');
	});
	}
	}
	<!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>
	<template>
	${message}
	<br>
	<button click.delegate="logIn()">Log In</button>
	</template>
	import { inject, Aurelia } from 'aurelia-framework';

	@inject(Aurelia)
	export class Login {

	message = "Log In";

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

	logIn() {
	this.aurelia.setRoot('./authorized');
	}

	}