feat(all): add option for app-with-router

* feat: add option for app-with-router

* fix: review comments addressed

* fix: review comments addressed (intendation)

* fix: added the missing new line at end of file

Author: PraveenGandhi

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.extapp-min/src/main.ext renamed to 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();