ddd

Author: ducito

.gitignore

@@ -31,3 +31,6 @@ node_modules
 
 # Optional REPL history
 .node_repl_history
+
+.idea
+*.map

.idea/angular2.iml

@@ -2,6 +2,6 @@
  * Created by nnduc on 316//16.
  */
 import {bootstrap}    from 'angular2/platform/browser'
-import {AppComponent} from "./modules/main/app.component";
+import {AppComponent} from "./modules/main/components/app.component";
 
 bootstrap(AppComponent);

.idea/workspace.xml

@@ -3,13 +3,34 @@
  */
 import {Component} from 'angular2/core';
 import {Hero} from "../models/hero";
+import {RouteParams} from "angular2/router";
+import {HeroService} from "../services/hero.service";
+import {OnInit} from "angular2/core";
 
 
 @Component({
-	selector: 'hero-detail',
-	templateUrl:'app/modules/heroes/views/hero.html',
+	selector: 'my-hero-detail',
+	templateUrl:'app/modules/heroes/views/hero-detail.component.html',
+	styleUrls: ['app/modules/heroes/css/hero-detail.component.css'],
 	inputs: ['hero']
 })
-export class HeroDetailComponent {
+
+
+export class HeroDetailComponent implements OnInit {
 	hero: Hero;
-}
+
+	constructor(
+		private _heroService: HeroService,
+		private _routeParams: RouteParams) {
+	}
+
+	ngOnInit() {
+		let id = +this._routeParams.get('id');
+		this._heroService.getHero(id)
+			.then(hero => this.hero = hero);
+	}
+
+	goBack() {
+		window.history.back();
+	}
+}

app/main.js

@@ -3,21 +3,21 @@ import {OnInit} from "angular2/core";
 import {HeroDetailComponent} from './hero-detail.component';
 import {HeroService} from "../services/hero.service";
 import {Hero} from "../models/hero";
+import {Router} from "angular2/router";
 
 @Component({
 	selector   : 'my-heroes',
-	templateUrl: 'app/modules/heroes/views/heros.html',
-	styles     : [],
-	directives : [HeroDetailComponent],
-	providers: [HeroService]
+	templateUrl: 'app/modules/heroes/views/heros.component.html',
+	styleUrls  : ['app/modules/heroes/css/heroes.component.css'],
+	directives : [HeroDetailComponent]
 })
-export class HeroesComponent implements OnInit{
 
-	title = 'Tour of Heroes';
-	heroes : Hero[];
+export class HeroesComponent implements OnInit {
+	heroes:Hero[];
 	selectedHero:Hero;
 
-	constructor(private _heroService: HeroService) { }
+	constructor(private _router:Router,
+				private _heroService:HeroService) { }
 
 	getHeroes() {
 		this._heroService.getHeroes().then(heroes => this.heroes = heroes);
@@ -27,8 +27,9 @@ export class HeroesComponent implements OnInit{
 		this.getHeroes();
 	}
 
-	selectHero(hero:Hero) {
-		console.log(hero);
-		this.selectedHero = hero;
+	onSelect(hero:Hero) { this.selectedHero = hero; }
+
+	gotoDetail() {
+		this._router.navigate(['HeroDetail', {id: this.selectedHero.id}]);
 	}
 }

app/main.ts

@@ -0,0 +1,34 @@
+label {
+	display     : inline-block;
+	width       : 3em;
+	margin      : .5em 0;
+	color       : #607D8B;
+	font-weight : bold;
+}
+
+input {
+	height       : 2em;
+	font-size    : 1em;
+	padding-left : .4em;
+}
+
+button {
+	margin-top       : 20px;
+	font-family      : Arial;
+	background-color : #eee;
+	border           : none;
+	padding          : 5px 10px;
+	border-radius    : 4px;
+	cursor           : pointer;
+	cursor           : hand;
+
+	:hover{
+		background-color : #cfd8dc;
+	}
+
+	:disabled {
+		background-color : #eee;
+		color            : #ccc;
+		cursor           : auto;
+	}
+}

app/modules/heroes/components/hero-detail.component.js

@@ -7,11 +7,17 @@ export class HeroService {
 	getHeroes() {
 		return Promise.resolve(HEROES);
 	}
+
 	// See the "Take it slow" appendix
 	getHeroesSlowly() {
 		return new Promise<Hero[]>(resolve =>
 			setTimeout(()=>resolve(HEROES), 2000) // 2 seconds
 		);
 	}
 
-}
+	getHero(id:number) {
+		return Promise.resolve(HEROES).then(
+			heroes => heroes.filter(hero => hero.id === id)[0]
+		);
+	}
+}

app/modules/heroes/components/hero-detail.component.js.map

@@ -0,0 +1,10 @@
+<div *ngIf="hero">
+	<h2>{{hero.name}} details!</h2>
+	<div>
+		<label>id: </label>{{hero.id}}</div>
+	<div>
+		<label>name: </label>
+		<input [(ngModel)]="hero.name" placeholder="name" />
+	</div>
+	<button (click)="goBack()">Back</button>
+</div>

app/modules/heroes/components/hero-detail.component.ts

@@ -0,0 +1,14 @@
+<h2>My Heroes</h2>
+<ul class="heroes">
+	<li *ngFor="#hero of heroes"
+	    [class.selected]="hero === selectedHero"
+	    (click)="onSelect(hero)">
+		<span class="badge">{{hero.id}}</span> {{hero.name}}
+	</li>
+</ul>
+<div *ngIf="selectedHero">
+	<h2>
+		{{selectedHero.name | uppercase}} is my hero
+	</h2>
+	<button (click)="gotoDetail()">View Details</button>
+</div>