Commit inicial angular-tour-of-heroes

angular-tour-of-heroes/app/app.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'my-app',
+    template: `
+        <h1>{{title}}</h1>
+        <nav>
+            <a routerLink="/dashboard">Dashboard</a>
+            <a routerLink="/heroes">Heroes</a>
+        </nav>
+        <router-outlet></router-outlet>
+ `
+
+})
+
+export class AppComponent {
+    title = 'Tour of Heroes';
+}

angular-tour-of-heroes/app/app.module.ts

@@ -0,0 +1,49 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import {AppComponent} from './app.component'
+import { HeroDetailComponent } from './hero-detail.component';
+import { HeroesComponent } from './heroes.component';
+import { HeroService } from './hero.service';
+import { DashboardComponent } from './dashboard.component';
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        RouterModule.forRoot([
+            {
+                path: 'detail/:id',
+                component: HeroDetailComponent
+            },
+            {
+                path: '',
+                redirectTo: '/dashboard',
+                pathMatch: 'full'
+            },
+            {
+                path: 'dashboard',
+                component: DashboardComponent
+            },
+            {
+                path: 'heroes',
+                component: HeroesComponent
+            }
+        ],[])
+    ],
+    declarations: [
+        AppComponent,
+        DashboardComponent,
+        HeroDetailComponent,
+        HeroesComponent
+    ],
+    providers: [
+        HeroService
+    ],
+    bootstrap: [AppComponent]
+})
+
+export class AppModule {
+}

angular-tour-of-heroes/app/dashboard.component.html

@@ -0,0 +1,8 @@
+<h3>Top Heroes</h3>
+<div class="grid grid-pad">
+    <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
+        <div class="module hero">
+            <h4>{{hero.name}}</h4>
+        </div>
+    </div>
+</div>

angular-tour-of-heroes/app/dashboard.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+
+import {Hero} from "./hero";
+import {HeroService} from "./hero.service";
+
+@Component({
+    selector: 'my-dashboard',
+    templateUrl: 'dashboard.component.html',
+})
+export class DashboardComponent implements OnInit {
+
+    heroes:Hero[] = [];
+
+    constructor(private heroService:HeroService) {
+    }
+
+    ngOnInit():void {
+        this.heroService.getHeroes()
+            .then(heroes => this.heroes = heroes.slice(1, 5));
+    }
+
+    gotoDetail(hero:Hero):void { /* not implemented yet */
+    }
+}

angular-tour-of-heroes/app/hero-detail.component.ts

@@ -0,0 +1,39 @@
+// Keep the Input import for now, we'll remove it later:
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute, Params }   from '@angular/router';
+import { Location }                 from '@angular/common';
+
+import { Hero } from './hero';
+import { HeroService } from './hero.service';
+
+@Component({
+    selector: 'my-hero-detail',
+    template: `
+        <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>
+        </div>
+	`
+})
+
+export class HeroDetailComponent implements OnInit {
+    constructor(private heroService:HeroService,
+                private route:ActivatedRoute,
+                private location:Location) {
+    }
+
+    ngOnInit():void {
+        this.route.params.forEach((params:Params) => {
+            let id = +params['id'];
+            this.heroService.getHero(id)
+                .then(hero => this.hero = hero);
+        });
+    }
+
+    @Input()
+    hero:Hero;
+}

angular-tour-of-heroes/app/hero.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import  {Hero}from'./hero';
+import {HEROES}from './mock-heroes';
+
+@Injectable()
+export class HeroService {
+    getHeroes():Promise<Hero[]> {
+        return Promise.resolve(HEROES);
+    }
+
+    getHeroesSlowly():Promise<Hero[]> {
+        return new Promise<Hero[]>(resolve =>
+            setTimeout(resolve, 2000)) // delay 2 seconds
+            .then(() => this.getHeroes());
+    }
+
+}

angular-tour-of-heroes/app/hero.ts

@@ -0,0 +1,4 @@
+export class Hero {
+    id:number;
+    name:string;
+}

angular-tour-of-heroes/app/heroes.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Hero } from './hero';
+import {HeroService} from './hero.service';
+
+@Component({
+    selector: 'my-heroes',
+    template: `
+        <h2>My Heroes</h2>
+        <ul class="heroes">
+            <li *ngFor="let hero of heroes"
+                [class.selected]="hero === selectedHero"
+                (click)="onSelect(hero)">
+                <span class="badge">{{hero.id}}</span> {{hero.name}}
+            </li>
+        </ul>
+        <my-hero-detail [hero]="selectedHero"></my-hero-detail>
+  `,
+    styles: [`
+        .selected {
+            background-color: #CFD8DC !important;
+            color: white;
+        }
+      .heroes {
+        margin: 0 0 2em 0;
+        list-style-type: none;
+        padding: 0;
+        width: 15em;
+      }
+      .heroes li {
+        cursor: pointer;
+        position: relative;
+        left: 0;
+        background-color: #EEE;
+        margin: .5em;
+        padding: .3em 0;
+        height: 1.6em;
+        border-radius: 4px;
+      }
+      .heroes li.selected:hover {
+        background-color: #BBD8DC !important;
+        color: white;
+      }
+      .heroes li:hover {
+        color: #607D8B;
+        background-color: #DDD;
+        left: .1em;
+      }
+      .heroes .text {
+        position: relative;
+        top: -3px;
+      }
+      .heroes .badge {
+        display: inline-block;
+        font-size: small;
+        color: white;
+        padding: 0.8em 0.7em 0 0.7em;
+        background-color: #607D8B;
+        line-height: 1em;
+        position: relative;
+        left: -1px;
+        top: -4px;
+        height: 1.8em;
+        margin-right: .8em;
+        border-radius: 4px 0 0 4px;
+      }
+`]
+})
+
+export class HeroesComponent implements OnInit {
+    heroes:Hero[];
+    selectedHero:Hero;
+
+    constructor(private heroService:HeroService) {
+    }
+
+    getHeroes():void {
+        this.heroService.getHeroesSlowly()
+            .then(heroes => this.heroes = heroes);
+    }
+
+    ngOnInit():void {
+        this.getHeroes();
+    }
+
+    onSelect(hero:Hero):void {
+        this.selectedHero = hero;
+    }
+
+}
+

angular-tour-of-heroes/app/main.ts

@@ -0,0 +1,6 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+const platform = platformBrowserDynamic();
+platform.bootstrapModule(AppModule);

angular-tour-of-heroes/app/mock-heroes.ts

@@ -0,0 +1,14 @@
+import {Hero} from './hero';
+
+export const HEROES:Hero[] = [
+    {id: 11, name: 'Mr. Nice'},
+    {id: 12, name: 'Narco'},
+    {id: 13, name: 'Bombasto'},
+    {id: 14, name: 'Celeritas'},
+    {id: 15, name: 'Magneta'},
+    {id: 16, name: 'RubberMan'},
+    {id: 17, name: 'Dynama'},
+    {id: 18, name: 'Dr IQ'},
+    {id: 19, name: 'Magma'},
+    {id: 20, name: 'Tornado'}
+];

angular-tour-of-heroes/index.html

@@ -0,0 +1,26 @@
+<html>
+<head>
+    <base href="/">
+    <title>Angular QuickStart</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <!-- 1. Load libraries -->
+    <!-- Polyfill(s) for older browsers -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/reflect-metadata/Reflect.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+    <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
+    <script>
+        System.import('app').catch(function (err) {
+            console.error(err);
+        });
+    </script>
+</head>
+<!-- 3. Display the application -->
+<body>
+<my-app>Loading...</my-app>
+</body>
+</html>