router and config

hv-ui/src/app/app-routing.module.ts

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { MietersComponent } from './mieters/mieters.component';
+import { ObjekteComponent } from './objekte/objekte.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'objekte', component: ObjekteComponent },
+  { path: 'mieters', component: MietersComponent }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

hv-ui/src/app/app.component.css

@@ -1,6 +1,23 @@
-.right {
-    float: right
-}
-.clear {
-    float: clear
-}
+/* AppComponent's private CSS styles */
+h1 {
+    font-size: 1.2em;
+    margin-bottom: 0;
+  }
+  nav a {
+    padding: 5px 10px;
+    text-decoration: none;
+    margin-top: 10px;
+    display: inline-block;
+    background-color: #eee;
+    border-radius: 4px;
+  }
+  nav a:visited, a:link {
+    color: #334953;
+  }
+  nav a:hover {
+    color: #039be5;
+    background-color: #cfd8dc;
+  }
+  nav a.active {
+    color: #039be5;
+  }

hv-ui/src/app/app.component.html

@@ -1,5 +1,8 @@
 <h1>{{title}}</h1>
 
-<app-objekte></app-objekte>
-<app-mieters></app-mieters>
+<nav>
+    <a routerLink="/objekte">Meine Objekte</a>
+    <a routerLink="/mieters">Meine Mieter</a>
+</nav>
+<router-outlet></router-outlet>
 <app-messages></app-messages>

hv-ui/src/app/config.ts

@@ -0,0 +1 @@
+export const serviceBaseUrl = "http://172.16.3.32:5000";

hv-ui/src/app/mieter.service.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Mieter } from './mieter';
 import { MessageService } from './message.service';
+import { serviceBaseUrl } from './config'
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +14,11 @@ export class MieterService {
   
   getMieters(): Promise<Mieter[]> {
     this.messageService.add('MieterService: fetched mieters');
-    return this.http.get<Mieter[]>(`http://172.16.3.185:5000/hv/mieters`).toPromise()
+    return this.http.get<Mieter[]>(`${serviceBaseUrl}/hv/mieters`).toPromise()
   }
 
   getMieter(id: number): Promise<Mieter> {
     this.messageService.add(`MieterService: fetch mieter id=${id}`);
-    return this.http.get<Mieter>(`http://172.16.3.185:5000/hv/mieter/${id}`).toPromise()
+    return this.http.get<Mieter>(`${serviceBaseUrl}/hv/mieter/${id}`).toPromise()
   }
 }

hv-ui/src/app/objekt.service.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 
 import { Objekt } from './objekt';
 import { MessageService } from './message.service';
+import { serviceBaseUrl } from './config';
 
 @Injectable({
   providedIn: 'root'
@@ -13,11 +14,11 @@ export class ObjektService {
   
   getObjekte(): Promise<Objekt[]> {
     this.messageService.add('ObjektService: fetched objekte');
-    return this.http.get<Objekt[]>(`http://172.16.3.185:5000/hv/objekte`).toPromise()
+    return this.http.get<Objekt[]>(`${serviceBaseUrl}/hv/objekte`).toPromise()
   }
 
   getObjekt(id: number): Promise<Objekt> {
     this.messageService.add(`ObjektService: fetch objekt id=${id}`);
-    return this.http.get<Objekt>(`http://172.16.3.185:5000/hv/objekt/${id}`).toPromise()
+    return this.http.get<Objekt>(`${serviceBaseUrl}/hv/objekt/${id}`).toPromise()
   }
 }