Move to using routers

Signed-off-by: Gergely Polonkai <gergely@polonkai.eu>

app/app.component.html

@@ -1,8 +1,3 @@
-<h1>Hello!</h1>
+<a routerLink="/dashboard">Dashboard</a>
-<duck-detail [duck]="selectedDuck"></duck-detail>
+<a routerLink="/ducks">Ducks</a>
-
+<router-outlet></router-outlet>
-<ul>
-    <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
-        {{ duck.color }}
-    </li>
-</ul>

app/app.component.ts

@@ -1,34 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
-
-import { Duck } from "./models";
-import { DuckService } from "./duck.service";
 
 @Component({
     selector: "duckbook-front",
-    templateUrl: "/app/app.component.html",
+    templateUrl: "/app/app.component.html"
-    providers: [ DuckService ]
 })
-export class AppComponent implements OnInit {
+export class AppComponent {}
-    ducks = [];
-    selectedDuck: Duck;
-
-    constructor(private duckService: DuckService) {}
-
-    ngOnInit(): void {
-        this.getDucks();
-    }
-
-    getDucks(): void {
-        this.duckService.getDucks().then(ducks => this.ducks = ducks);
-    }
-
-    onSelect(duck: Duck): void {
-        console.log(duck);
-        this.selectedDuck = duck;
-    }
-
-    duck: Duck = {
-        id: 1,
-        color: 'yellow'
-    };
-}

app/app.module.ts

@@ -2,18 +2,28 @@ import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 
+import { routing } from "./app.routing";
+
 import { AppComponent } from "./app.component";
+import { DucksComponent } from "./ducks.component";
 import { DuckDetailComponent } from "./duck-detail.component";
+import { DashboardComponent } from "./dashboard.component";
+
+import { DuckService } from "./duck.service";
 
 @NgModule({
     imports: [
         BrowserModule,
-        FormsModule
+        FormsModule,
+        routing
     ],
     declarations: [
         AppComponent,
-        DuckDetailComponent
+        DucksComponent,
+        DuckDetailComponent,
+        DashboardComponent
     ],
+    providers: [ DuckService ],
     bootstrap: [ AppComponent ]
 })
 export class AppModule {}

app/app.routing.ts

@@ -0,0 +1,28 @@
+import { ModuleWithProviders } from "@angular/core";
+import { Routes, RouterModule } from "@angular/router";
+
+import { DucksComponent } from "./ducks.component";
+import { DuckDetailComponent } from "./duck-detail.component";
+import { DashboardComponent } from "./dashboard.component";
+
+const appRoutes: Routes = [
+    {
+        path: "",
+        redirectTo: "/dashboard",
+        pathMatch: "full"
+    },
+    {
+        path: "dashboard",
+        component: DashboardComponent
+    },
+    {
+        path: "ducks",
+        component: DucksComponent
+    },
+    {
+        path: "detail/:id",
+        component: DuckDetailComponent
+    }
+]
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app/dashboard.component.html

@@ -0,0 +1,3 @@
+<div *ngFor="let duck of ducks" (click)="gotoDetail(duck)">
+    {{ duck.color }}
+</div>

app/dashboard.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from "@angular/core";
+import { Router } from "@angular/router";
+
+import { DuckService } from "./duck.service";
+import { Duck } from "./models";
+
+@Component({
+    selector: "dashboard",
+    templateUrl: "/app/dashboard.component.html"
+})
+export class DashboardComponent implements OnInit {
+    ducks: Duck[] = [];
+
+    constructor(private router: Router,
+                private duckService: DuckService)
+    {}
+
+    ngOnInit(): void {
+        this.duckService.getDucks()
+            .then(ducks => this.ducks = ducks.slice(1, 5));
+    }
+
+    gotoDetail(duck: Duck): void {
+        let link = ['/detail', duck.id];
+        this.router.navigate(link);
+    }
+}

app/duck-detail.component.html

@@ -1,10 +1,11 @@
 <div *ngIf="duck">
     <div>
-        <label>id:</label>
+        <label>id: </label>
         {{ duck.id }}
     </div>
     <div>
-        <label>color:</label>
+        <label>color: </label>
-        <input [(ngModel)]="duck.color" placeholder="Color">
+        <input [(ngModel)]="duck.color" placeholder="Color" />
     </div>
+    <button (click)="goBack()">Back</button>
 </div>

app/duck-detail.component.ts

@@ -1,4 +1,7 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
+import { ActivatedRoute, Params } from "@angular/router";
+
+import { DuckService } from "./duck.service";
 
 import { Duck } from "./models";
 
@@ -6,7 +9,23 @@ import { Duck } from "./models";
     selector: "duck-detail",
     templateUrl: "/app/duck-detail.component.html"
 })
-export class DuckDetailComponent {
+export class DuckDetailComponent implements OnInit {
+    constructor(private duckService: DuckService,
+                private route: ActivatedRoute)
+    {}
+
+    ngOnInit(): void {
+        this.route.params.forEach((params: Params) => {
+            let id = +params['id'];
+            this.duckService.getDuck(id)
+                .then(duck => this.duck = duck);
+        });
+    }
+
+    goBack(): void {
+        window.history.back();
+    }
+
     @Input()
     duck: Duck;
 }

app/duck.service.ts

@@ -8,4 +8,8 @@ export class DuckService {
     getDucks(): Promise<Duck[]> {
         return Promise.resolve(DUCKS);
     }
+
+    getDuck(id: number): Promise<Duck> {
+        return this.getDucks().then(ducks => ducks.find(duck => duck.id === id));
+    }
 }

app/ducks.component.html

@@ -0,0 +1,11 @@
+<h1>Hello!</h1>
+
+<ul>
+    <li *ngFor="let duck of ducks" (click)="onSelect(duck)">
+        {{ duck.color }}
+    </li>
+</ul>
+<div *ngIf="selectedDuck">
+    {{ selectedDuck.color }}
+    <button (click)="gotoDetail(selectedDuck)">Edit</button>
+</div>

index.html

@@ -5,6 +5,8 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
+        <base href="/">
+
         <link rel="stylesheet" href="styles.css">
 
         <!-- 1. Load libraries -->