attribesolution · mohsinali · May 5, 2016 · May 5, 2016 · May 6, 2016
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+  <base href="/">
   <meta charset="UTF-8">
   <title>Angular 2 - Countries and Capitals</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -15,6 +16,7 @@
   <script src="node_modules/systemjs/dist/system.src.js"></script>
   <script src="node_modules/rxjs/bundles/Rx.js"></script>
   <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
+  <script src="node_modules/angular2/bundles/router.dev.js"></script>
 
   <!-- 2. Configure SystemJS -->
   <script>

diff --git a/src/app.html b/src/app.html
@@ -0,0 +1,14 @@
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+
+<div class="container">
+  <div class="jumbotron">
+    <header></header>
+    <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
+  </div>
+
+  <hr />
+  <footer></footer>
+
+  <router-outlet></router-outlet>
+
+</div>
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -1,15 +1,33 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
+import {ROUTER_PROVIDERS} from 'angular2/router';   //for Routing
+
+import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
+
+import {Header} from './header';
+import {SideBar} from './sidebar';
+import {Countries} from './countries';
+import {Footer} from './footer';
 
 
 @Component({
   selector: 'app',
-  template: `
-  	<h1>Countries and Capitals</h1>
-  `,
+  templateUrl: './src/app.html',
+
+  directives: [Header, SideBar, Countries, Footer, ROUTER_DIRECTIVES],
+  providers: [ROUTER_PROVIDERS]
 })
+
+// ################################################
+// Router code commented out till the next session
+
+@RouteConfig([
+  {path: '/countries',   name: 'Countries', component: Countries}
+  // {path: '/home', name: 'Home', component: Body, useAsDefault: true},
+])
+
 export class App {}
 
-bootstrap(App)
+bootstrap(App)  // , [ROUTER_PROVIDERS]
   .then(success => console.log('Kicking off Countries and Capitals'))
   .catch(error => console.log(error));
diff --git a/src/countries.ts b/src/countries.ts
@@ -0,0 +1,8 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: "countries_list",
+  template: 'Here goes the list'
+})
+
+export class Countries {}
diff --git a/src/footer.html b/src/footer.html
@@ -0,0 +1 @@
+<footer></footer>
diff --git a/src/footer.ts b/src/footer.ts
@@ -0,0 +1,13 @@
+import {Component} from 'angular2/core';
+import {RouterLink} from 'angular2/router';
+
+@Component({
+  selector: 'footer',
+  template: `
+    <a class="btn btn-success" [routerLink]="['/Countries']">Heroes</a>
+    `,
+  directives: [RouterLink]
+})
+
+
+export class Footer {}
diff --git a/src/header.ts b/src/header.ts
@@ -0,0 +1,8 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'header',
+  template: '<h1>Countries and Capitals</h1>',
+})
+
+export class Header {}
diff --git a/src/sidebar.ts b/src/sidebar.ts
@@ -0,0 +1,8 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'side-bar',
+  template: 'My cool navigation'
+})
+
+export class SideBar {}