Erstellen einer Webanwendung mit Spring Boot und Angular

Viele Entwickler bevorzugen die Microservices-Architektur, um ihre Anwendungen zu erstellen. Microservices sind die richtige Wahl, wenn Sie eine skalierbare und unternehmensweite Anwendung erstellen müssen. Wenn Sie jedoch nur eine kleine Webanwendung benötigen, ist die Verwendung der Microservices-Architektur ein Overkill, da die Verwaltung der Bereitstellung und anderer Aspekte zeitaufwändig ist.

Eine bessere Alternative ist die Verwendung von Spring Boot und Angular zur Erstellung einfacher Webanwendungen, die in einer einzigen jar-Datei bereitgestellt werden können. In diesem Blog wird beschrieben, wie Sie eine Webanwendung mit Angular und Spring Boot erstellen können.

Spring Boot-Anwendung erstellen

Schritt 1: Erstellen Sie mit dem Spring-Initialisierer eine Projektstruktur wie unten gezeigt

Schritt 2: Importieren Sie das Projekt in Ihre IDE(Eclipse, Intellij usw.) und beginnen Sie mit der Erstellung Ihres Java-Codes mit Rest-Api zur Bedienung der Angular-Anwendung. Nachfolgend finden Sie ein Beispiel für einen Rest-Api-Code zur Anzeige des Anwendungsnamens in der Angular-Oberfläche:

ApplicationController.java

package com.boot.angular.angularwithboot.controller;

import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/api/v1/application") public class ApplicationController { @GetMapping public ResponseEntity<String> appName() { return new ResponseEntity<String>("Webanwendung mit Spring Boot und Angular", HttpStatus.OK); } }

Schritt 3: Führen Sie die Anwendung aus und prüfen Sie, ob Sie über den Befehl curl auf die rest api zugreifen können.

Die Entwicklung der Spring Boot-Anwendung ist abgeschlossen und nun erstellen Sie die Angular-Anwendung. Da wir beide Anwendungen in ein einziges jar und ein einziges Git-Repository integrieren, befolgen Sie das unten beschriebene Verfahren, um daraus ein einziges Paket zu machen.

Schritt 4: Um die Angular-Anwendung zu erstellen, installieren Sie die folgenden Tools in Ihrem System:

• npm
• angular cli

Die npm-Installation kann als Teil der node js-Installation durchgeführt werden.

npm install -g @angular/cli

Befehl, um angular cli zu installieren. Prüfen Sie nach der Installation die Version von Boot Node und Angular.

Schritt 5:

Da die Tools nun vorhanden sind, beginnen Sie mit der Erstellung der Angular-Anwendung. Öffnen Sie die Eingabeaufforderung und navigieren Sie zum Stammverzeichnis der Spring Boot-Anwendung.

Beispiel: E:PamarthiProjectslearnblogangular-mit-Stiefel

Folgen Sie den Angular-Cli-Befehlen, um die Angular-Anwendung Skelton zu erstellen

ng neue ui

Dadurch wird Code im Ordner ui erzeugt:

cd ui ng dienen

Öffnen Sie http://localhost:4200/, um die Standardseite der Angular-Anwendung zu überprüfen.

Schritt 6:

Erstellen Sie den Angular-Dienst, um den Anwendungsnamen von der Spring Boot-API abzurufen. Öffnen Sie die UI-Anwendung im Visual Studio Code Editor, um Codeänderungen vorzunehmen.

ng g s services/anwendung

Dieser Befehl erzeugt den Angular-Dienst.

Schritt 7:

Verwenden Sie einen http-Getcall-Aufruf an die Spring Boot API, um den Anwendungsnamen abzurufen:

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ApplicationService { constructor(private http: HttpClient) { } getApplicationName() { return this.http.get("/api/v1/application"); } }

Schritt 8:

Injizieren Sie diesen Dienst in die app.component.ts, um ihn in der Benutzeroberfläche darzustellen.

