• Get Started
• Blog Project

Ein neues Projekt über die IDE Eclipse einrichten.

• Spring Project -> Blog

• Schritte aus der Anleitung zum Einrichten einer Spring-Boot-Application

  evtl. muss Node.JS auf dem System installiert werden.

• Unter Help > Eclipse Marketplace... Spring Tools 4-Plugin installieren. (Ein Neustart der IDE kann erforderlich sein.)

  

• File > New > New Project öffnen

  

• Projekt konfigurieren

  

• Finish klicken

• Einige Zeit warten, bis der Node Package Manager alles installiert hat.

  

• Im Rahmen des Installationsverfahrens werden unter dem Frontend-Projekt weitere Ordner angelegt (e2e, src) und die default node-modules gefüllt.

  

• Starten der Web-Application erfolgt über Rechtsklick auf das Projekt > Run as > Angular Web Application.

  

• Solange der Frontend-Server nun läuft können wir unsere Seite unter http://localhost:4200 erreichen. Ohne weitere Änderungen sehen wir die Webseite, wie unter app.component.html vordefiniert.

  

Im folgenden wollen wir das aufgesetzte Frontend-Projekt nutzen, um die Visualisierung unseres Backend-Projekts zu übernehmen.

• Passen wir app.component.html an, um unser gewünschtes Grundgerüst zu erhalten. Änderungen können live verfolgt werden, solange unser Frontend-Server-Prozess läuft. Das kann in Eclipse direkt passieren:

  

  Parallel oder alternativ können die Änderungen auch im geöffneten Browser deines Vertrauens nachverfolgt, bzw. auf diversen Browser-Instanzen getestet werden.

• Wir entfernen nun alles, außer den style Bereich, sowie die beiden div-Container toolbar und content. Innerhalb des Contents lassen wir nur den ersten inneren div-Container "Highlight Card" übrig.

  

In unserer Toolbar wollen wir nun den Willkommenstext aus unserem Backend anzeigen lassen.

• In app.component.html ersetzen wir <span>Welcome</span> daher mit <span>{{ title }}</span>

• Sinnvollerweise passen wir auch unsere Highlight Card im Content-Bereich an => <span>App is running!</span>

  Der Titel wird nun aus dem TypeScript-Code ausgelesen und sowohl in der Toolbar, als auch im Browserfenster verwendet.

• In app.component.ts verändern wir die AppComponent Klasse daher wie folgt: Alt:

     export class AppComponent {
       title = 'Blog-FE';
     }

  Neu:

    import { Component } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
  
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title: string;
  
      constructor(private http: HttpClient) {
        this.http.get('http://localhost:8080', { responseType: 'text' }).subscribe(data => {
          console.log('data received: ');
          console.log(data);
          this.title = data;
        });
     }
   }

• Der HttpClient wird dem Konstruktor als Parameter übergeben. Damit dies auch wie erwartet passiert, muss das Modul in app.module.ts importiert werden.

  import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule } from '@angular/common/http';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      HttpClientModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

• Jetzt wird der Willkommensgruß aus dem Backend abgerufen und innerhalb der Toolbar angezeigt.

  

  Enable Cross Origin Requests (CORS)
  
  
  
  Dazu muss im Backend unserer index-Methode die Annotation @CrossOrigin(origins = "http://localhost:4200") inklusive
  ihrer import-Funktion import org.springframework.web.bind.annotation.CrossOrigin; hinzugefügt und der Backend-Server
  neu gestartet werden.