From 5291ea2683e7f6a16fafe0e72576f33d2d292a1e Mon Sep 17 00:00:00 2001
From: Mohsin Ali <mohammadmohsin@gmail.com>
Date: Fri, 6 May 2016 00:19:43 +0500
Subject: [PATCH 1/3] Landing page

---
 src/app.html     | 13 +++++++++++++
 src/bootstrap.ts | 21 +++++++++++++++++----
 src/countries.ts |  8 ++++++++
 src/header.ts    |  8 ++++++++
 src/sidebar.ts   |  8 ++++++++
 5 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/app.html
 create mode 100644 src/countries.ts
 create mode 100644 src/header.ts
 create mode 100644 src/sidebar.ts

diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..b9dfa7f
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,13 @@
+<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 />
+  <router-outlet></router-outlet>
+  <a href="#!" class="btn btn-primary">Browse Countries</a>
+
+</div>
\ No newline at end of file
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index 74df08e..c3e61fd 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -1,15 +1,28 @@
 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';
 
 
 @Component({
   selector: 'app',
-  template: `
-  	<h1>Countries and Capitals</h1>
-  `,
+  templateUrl: './src/app.html',
+
+  directives: [Header, SideBar, Countries] // ROUTER_DIRECTIVES
 })
+
+// @RouteConfig([
+//   {path: '/countries_capitals',   name: 'Countries',     component: Countries},
+//   // {path: '/about', name: 'About', component: AboutComponent},
+// ])
+
 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
new file mode 100644
index 0000000..e97c9b9
--- /dev/null
+++ 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 {}
\ No newline at end of file
diff --git a/src/header.ts b/src/header.ts
new file mode 100644
index 0000000..78fc047
--- /dev/null
+++ 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 {}
\ No newline at end of file
diff --git a/src/sidebar.ts b/src/sidebar.ts
new file mode 100644
index 0000000..b13ede4
--- /dev/null
+++ b/src/sidebar.ts
@@ -0,0 +1,8 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'side-bar',
+  template: 'My cool navigation'
+})
+
+export class SideBar {}
\ No newline at end of file

From b4b3390746f72116a40ddfb2826330eff8372b4e Mon Sep 17 00:00:00 2001
From: Mohsin Ali <mohammadmohsin@gmail.com>
Date: Fri, 6 May 2016 00:23:35 +0500
Subject: [PATCH 2/3] Comments...

---
 src/bootstrap.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index c3e61fd..553615f 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -16,6 +16,9 @@ import {Countries} from './countries';
   directives: [Header, SideBar, Countries] // ROUTER_DIRECTIVES
 })
 
+// ################################################
+// Router code commented out till the next session
+
 // @RouteConfig([
 //   {path: '/countries_capitals',   name: 'Countries',     component: Countries},
 //   // {path: '/about', name: 'About', component: AboutComponent},

From 98c191ae0661cabfc46b4a756c45dba85d98be38 Mon Sep 17 00:00:00 2001
From: Mohsin Ali <mohammadmohsin@gmail.com>
Date: Fri, 6 May 2016 14:33:08 +0500
Subject: [PATCH 3/3] Router Link

---
 index.html       |  2 ++
 src/app.html     |  3 ++-
 src/bootstrap.ts | 14 ++++++++------
 src/footer.html  |  1 +
 src/footer.ts    | 13 +++++++++++++
 5 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 src/footer.html
 create mode 100644 src/footer.ts

diff --git a/index.html b/index.html
index 222e67a..44beda6 100644
--- 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
index b9dfa7f..4ccfa53 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,7 +7,8 @@
   </div>
 
   <hr />
+  <footer></footer>
+
   <router-outlet></router-outlet>
-  <a href="#!" class="btn btn-primary">Browse Countries</a>
 
 </div>
\ No newline at end of file
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
index 553615f..5fcfaa7 100644
--- a/src/bootstrap.ts
+++ b/src/bootstrap.ts
@@ -2,27 +2,29 @@ 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 {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',
   templateUrl: './src/app.html',
 
-  directives: [Header, SideBar, Countries] // ROUTER_DIRECTIVES
+  directives: [Header, SideBar, Countries, Footer, ROUTER_DIRECTIVES],
+  providers: [ROUTER_PROVIDERS]
 })
 
 // ################################################
 // Router code commented out till the next session
 
-// @RouteConfig([
-//   {path: '/countries_capitals',   name: 'Countries',     component: Countries},
-//   // {path: '/about', name: 'About', component: AboutComponent},
-// ])
+@RouteConfig([
+  {path: '/countries',   name: 'Countries', component: Countries}
+  // {path: '/home', name: 'Home', component: Body, useAsDefault: true},
+])
 
 export class App {}
 
diff --git a/src/footer.html b/src/footer.html
new file mode 100644
index 0000000..4a8bf4d
--- /dev/null
+++ b/src/footer.html
@@ -0,0 +1 @@
+<footer></footer>
\ No newline at end of file
diff --git a/src/footer.ts b/src/footer.ts
new file mode 100644
index 0000000..9f14834
--- /dev/null
+++ 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 {}
\ No newline at end of file