attribesolution · smtaha512 · May 5, 2016 · May 6, 2016
diff --git a/css/bootstrap.css b/css/bootstrap.css
diff --git a/css/headerStyle.css b/css/headerStyle.css
@@ -0,0 +1,3 @@
+h1{
+    text-align: center;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,10 @@
+h1{
+    text-align: center;
+}
+
+p{
+    padding: 0 50px;
+}
+button{
+    margin: 0 0 0 45%;
+}
diff --git a/index.html b/index.html
@@ -2,11 +2,13 @@
 <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">
   <!-- 1. Load libraries -->
   <!-- IE required polyfills, in this exact order -->
+
   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
   <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
   <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
@@ -15,6 +17,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>
@@ -29,12 +32,13 @@
         System.import('dist/bootstrap')
                 .then(null, console.error.bind(console));
   </script>
+
 </head>
 
 <!-- 3. Display the application -->
 
 <body>
-  <app>Loading...</app>
+    <app>Loading...</app>
 </body>
 
 </html>
diff --git a/src/body.ts b/src/body.ts
@@ -0,0 +1,17 @@
+/**
+ * Created by syedmuhammadtaha on 5/6/16.
+ */
+
+
+import {Component} from 'angular2/core';
+import {RouterLink} from 'angular2/router'
+
+
+@Component({
+    selector: 'my-body',
+    templateUrl: './../views/body.html',
+    styleUrls:['./css/style.css', './css/bootstrap.css'],
+    directives:[RouterLink],
+})
+
+export class myBody {}
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -1,15 +1,39 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
+import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouterOutlet} from 'angular2/router'
+import {myHeader} from './header';
+import {myFooter} from './footer';
+import {myBody} from './body';
+import {Countries} from "./countries";
+
 
 
 @Component({
-  selector: 'app',
-  template: `
-  	<h1>Countries and Capitals</h1>
-  `,
+    selector: 'app',
+    template: `<app-header></app-header>
+               <router-outlet></router-outlet>
+               <my-footer></my-footer>`,
+    directives: [myHeader, myFooter, ROUTER_DIRECTIVES, RouterOutlet],
+    providers: [ROUTER_PROVIDERS]
 })
+
+@RouteConfig([
+    {
+        path:'/home',
+        name: 'App',
+        component: myBody,
+        useAsDefault: true
+    },
+    {
+        path:'/countries',
+        name: 'Countries',
+        component: Countries,
+
+    }
+])
+
 export class App {}
 
 bootstrap(App)
