AngularJs Http Put Form Data to Remote RestAPIs | SpringBoot

In this tutorial, JavaSampleApproach will show you way to implement a web application AngularJs Http PUT Form Data to remote RestAPIs with SpringBoot.

Related posts:
AngularJs POST-GET Nested Objects to SpringBoot server
AngularJs NgRepeat $Index to select data | SpringBoot
AngularJs Http Delete Data from RestAPIs remote | SpringBoot & Bootstrap

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.8.1.RELEASE
– AngularJs
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Practice

In the tutorial, we build a SpringBoot project as below:

angularjs http put form data to springboot server - project structure

Step to do:
– Create Spring Boot project
– Create data models
– Create Web Controller to provide web views
– Create RestController for PUT & GET requests
– Create an index.html view
– Create AngularJs GET/PUT controller
– Run & Check results

1. Create Spring Boot project

Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
– For Template Engines, choose Thymeleaf.
– For Web MVC, choose Web->Web.

angularjs http put form data to springboot server - add dependencies

Open pom.xml file and check needed dependencies:

2. Create data models

– Create Address model:

– Then create Customer model that includes Address model:

3. Create Web Controller to provide web views

4. Create RestController for PUT & GET requests

5. Create an index.html view

6. Create AngularJs GET/PUT controller

7. Run & Check results

Build & Run project with Spring Boot mode.
–> Result:

angularjs http put form data to springboot server - successful result

angularjs http put form data to springboot server - successful result - logs

Now stop SpringBoot server:

angularjs http put form data to springboot server - error result

angularjs http put form data to springboot server - error result logs

III. Sourcecode

SpringAngularJsPUTFormNestedObject

By grokonez | October 27, 2017.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*