diff --git a/Projektarbeit-3/Vorgehensweise.md b/Projektarbeit-3/Vorgehensweise.md index d7d49f4..259cd5a 100644 --- a/Projektarbeit-3/Vorgehensweise.md +++ b/Projektarbeit-3/Vorgehensweise.md @@ -243,7 +243,7 @@ Hierarchisch betrachtet ergibt sich folgende Reihenfolge: Programmatisch sieht das wie folgt aus (AppComponent.html): -``` +```html @@ -255,7 +255,7 @@ Da Toolbar und Footer unabhängig der URL fast den gleichen Inhalt besitzen sind Das Router-Outlet kommt mit dem AngularRoutingModule und man erhält dadurch von Haus aus eine sehr einfache Möglichkeit, eigene Routen und URL-Parameter zu definieren. Im `AppRoutingModule` muss lediglich ein Array mit den gewünschten Routen definiert werden. Dies sieht wie folgt aus: -``` +```typescript const routes: Routes = [ {path: '', redirectTo: 'map', pathMatch: 'full'}, {path: 'map', component: MapComponent}, @@ -310,7 +310,7 @@ Das verschachtelte Objekt status vom Typ BikePointStatus hat wiederum folgende F Programmatisch ist der Map-Bike-Point wie folgt abgebildet: -``` +```typescript export interface IMapBikePoint { id?: string; commonName?: string; @@ -376,27 +376,27 @@ Programmatisch ähnelt dieses Domänenobjekt dem Map-Bike-Point. Um redundanten Code zu sparen, wurde die URL für das Backend in eine globale Variable ausgelagert, die von überall im Projekt erreichbar ist. In der `environment.ts` wurde die URL wie folgt hinterlegt: -``` +```typescript export const environment = { production: false, apiUrl: 'https://it-schwarz.net/api/' }; ``` Somit ergibt sich dann bei einem Aufruf mit einem HTTP-GET folgende Architektur der URL: -``` +```typescript public exampleMethod(param: string): Promise { return this.client.get(environment.apiUrl + `urlToEndpoint/${param}/`).toPromise(); } ``` Sehr früh war klar, dass wir Promises anstatt Observables nutzen. Dadurch hatten wir die Möglichkeit, gewisse Abschnitte der Programmausführung zu synchronisieren. So konnten wir erst gewisse Komponenten generieren, wenn der Aufruf zum Backend erfolgreich war. #### Beispiel aus dem DashboardService -``` +```typescript public fetchDashboardInit(id: string): Promise { return this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise(); } ``` #### Beispiel aus dem MapService -``` +```typescript private fetchBikePointGeoData(): Promise { return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise(); } @@ -418,7 +418,7 @@ Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map -``` +```html
@@ -429,7 +429,7 @@ Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map -``` +```typescript async initMapView(): Promise { this.service.initMap(51.509865, -0.118092, 14); await this.service.drawStationMarkers();