Added router, and two components

app/app.component.ts

@@ -0,0 +1,31 @@
+import { Component, Type } from '@angular/core';
+import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router';
+
+import { HomeComponent } from './components/home/home.component'
+import { AboutComponent } from './components/about/about.component'
+
+@Component({
+    directives: [ROUTER_DIRECTIVES],
+    providers: [Location],
+    selector: 'my-app',
+    styles: [`h1 {
+	color: white;
+	background: darkgray;
+	padding: 20px;
+}
+.router-link-active { font-weight: bold }`],
+    template: `
+<h1>My First {{name}} app</h1>
+<router-outlet></router-outlet>
+
+<a [routerLink]="['/']">Home</a> | <a [routerLink]="['/about']">About</a>`,
+})
+@Routes([
+    { component: <Type>HomeComponent, path: "/" },
+    { component: <Type>AboutComponent, path: "/about" } 
+])
+export class AppComponent {
+    name: string = "Angular 2 on Express";
+
+    constructor(private router: Router) {}
+}

app/components/about/about.component.html

@@ -0,0 +1,3 @@
+<h2>Page: {{name}}</h2>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras semper feugiat velit in aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam dictum sodales dui vehicula convallis. Donec mattis pharetra lacus feugiat ultrices. Curabitur placerat interdum ligula, quis suscipit velit iaculis at. Etiam mollis ex et cursus elementum. Suspendisse nec elit ante. Praesent pharetra pharetra tellus, rutrum lobortis odio viverra vitae.</p>

app/components/about/about.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+@Component({
+    selector: 'my-about',
+    templateUrl: 'components/about/about.component.html',
+    styleUrls: ['components/about/about.component.css']
+})
+export class AboutComponent {
+    name: string = "About Us";
+
+    constructor() {}
+}

app/components/app.component.html → app/components/home/home.component.html

@@ -1,4 +1,4 @@
-<h1>My First {{name}} app</h1>
+<h2>Page: {{name}}</h2>
 
 <pre>Response from server: /users</pre>
 <pre>{{ ( users | async)?.name }}</pre>

app/components/app.component.ts → app/components/home/home.component.ts

@@ -3,12 +3,12 @@ import { Http } from "@angular/http";
 import 'rxjs/add/operator/map';
 
 @Component({
-    selector: 'my-app',
-    templateUrl: 'components/app.component.html',
-    styleUrls: ['components/app.component.css']
+    selector: 'my-home',
+    templateUrl: 'components/home/home.component.html',
+    styleUrls: ['components/home/home.component.css']
 })
-export class AppComponent {
-    name: string = "Angular 2 on Express";
+export class HomeComponent {
+    name: string = "Home page";
     users: {};
 
     constructor(http: Http) {

app/main.ts

@@ -1,8 +1,13 @@
 import { bootstrap }    from '@angular/platform-browser-dynamic';
-import { AppComponent } from './components/app.component'
-import { Type } from '@angular/core';
+import { Type, provide } from '@angular/core';
 import { HTTP_PROVIDERS } from "@angular/http";
+import { ROUTER_PROVIDERS } from '@angular/router';
+import { HashLocationStrategy, LocationStrategy } from "@angular/common";
+
+import { AppComponent } from './app.component'
 
 bootstrap(<Type>AppComponent, [
-    HTTP_PROVIDERS
+    HTTP_PROVIDERS,
+    ROUTER_PROVIDERS,
+    provide(LocationStrategy, {useClass: <Type>HashLocationStrategy})
 ]);

package.json

@@ -38,7 +38,7 @@
     "concurrently": "^2.0.0",
     "systemjs-builder": "^0.15.17",
     "typescript": "^1.8.10",
-    "typings": "^0.8.1",
+    "typings": "^1.0.4",
     "yargs": "^4.7.1"
   }
 }

public/index.html

@@ -12,20 +12,9 @@
     <script src="reflect-metadata/Reflect.js"></script>
     <script src="systemjs/dist/system.src.js"></script>
     <!--
-
     Development mod
-
     <script src="js/systemjs.config.js"></script>
     <script>
-      System.config({
-        defaultJSExtensions: true,
-        packages: {        
-          app: {
-            format: 'register',
-            defaultExtension: 'js'
-          }
-        }
-      });
       System.import('main')
             .then(null, console.error.bind(console));
     </script>

tsconfig.json

@@ -10,8 +10,6 @@
     "noImplicitAny": false
   },
   "exclude": [
-    "node_modules",
-    "typings/main",
-    "typings/main.d.ts"
+    "node_modules"
   ]
 }

typings.json

@@ -1,7 +1,7 @@
 {
-  "ambientDependencies": {
+  "globalDependencies": {
     "core-js": "registry:dt/core-js#0.0.0+20160317120654",
-    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
     "node": "registry:dt/node#4.0.0+20160509154515"
   }
 }