import { Component } from '@angular/core'; import { ApplicationService } from './services/application.service'; @Komponente({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = ''; constructor(private applicationService: ApplicationService) { applicationService.getApplicationName().subscribe((resp: any) => { this.title = bzw; }) } }

Da die Implementierung des Spring Boot-Dienstes und die Änderungen an der Benutzeroberfläche abgeschlossen sind, erstellen Sie nun einen einzelnen Build, um die Anwendung bereitzustellen.

Schritt 9:

Um Konfigurationsänderungen in der pom.xml vorzunehmen, fügen Sie ein Plugin hinzu, um den produktionsfertigen Code der Angular-Anwendung zu erstellen, und platzieren Sie ihn im Ordner resources der Spring Boot-Anwendung. Fügen Sie diese Konfiguration in pom.xml zu

<bauen> <finalName>angular-mit-boot</finalName> <Ressourcen> <Ressource> <Verzeichnis>${basedir}/src/main/resources</Verzeichnis> <Filterung>true</filterung> </resource> </resources> <Plugins> <Plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> <Plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-jar-plugin</artifactId> <Konfiguration> <Archiv> <Manifest> <mainClass>com.boot.angular.angularwithboot.AngularWithBootApplication</mainClass> </manifest> </archive> </configuration> </plugin> <Plugin> <artifactId>maven-resources-plugin</artifactId> <Hinrichtungen> <Ausführung> <id>copy-resources</id> <Phase>Prozess-Quellen</phase> <Ziele> <Ziel>copy-resources</Ziel> </goals> <Konfiguration> <outputDirectory>${project.basedir}/src/main/resources/static</outputDirectory> <Ressourcen> <Ressource> <Verzeichnis>${project.basedir}/ui/dist/ui</directory> <Filterung>true</filterung> </resource> </resources> </configuration> </execution> </executions> </plugin> </plugins> </build> <Profile> <Profil> <id>build-ui</id> <bauen> <Plugins> <Plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin</artifactId> <Hinrichtungen> <Ausführung> <id>install frontend-app</id> <phase>generieren-Quellen</phase> <Ziele> <Ziel>exec</Ziel> </goals> <Konfiguration> <Ausführbar>node</ausführbar> <Argumente> <argument>${project.basedir}/ui-build-install.js</argument> <Argument>npm</argument> <argument>installieren</argument> </arguments> </configuration> </execution> <Ausführung> <id>bauen ui</id> <phase>generieren-Quellen</phase> <Ziele> <Ziel>exec</Ziel> </goals> <Konfiguration> <Ausführbar>node</ausführbar> <Argumente> <argument>${project.basedir}/ui-build-install.js</argument> <Argument>ng</Argument> <Argument>bauen</Argument> <Argument>--prod</Argument> </arguments> </configuration> </execution> </executions> </plugin> </plugins> </build> </profile> </profiles>

Schritt 10:

Fügen Sie eine weitere Datei im Stammordner hinzu, um die Angular-Anwendung zu erstellen.

ui-build-install.js

const args = process.argv; var exec = require('child_process').execSync; var cmd = "cd ui && "+ args[2]+" " + args[3] +" "+args[4] ; var options = { encoding: 'utf8' };

console.log(exec(cmd, options));

Schritt 11:

Lassen Sie uns nun die jar-Datei mit Angular-Code erstellen:

mvn clean install -P build-ui

Der folgende Befehl erzeugt die jar-Datei:

java -jar targetangular-mit-boot.jar

Rufen Sie den Link http://localhost:8080/ auf, sehen Sie die Angular-Anwendung mit dem Aufruf des Java-Dienstes und beobachten Sie, ob der Anwendungsname in der Benutzeroberfläche vom Spring Boot-Dienst stammt. Jetzt ist Ihre Webanwendung bereit für den Einsatz.

Der vollständige Beispielcode für die oben gezeigte Illustration ist auf GitHub verfügbar.