Sending an object from Angular8 to Spring Boot

Question

I'm pretty new to Web Development and I admit that following several guides online I'm still a little confused about some basic concepts. I have a Angular8 form that works pretty fine: I insert data and click on "Submit".

onSubmit() {
    console.log(this.model);
    this.submitted = true;
  }

And prints in the console the data of the form (I followed this official guide for reference).

Here's the content of my search-message.ts (the class of model):

export class SearchMessage {

  constructor(
    public id: number,
    public inputText: string,
    public targetSite: string,
    public searchLimit: number,
    public details: boolean
  ) { }
}

Now I'm trying to write a Spring Boot application that will receive the model object and I will simply print in output the same data. No database should be involved in this procedure (and that's why I'm confused: all guides I find online are about connecting a db on a server to the view in Angular). How should I do this?

Hi, can you add the model class you're using in Angular?

A. Wolf
– A. Wolf

2020-02-01 17:06:27 +00:00
Commented Feb 1, 2020 at 17:06 — A. Wolf
– A. Wolf, Commented Feb 1, 2020 at 17:06
Thanks for the comment @A.Wolf . I just added it!

Robb1
– Robb1

2020-02-01 17:14:37 +00:00
Commented Feb 1, 2020 at 17:14 — Robb1
– Robb1, Commented Feb 1, 2020 at 17:14

A. Wolf · Accepted Answer · 2020-02-01 17:35:57Z

1

In Spring Boot you have to define a controller class, which exposes an endpoint that you'll call from your Angular app.

@RestController
@RequestMapping("/path")
public CustomController {
    @PostMapping("message")
    public ResponseEntity<?> addModel(@RequestBody SearchMessage message) {

        // do what you need with the element (ex. write to a db, print data..)
        System.out.println("Data received: " + message.toString());

        return ResponseEntity.ok().build();

    }
}

Where SearchMessage should be something like this:

class SearchMessage {
    private int id; 
    private String inputText;
    private String targetSite;
    private int searchLimit;
    private boolean details;

    // getters and setters
}

And, assuming the backend application is running on port 8081, you can do a post to an endpoint like this:

http://localhost:8081/your-app-context-path/path/message

where the body has to be compatible with the SearchMessage class that you define in the method parameter message.
Note that you can define the application's context path adding this property in the application.properties file:

server.servlet.context-path=/myCoolApp

You can find a complete working example in this Spring example. See also this more complete article.
Let me know if you need more details or explanations.

edited Feb 1, 2020 at 17:35

answered Feb 1, 2020 at 17:18

A. Wolf

1,35720 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Robb1 Over a year ago

Thanks again. What do you mean when you say «where the body has to be compatible with the SearchMessage class» ?

A. Wolf Over a year ago

Your welcome! Only that the SearchMessage class of the backend must have fields that are compatible with the fields of the SearchMessage class of the frontend, i.e. a number field should become a integer or float field in the backend and has to have the same name. Obvious thing, but in case they have different types or names the marshalling of what you pass from the frontend to the object in the backend will fail.

A. Wolf Over a year ago

I added also the SearchMessage class.

A. Wolf Over a year ago

If the answer helped you to resolve your problem, consider to accept it :)

Robb1 Over a year ago

I almost managed to solve the issue. Anyway your answer was really helpful so I'll accept it anyway :) I just have a couple more (maybe trivial) questions: so I have to run the two applications at the same time on two different ports, am I right? And how would be the POST in Angular?

|

Collectives™ on Stack Overflow

Sending an object from Angular8 to Spring Boot

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related