AngularJs POST-GET LIST Objects to SpringBoot server

In this tutorial, JavaSampleApproach will show you how to implement a web application AngularJs POST-GET LIST Objects to SpringBoot server.

Related posts:
AngularJs POST-GET Nested Objects to SpringBoot server
How to integrate Http Angularjs with Spring MVC | Spring Boot
AngularJs Table display Data Objects 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. Goals

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

Angularjs Send List Object via SpringBoot RestAPI - project structure

Results:
– Add list customers

Angularjs Send List Object via SpringBoot RestAPI - add customers list

– Then submit list customers:

Angularjs Send List Object via SpringBoot RestAPI - post logs

– Get all customers:

Angularjs Send List Object via SpringBoot RestAPI - get results

III. Practice

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

1. Create Spring Boot project

Use SpringToolSuite to create a SpringBoot project SpringAngularJsSendListObjects with dependencies:


	org.springframework.boot
	spring-boot-starter-thymeleaf


	org.springframework.boot
	spring-boot-starter-web

2. Create data models

– Create Address model:

package com.javasampleapproach.angularjs.model;

public class Address {
	 
	private String street;
	private String postcode;
	
	public Address(){}
	
	public Address(String street, String postcode){
		this.street = street;
		this.postcode = postcode;
	}
 
	public String getStreet() {
		return street;
	}
 
	public void setStreet(String street) {
		this.street = street;
	}
 
	public String getPostcode() {
		return postcode;
	}
 
	public void setPostcode(String postcode) {
		this.postcode = postcode;
	}
 
	@Override
	public String toString() {
		return "Address {street:" + street + ", postcode:" + postcode + "}";
	}
}

– Create Customer model:

package com.javasampleapproach.angularjs.model;

public class Customer {
	 
	private String name;
	private Integer age;
	private Address address;
	
	public Customer(){}
	
	public Customer(String name, Integer age, Address address){
		this.name = name;
		this.age = age;
		this.address = address;
	}
 
	public String getName() {
		return name;
	}
 
	public void setName(String name) {
		this.name = name;
	}
 
	public Integer getAge() {
		return age;
	}
 
	public void setAge(Integer age) {
		this.age = age;
	}
 
	public Address getAddress() {
		return address;
	}
 
	public void setAddress(Address address) {
		this.address = address;
	}
 
	@Override
	public String toString() {
		return "Customer {name:" + name + ", age:" + age + ", address:" + address + "}";
	}
 
}
3. Create Web Controller to provide web views
package com.javasampleapproach.angularjs.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class WebController {
	@GetMapping(value="/")
    public String homepage(){
        return "index";
    }
}
4. Create RestController for POST & GET requests
package com.javasampleapproach.angularjs.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.angularjs.model.Customer;

@RestController
@RequestMapping("/api/customer")
public class RestWebController {
	
	List cust = new ArrayList();
	
	@GetMapping(value = "/all")
	public List getResource(){
			return cust;
	}
	
	@PostMapping(value="/save")
	public String postCustomer(@RequestBody List customers){
		cust.addAll(customers);
		return "Post Successfully!";
	}
}
5. Create an index.html view




	  Spring Boot - AngularJs Example
	  
	  %MINIFYHTML7e02081b34ab543a7c64a89b16bfbe5d16%%MINIFYHTML7e02081b34ab543a7c64a89b16bfbe5d17%
	  



Http AngularJs - GET/POST List Objects

No Name Age Street PostCode
{{ $index + 1 }} {{ cust.name | uppercase}} {{ cust.age}} {{ cust.address.street}} {{ cust.address.postcode}}

Post Successfully!

  • {{"{name: " + cust.name + ", age: " + cust.age + ", street: " + cust.address.street + ", postcode: " + cust.address.postcode + "}"}}
%MINIFYHTML7e02081b34ab543a7c64a89b16bfbe5d18%
6. Create AngularJs POST & GET controller
var app = angular.module('app', []);

// #######################
// POST CONTROLLER
// #######################

app.controller('postcontroller', function($scope, $http, $location) {
	
	// be used to decide for showing PostResults   
	$scope.postDivAvailable = false;
	// be used for decide for showing GetResults 
	$scope.getDivAvailable = false;
	
	// for Form-Customer
	$scope.formCust;
	
	// add List-Customer
	$scope.listCustomers = [];
	
	/*
	 * Add a Customer
	 */
	$scope.addCustomer = function(){
		if($scope.formCust){
			$scope.listCustomers.push($scope.formCust);	
			// reset Form Customer
			$scope.formCust = null;
		}else{
			alert("Please Fill Out Customer Info!");
		}
	}
	
	/*
	 * Delete a Customer item
	 */
	$scope.deleteItem = function(index){
		// remove item on angularjs model
		$scope.listCustomers.splice(index, 1);
	}
	
	/*
	 * Do post a List-Customer to Back-End server
	 */
	$scope.postListCustsFunc = function(){
		// post URL
		var url = $location.absUrl() + "api/customer/save";
		
		// prepare headers for posting
		var config = {
                headers : {
                	'Content-Type': 'application/json',
                	'Accept': 'text/plain'
                }
        }
		
		// prepare data for post messages
		var dataArr = $scope.listCustomers;
		
		// do posting
		$http.post(url, dataArr, config).then(function (response) {
			// turn on flag for post successfully
			$scope.postDivAvailable = true;
			
			$scope.postCust =  response.data;
		}, function error(response) {
			$scope.postResultMessage = "Error Status: " +  response.statusText;
		});
		
		// reset List-Customer
		$scope.listCustomers = [];
	}
});

//#######################
//GET CONTROLLER
//#######################

app.controller('getcontroller', function($scope, $http, $location) {
	
	$scope.getfunction = function(){
		// get URL
		var url = $location.absUrl() + "api/customer/all";
		
		// do getting
		$http.get(url).then(function (response) {
			// turn on flag for get successfully
			$scope.getDivAvailable = true;
			
			$scope.response = response.data;
		}, function error(response) {
			$scope.postResultMessage = "Error Status: " +  response.statusText;
		});
	}
});

IV. Sourcecode

SpringAngularJsSendListObjects



By grokonez | November 8, 2017.


Related Posts


Got Something To Say:

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

*