attribesolution · zainmustafa · May 5, 2016 · May 5, 2016 · May 5, 2016
diff --git a/.idea/.name b/.idea/.name
diff --git a/.idea/encodings.xml b/.idea/encodings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/ng-conf-2016-hackathon-app.iml b/.idea/ng-conf-2016-hackathon-app.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8">
+      <meta charset="UTF-8">
   <title>Angular 2 - Countries and Capitals</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- 1. Load libraries -->
@@ -15,6 +15,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/npm-debug.log b/npm-debug.log
@@ -0,0 +1,40 @@
+0 info it worked if it ends with ok
+1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
+1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
+1 verbose cli   'run',
+1 verbose cli   'lite' ]
+2 info using npm@2.14.4
+3 info using node@v4.1.1
+4 verbose run-script [ 'prelite', 'lite', 'postlite' ]
+5 info prelite a2-countries-and-capitals@1.0.0
+6 info lite a2-countries-and-capitals@1.0.0
+7 verbose unsafe-perm in lifecycle true
+8 info a2-countries-and-capitals@1.0.0 Failed to exec lite script
+9 verbose stack Error: a2-countries-and-capitals@1.0.0 lite: `lite-server`
+9 verbose stack Exit status 1
+9 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:214:16)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at EventEmitter.emit (events.js:172:7)
+9 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
+9 verbose stack     at emitTwo (events.js:87:13)
+9 verbose stack     at ChildProcess.emit (events.js:172:7)
+9 verbose stack     at maybeClose (internal/child_process.js:817:16)
+9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
+10 verbose pkgid a2-countries-and-capitals@1.0.0
+11 verbose cwd D:\Hackathon\ng-conf-2016-hackathon-app
+12 error Windows_NT 10.0.10586
+13 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lite"
+14 error node v4.1.1
+15 error npm  v2.14.4
+16 error code ELIFECYCLE
+17 error a2-countries-and-capitals@1.0.0 lite: `lite-server`
+17 error Exit status 1
+18 error Failed at the a2-countries-and-capitals@1.0.0 lite script 'lite-server'.
+18 error This is most likely a problem with the a2-countries-and-capitals package,
+18 error not with npm itself.
+18 error Tell the author that this fails on your system:
+18 error     lite-server
+18 error You can get their info via:
+18 error     npm owner ls a2-countries-and-capitals
+18 error There is likely additional logging output above.
+19 verbose exit [ 1, true ]
diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -1,15 +1,31 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {Component} from 'angular2/core';
+import {ROUTER_DIRECTIVES,RouteConfig, ROUTER_PROVIDERS} from 'angular2/router';
+import { provide }              from 'angular2/core';
 
+import { LocationStrategy,
+    HashLocationStrategy } from 'angular2/platform/common';
+import {Header} from './header';
+import {Bech} from './home';
+import {Countries} from './countries';
+import {Footer} from './footer';
 
 @Component({
   selector: 'app',
-  template: `
-  	<h1>Countries and Capitals</h1>
-  `,
+  template: `<header></header>
+            <router-outlet></router-outlet>
+            <footer></footer>`,
+  directives : [Header, Bech,Footer, Countries, ROUTER_DIRECTIVES]
 })
+
+@RouteConfig([
+    {path: '/bech', name : 'Bech', component: Bech, useAsDefault : true},
+    {path: '/countries',  name : 'Countries',  component: Countries}
+])
+
 export class App {}
 
-bootstrap(App)
+bootstrap(App, [ROUTER_PROVIDERS,provide(LocationStrategy,
+    {useClass: HashLocationStrategy})])
   .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,12 @@
+import {Component} from 'angular2/core';
+
+
+@Component({
+    selector: 'countries',
+    template: `<ul> <li *ngFor="#cunt of countries"> {{cunt}} </li> </ul>`
+})
+export class Countries {
+    countries : Array = ['Pakistan', 'India', "Bangladesh"]
+}
+
+
diff --git a/src/footer.ts b/src/footer.ts
@@ -0,0 +1,16 @@
+import {Component} from 'angular2/core';
+import {ROUTER_DIRECTIVES} from 'angular2/router';
+
+
+@Component({
+    selector: 'footer',
+    template: `
+  	<div style="text-align: center"><button [routerLink]="['Countries']">See Details</button></div>
+  `,
+    directives : [ROUTER_DIRECTIVES]
+})
+export class Footer {
+
+}
+
+
diff --git a/src/header.ts b/src/header.ts
@@ -0,0 +1,14 @@
+import {bootstrap} from 'angular2/platform/browser';
+import {Component} from 'angular2/core';
+
+
+@Component({
+    selector: 'header',
+    template: `
+  	<h1 style="text-align: center">Countries aur wo</h1>
+  	<hr/>
+  `,
+})
+export class Header {}
+
+
diff --git a/src/home.ts b/src/home.ts
@@ -0,0 +1,16 @@
+import {Component} from 'angular2/core';
+
+
+@Component({
+    selector: 'bech',
+    template: `<p style="text-align: center">First day of hackathon going pretty well.<br/>going through changess</p>
+    <br/>
+    <br/>
+    <br/>
+    `
+})
+export class Bech {
+
+}
+
+