AshleyGrant · April 24, 2016 19:09
diff --git a/app.html b/app.html
 <template>
  <require from="nav-bar.html"></require>
  <require from="bootstrap/css/bootstrap.css"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
 </template>
diff --git a/app.js b/app.js
 import routes from './routes';

 export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map(routes);

    this.router = router;
  }
 }
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">
  </head>
  <body aurelia-app="main">
    <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/main.js b/main.js
 import 'bootstrap';

 export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  //Uncomment the line below to enable animation.
  //aurelia.use.plugin('aurelia-animator-css');
  //if the css animator is enabled, add swap-order="after" to all router-view elements

  //Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  //aurelia.use.plugin('aurelia-html-import-template-loader')

  aurelia.start().then(() => aurelia.setRoot());
 }
diff --git a/nav-bar.html b/nav-bar.html

 <template bindable="router">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
      <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>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
 </template>
diff --git a/routes.js b/routes.js
 export default [
      { route: ['', 'welcome'], name: 'welcome',      moduleId: 'welcome',      nav: true, title: 'Welcome' },
      { route: 'users',         name: 'users',        moduleId: 'users',        nav: true, title: 'Github Users' },
      { route: 'child-router',  name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
    ];
diff --git a/welcome.html b/welcome.html
 <template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="submit()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
      </div>
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      </div>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
 </template>
diff --git a/welcome.js b/welcome.js

 //import {computedFrom} from 'aurelia-framework';

 export class Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';
  previousValue = this.fullName;

  //Getters can't be directly observed, so they must be dirty checked.
  //However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
  //To optimize by declaring the properties that this getter is computed from, uncomment the line below
  //as well as the corresponding import above.
  //@computedFrom('firstName', 'lastName')
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  submit() {
    this.previousValue = this.fullName;
    alert(`Welcome, ${this.fullName}!`);
  }

  canDeactivate() {
    if (this.fullName !== this.previousValue) {
      return confirm('Are you sure you want to leave?');
    }
  }
 }

 export class UpperValueConverter {
  toView(value) {
    return value && value.toUpperCase();
  }
 }
	<template>
	<require from="nav-bar.html"></require>
	<require from="bootstrap/css/bootstrap.css"></require>

	<nav-bar router.bind="router"></nav-bar>

	<div class="page-host">
	<router-view></router-view>
	</div>
	</template>
	import routes from './routes';

	export class App {
	configureRouter(config, router) {
	config.title = 'Aurelia';
	config.map(routes);

	this.router = router;
	}
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app="main">
	<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>
	import 'bootstrap';

	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();

	//Uncomment the line below to enable animation.
	//aurelia.use.plugin('aurelia-animator-css');
	//if the css animator is enabled, add swap-order="after" to all router-view elements

	//Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
	//aurelia.use.plugin('aurelia-html-import-template-loader')

	aurelia.start().then(() => aurelia.setRoot());
	}
	export default [
	{ route: ['', 'welcome'], name: 'welcome', moduleId: 'welcome', nav: true, title: 'Welcome' },
	{ route: 'users', name: 'users', moduleId: 'users', nav: true, title: 'Github Users' },
	{ route: 'child-router', name: 'child-router', moduleId: 'child-router', nav: true, title: 'Child Router' }
	];
	<template>
	<section class="au-animate">
	<h2>${heading}</h2>
	<form role="form" submit.delegate="submit()">
	<div class="form-group">
	<label for="fn">First Name</label>
	<input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
	</div>
	<div class="form-group">
	<label for="ln">Last Name</label>
	<input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
	</div>
	<div class="form-group">
	<label>Full Name</label>
	<p class="help-block">${fullName \| upper}</p>
	</div>
	<button type="submit" class="btn btn-default">Submit</button>
	</form>
	</section>
	</template>

	//import {computedFrom} from 'aurelia-framework';

	export class Welcome {
	heading = 'Welcome to the Aurelia Navigation App!';
	firstName = 'John';
	lastName = 'Doe';
	previousValue = this.fullName;

	//Getters can't be directly observed, so they must be dirty checked.
	//However, if you tell Aurelia the dependencies, it no longer needs to dirty check the property.
	//To optimize by declaring the properties that this getter is computed from, uncomment the line below
	//as well as the corresponding import above.
	//@computedFrom('firstName', 'lastName')
	get fullName() {
	return `${this.firstName} ${this.lastName}`;
	}

	submit() {
	this.previousValue = this.fullName;
	alert(`Welcome, ${this.fullName}!`);
	}

	canDeactivate() {
	if (this.fullName !== this.previousValue) {
	return confirm('Are you sure you want to leave?');
	}
	}
	}

	export class UpperValueConverter {
	toView(value) {
	return value && value.toUpperCase();
	}
	}