Slight tidy of example html, needs designing.

ChrisMurphy · Feb 11, 2016 · f362971 · f362971
1 parent 7857031
commit f362971
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 7 deletions.
diff --git a/examples/app.ts b/examples/app.ts
@@ -1,13 +1,37 @@
 import {Component} from 'angular2/core';
-import {HelloWorld} from '../src/hello-world/hello-world';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
+
+import {HelloWorldExamples} from './hello-world';
 
 @Component({
   selector: 'app',
   template: `
-    <h1>Examples</h1>
-    <hello-world><hello-world>
+    <div class="flexbox-container">
+        <div class="flexbox-container__column">
+            <ul>
+                <li><a [routerLink]="['HelloWorld']">Hello World</a></li>
+                <li><a href="./coverage">Test Coverage Report</a></li>
+            </ul>
+        </div>
+        <div class="flexbox-container__column">
+            <router-outlet></router-outlet>
+        </div>
+    </div>
   `,
-  directives: [HelloWorld] 
+  styles: [`
+    .flexbox-container {
+        display: flex;
+    }`,
+    `
+    .flexbox-container__column {
+        padding: 10px;
+    }
+  `],
+  directives: [ROUTER_DIRECTIVES]
 })
+@RouteConfig([
+  { path: '/helloworld', name: 'HelloWorld', component: HelloWorldExamples }
+])
+
 export class App {
 }
diff --git a/examples/bootstrap.ts b/examples/bootstrap.ts
@@ -1,4 +1,9 @@
 import {bootstrap} from 'angular2/platform/browser';
-import {App}   from './app';
+import {provide} from 'angular2/core';
+import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
+import {App} from './app';
 
-bootstrap(App);
+bootstrap(App, [
+	ROUTER_PROVIDERS,
+	provide(LocationStrategy, { useClass: HashLocationStrategy })
+]);
diff --git a/examples/hello-world.ts b/examples/hello-world.ts
@@ -0,0 +1,13 @@
+import {Component} from 'angular2/core';
+import {HelloWorld} from '../src/hello-world/hello-world';
+
+@Component({
+  selector: 'hello-world-examples',
+  template: `
+    <h1>Hello World</h1>
+    <hello-world><hello-world>
+  `,
+  directives: [HelloWorld] 
+})
+export class HelloWorldExamples {
+}
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
 
 <head>
+    <base href="/">
     <title>Angular 2 Todos</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- IE required polyfills, in this exact order -->
@@ -13,6 +14,7 @@
     <script src="https://code.angularjs.org/tools/typescript.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
     <script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
+    <script src="https://code.angularjs.org/2.0.0-beta.3/router.dev.js"></script>
     <script>
         System.config({
         transpiler: 'typescript', 
@@ -28,7 +30,6 @@
 </head>
 
 <body>
-    <div><a href="./coverage">Coverage Report</a></div>
     <app>Loading...</app>
 </body>