http

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

@@ -17,7 +17,7 @@ export class DashboardComponent implements OnInit {
   }
 
   getHeroes(): void {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1, 5));
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes.slice(1, 5));
   }
 
 }

tools/app/angular-tour-of-heroes/src/app/db-handle.ts

@@ -1,28 +0,0 @@
-import { Connection, ConnectionConfig, createConnection } from 'mariadb'
-
-export class DbHandle {
-    private connConfig?: ConnectionConfig
-    private conn?: Connection
-
-    public constructor() {
-        this.connConfig = {
-            host: '172.16.10.18',
-            user: 'heroes',
-            password: 'test123',
-            database: 'heroes'
-        }
-    }
-
-    public async connect(): Promise<void> {
-        this.conn = await createConnection(this.connConfig)
-    }
-
-    public query(stmt: string) : Promise<any> {
-        return this.conn?.query(stmt) ?? Promise.reject(new Error('Connection not ready (query)'))
-    }
-
-    public close() : Promise<void> {
-        return this.conn?.end() ?? Promise.reject(new Error('Connection not ready (close)'))
-    }
-
-}

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

@@ -22,7 +22,7 @@ export class HeroDetailComponent implements OnInit {
 
   getHero(): void {
     const id = +this.route.snapshot.paramMap.get('id');
-    this.heroService.getHero(id).then(hero => this.hero = hero);
+    this.heroService.getHero(id).subscribe(hero => this.hero = hero);
   }
 
   goBack(): void {
@@ -30,6 +30,6 @@ export class HeroDetailComponent implements OnInit {
   }
 
   save(): void {
-    this.heroService.updateHero(this.hero).then(() => this.goBack());
+    this.heroService.updateHero(this.hero).subscribe(() => this.goBack());
   }
 }

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

@@ -1,45 +1,29 @@
 import { Injectable } from '@angular/core';
-
-import { DbHandle } from './db-handle';
+import { Observable, throwError, of } from 'rxjs';
+import { catchError, retry } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
 
 import { Hero } from './hero';
-import { HEROES } from './mock-heroes';
 import { MessageService } from './message.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class HeroService {
-  constructor(private messageService: MessageService) { }
+  constructor(private messageService: MessageService, private http: HttpClient) { }
 
-  async getHeroes(): Promise<Hero[]> {
+  getHeroes(): Observable<Hero[]> {
     this.messageService.add('HeroService: fetched heroes');
-    const dbHandle = new DbHandle()
-    try {
-      await dbHandle.connect()
-      const result = await dbHandle.query('SELECT id, name FROM hero')
-      return result.map((row: Record<string, unknown>) => {
-        return {id: row.id ?? -1, name: row.name ?? 'unknown' }
-      })
-    } finally {
-      dbHandle.close()
-    }
+    return this.http.get<Hero[]>(`/heroes`)
   }
 
-  async getHero(id: number): Promise<Hero> {
+  getHero(id: number): Observable<any> {
     this.messageService.add(`HeroService: fetch hero id=${id}`);
-    const dbHandle = new DbHandle()
-    try {
-      await dbHandle.connect()
-      const result = await dbHandle.query(`SELECT id, name FROM hero WHERE id = ${id}`)
-      return { id: result[0].id ?? -1, name: result[0].name ?? 'unknown' }
-    } finally {
-      dbHandle.close()
-    }
+    return this.http.get<Hero>(`/hero?id=${id}`)
   }
 
-  updateHero(hero: Hero): Promise<any> {
+  updateHero(hero: Hero): Observable<any> {
     this.messageService.add(`HeroService: save change: id=${hero.id}, name=${hero.name}`);
-    return Promise.resolve(true);
+    return of(true);
   }
 }

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

@@ -19,7 +19,7 @@ export class HeroesComponent implements OnInit {
   constructor(private heroService: HeroService, private messageService: MessageService) { }
 
   getHeroes(): void {
-    this.heroService.getHeroes().then(heroes => this.heroes = heroes);
+    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
   }
 
   ngOnInit(): void {

tools/app/angular-tour-of-heroes/src/electron-app.js

@@ -1,30 +0,0 @@
-const { create } = require('domain')
-const { app, BrowserWindow } = require('electron')
-
-let mainWindow
-function createWindow() {
-    mainWindow = new BrowserWindow({
-        width: 800,
-        height: 600,
-        autoHideMenuBar: false
-    })
-    mainWindow.loadURL('file://' + __dirname + '/angular-tour-of-heroes/index.html')
-    mainWindow.webContents.openDevTools()
-    mainWindow.on('closed', () => {
-        mainWindow = null
-    })
-}
-
-app.on('ready', createWindow)
-
-app.on('window-all-closed', () => {
-    if (process.platform !== 'darwin') {
-        app.quit()
-    }
-})
-
-app.on('activate', () => {
-    if (mainWindow === null) {
-        createWindow()
-    }
-})

tools/app/angular-tour-of-heroes/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>AngularTourOfHeroes</title>
-  <base href="./">
+  <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>