Move duck list to a service

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

app/app.component.ts

@@ -1,21 +1,27 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 
 import { Duck } from "./models";
-
+import { DuckService } from "./duck.service";
-const DUCKS: Ducks[] = [
-    { id: 1, color: 'yellow' },
-    { id: 2, color: 'blue' },
-    { id: 3, color: 'pink' }
-]
 
 @Component({
     selector: "duckbook-front",
-    templateUrl: "/app/app.component.html"
+    templateUrl: "/app/app.component.html",
+    providers: [ DuckService ]
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
-    ducks = DUCKS;
+    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;

app/duck.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from "@angular/core";
+
+import { Duck } from "./models";
+import { DUCKS } from "./mocked-data";
+
+@Injectable()
+export class DuckService {
+    getDucks(): Promise<Duck[]> {
+        return Promise.resolve(DUCKS);
+    }
+}

app/ducks.component.ts

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

app/mocked-data.ts

@@ -0,0 +1,7 @@
+import { Duck } from "./models";
+
+export const DUCKS: Duck[] = [
+    { id: 1, color: 'yellow' },
+    { id: 2, color: 'blue' },
+    { id: 3, color: 'pink' }
+];