chibat/spring-openapi-angular-starter

Spring -> OpneAPI => Angular Starter

Spring -> OpneAPI => Angular Starter

Feature

• Type safe communication

Architecture

Prerequisites

• JDK11
• node + npm (Current Version)

Run

$ cd backend
$ ./gradlew bootRun

Open following URL by Web browser.
http://localhost:8080/

Run the frontend dev server

$ cd frontend
$ npm install
$ npm start

Open following URL by Web browser.
http://localhost:4200/

1. Create a Web backend code

CalculatorController.java

package app.backend.web;

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import io.swagger.annotations.ApiOperation;
import lombok.Data;
import lombok.Value;

@RestController
public class CalculatorController {

    @PostMapping("/rest/api/add")
    @ApiOperation(value = "", tags = "calculator", nickname = "add")
    public Response add(@RequestBody final Request request) {
        return new Response(request.getArg1() + request.getArg2());
    }

    @Data
    public static class Request {
        private Integer arg1;
        private Integer arg2;
    }

    @Value
    public static class Response {
        private final Integer result;
    }
}

2. Generate the client code

$ cd backend
$ ./gradlew openApiGenerate

3. Create a Web frontend code using the Generated files

app.component.ts

import { Component } from '@angular/core';
import { CalculatorService } from './client/api/calculator.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  arg1: number;
  arg2: number;
  result: number;

  constructor(private  calculatorService: CalculatorService) {
  }

  add() {
    if (this.arg1 || this.arg2) {
      this.calculatorService
        .add({arg1: this.arg1, arg2: this.arg2})
        .subscribe(data => this.result = data.result);
    }
  }
}

blog

Japanese