- Type safe communication
- JDK11
- node + npm (Current Version)
$ cd backend
$ ./gradlew bootRun
Open following URL by Web browser.
http://localhost:8080/
$ cd frontend
$ npm install
$ npm start
Open following URL by Web browser.
http://localhost:4200/
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;
}
}
$ cd backend
$ ./gradlew openApiGenerate
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);
}
}
}