-  .then(success => console.log('Kicking off Countries and Capitals'))
-  .catch(error => console.log(error));
+    .then(success => console.log('Kicking off Countries and Capitals from Main'))
+    .catch(error => console.log('Your Error Here', error));
diff --git a/src/countries.ts b/src/countries.ts
@@ -0,0 +1,17 @@
+/**
+ * Created by syedmuhammadtaha on 5/6/16.
+ */
+
+import {Component} from 'angular2/core';
+import {RouterLink} from 'angular2/router'
+
+@Component({
+    selector: 'Countries',
+    templateUrl: './views/countries.html',
+    styleUrls: ['./css/bootstrap.css'],
+    directives: [RouterLink]
+
+})
+
+export class Countries{}
+
diff --git a/src/footer.ts b/src/footer.ts
@@ -0,0 +1,17 @@
+/**
+ * Created by syedmuhammadtaha on 5/6/16.
+ */
+
+import {Component} from 'angular2/core';
+import {RouterLink} from 'angular2/router'
+
+
+@Component({
+    selector: 'my-footer',
+    templateUrl: './../views/footer.html',
+    styleUrls:['./css/style.css', './css/bootstrap.css'],
+    directives: [RouterLink]
+
+})
+
+export class myFooter {}
diff --git a/src/header.ts b/src/header.ts
@@ -0,0 +1,16 @@
+/**
+ * Created by syedmuhammadtaha on 5/6/16.
+ */
+
+import {Component} from 'angular2/core';
+
+
+@Component({
+    selector: 'app-header',
+    template: `<h1>Countries & Capitals</h1>
+                <hr>
+                `,
+    styleUrls:['./css/headerStyle.css', './css/bootstrap.css']
+})
+
+export class myHeader {}
diff --git a/style.css b/style.css
@@ -0,0 +1,3 @@
+h1{
+    color: blue;
+}
diff --git a/views/body.html b/views/body.html
@@ -0,0 +1,27 @@
+<p class="center-block">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vulputate rutrum felis ut faucibus.
+    In lorem eros, mollis eget suscipit ac, consequat non odio. Pellentesque viverra ante lacus, sit amet molestie enim laoreet quis.
+    Vivamus eu turpis nec tortor rutrum tincidunt pretium id augue. Pellentesque iaculis quis diam quis sollicitudin.
+    Nulla mi enim, porttitor et neque tempor, volutpat laoreet neque. Sed justo justo, pellentesque id condimentum nec, bibendum at orci.
+    Curabitur tempus arcu at est porta, ut sollicitudin lectus pulvinar.
+
+    Sed pharetra gravida risus, non sodales diam aliquet ut. Ut odio nunc, interdum a mattis sit amet, rhoncus at diam.
+    Duis in tellus porttitor libero tempor accumsan. Suspendisse ultrices venenatis orci non tincidunt. Proin ut dui ligula.
+    Nullam luctus congue quam, in ultrices tellus rhoncus luctus. Vivamus a diam at dolor pretium accumsan ac sed nibh.
+    Vestibulum sed imperdiet risus, id maximus felis.
+
+    Aliquam dignissim quis sapien in rutrum. Aliquam ultricies tempor ligula non molestie. Curabitur mollis,
+    mauris in aliquet mattis, mi magna lacinia ipsum, nec commodo arcu lacus id lectus. Nam sed turpis commodo,
+    eleifend sapien a, efficitur mi. Sed eget nunc sem. Nullam ac neque tincidunt, interdum lacus vitae, mattis tortor.
+    Nam massa nisi, laoreet ac orci in, molestie aliquam sapien. Vestibulum fermentum nisi fermentum libero volutpat
+    molestie at non augue. Phasellus accumsan vel purus vel fringilla. Class aptent taciti sociosqu ad litora torquent per
+    conubia nostra, per inceptos himenaeos. Morbi interdum, arcu vitae semper lacinia, odio eros lacinia libero, ut sagittis
+    sem nunc vitae urna. Mauris congue ultricies nunc, non sodales neque interdum at. Maecenas feugiat porttitor accumsan.
+
+    Proin ut eros in diam finibus faucibus. Nulla tincidunt ornare massa, id sodales purus finibus et. Nulla vitae aliquam mi.
+    Nullam mollis feugiat velit, vitae vestibulum tortor euismod ac. Vivamus eu porttitor lectus. Nunc sagittis purus sit amet purus
+    fermentum dapibus. Praesent aliquam metus libero, quis eleifend tortor blandit id. In eu auctor leo.
+    Integer mattis lacus eget auctor venenatis. Nam pulvinar, nulla vitae consectetur sodales, tellus mi semper risus,
+    ac luctus dui metus quis sapien. Fusce eget lectus at nisi placerat consequat. Nunc tincidunt orci in
+</p>
+<button class="center-block btn btn-primary" [routerLink]="['/Countries']">Browse Countries</button>
diff --git a/views/countries.html b/views/countries.html
@@ -0,0 +1,23 @@
+<table class="table">
+    <thead class="center">
+        <tr class="center">
+            <th>Name</th>
+            <th>Country Code</th>
+            <th>Capital</th>
+            <th>Area in km<sup>2</sup></th>
+            <th>Population</th>
+            <th>Continent</th>
+        </tr>
+    </thead>
+    <tbody class="">
+        <tr>
+            <td>Country Name</td>
+            <td>Country Code</td>
+            <td>Capital Name</td>
+            <td>Area</td>
+            <td>Country Population</td>
+            <td>Contienent Name</td>
+        </tr>
+    </tbody>
+</table>
+<button class="center-block btn btn-primary" [routerLink]="['/App']">Home</button>
diff --git a/views/footer.html b/views/footer.html