feat: add option for app-with-router

app-with-router/src/about.html

@@ -0,0 +1 @@
+<h1>This is the page about the app.</h1>

app-with-router/src/missing.ext

@@ -0,0 +1,8 @@
+export class Missing {
+  /* @if typescript */public /* @endif */static parameters = ['id'];
+  /* @if typescript */public /* @endif */missingComponent/* @if typescript */: string /* @endif */;
+
+  /* @if typescript */public /* @endif */enter(parameters) {
+    this.missingComponent = parameters.id;
+  }
+}

app-with-router/src/missing.html

@@ -0,0 +1 @@
+<h3>Ouch! Couldn't find '${missingComponent}'!</h3>

app-with-router/src/my-app.css__if_css

@@ -0,0 +1,17 @@
+nav {
+  background: #eee;
+  display: flex;
+}
+
+a {
+  padding: 10px;
+  text-decoration: none;
+  color: black;
+}
+a:hover {
+  background-color: darkgray;
+}
+
+.goto-active {
+  background-color: lightgray;
+}

app-with-router/src/my-app.html

@@ -0,0 +1,10 @@
+<import from="./welcome"></import>
+<import from="./about.html"></import>
+
+
+<nav>
+  <a goto="welcome">Welcome</a>
+  <a goto="about">About</a>
+</nav>
+
+<au-viewport default="welcome" fallback="missing"></au-viewport>

app-with-router/src/my-app.less__if_less

@@ -0,0 +1,18 @@
+nav {
+  background: #eee;
+  display: flex;
+}
+
+a {
+  padding: 10px;
+  text-decoration: none;
+  color: black;
+
+  &:hover {
+    background-color: darkgray;
+  }
+}
+
+.goto-active {
+  background-color: lightgray;
+}

app-with-router/src/my-app.scss__if_sass

@@ -0,0 +1,19 @@
+nav {
+  background: #eee;
+  display: flex;
+}
+
+a {
+  padding: 10px;
+  text-decoration: none;
+  color: black;
+
+  &:hover {
+    background-color: darkgray;
+  }
+
+}
+
+.goto-active {
+  background-color: lightgray;
+}

app-with-router/src/welcome.ext

@@ -0,0 +1,3 @@
+export class Welcome {
+  /* @if typescript */public /* @endif */message = 'Welcome to the Aurelia 2 app with routing!';
+}

app-with-router/src/welcome.html

@@ -0,0 +1 @@
+<h1>${message}</h1>

app-min/src/main.ext → common/src/main.ext

@@ -2,7 +2,7 @@
 // Promise polyfill for old browsers
 import 'promise-polyfill/lib/polyfill';
 // @endif
-import Aurelia/* @if shadow-dom *//*, { StyleConfiguration }*//* @endif */ from 'aurelia';
+import Aurelia/* @if shadow-dom || app-with-router */, { /* @endif *//* @if app-with-router */RouterConfiguration/* @endif *//* @if shadow-dom *//*, StyleConfiguration*//* @endif *//* @if shadow-dom || app-with-router */ }/* @endif */ from 'aurelia';
 import { MyApp } from './my-app';
 // @if shadow-dom
 // @if webpack
@@ -22,5 +22,8 @@ Aurelia
   }))
   */
   // @endif
+  // @if app-with-router
+  .register(RouterConfiguration)
+  // @endif
   .app(MyApp)
   .start();

questions.js

@@ -72,12 +72,11 @@ module.exports = [
       {value: 'cypress', title: 'Yes (Cypress)', hint: 'Cypress offers fast, easy and reliable testing for anything that runs in a browser.'}
     ]
   },
-  // This question is not raised to end user, since there is only one choice, it will be selected automatically.
-  // We will add more sample code in future.
   {
     message: 'What kind of sample code do you want in this project?',
     choices: [
-      {value: 'app-min', title: 'Bare minimum'}
+      {value: 'app-min', title: 'Bare minimum'},
+      {value: 'app-with-router', title: 'App With Router', hint: 'Application with navigation setup using conventional routing'}
     ]
   },
   // Currently this question is not visible to end user because there is only one option.