AngularJs Http Delete Data from RestAPIs remote | SpringBoot & Bootstrap

In this tutorial, JavaSampleApproach will show you how to implement a web application AngularJs Http Delete to delete data from RestAPIs remote with SpringBoot.

Related posts:
AngularJs Table display Data Objects from RestAPIs remote | SpringBoot & BootStrap
AngularJs Http Put Form Data to Remote RestAPIs | SpringBoot

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– AngularJS
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Practice

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

AngularJs Http Delete Data Object from RestAPIs with SpringBoot - project structure

Step to do:
– Create Spring Boot project
– SpringBoot RestAPIs development
– AngularJS and Frontent development
– Run & Check results

1. Create Spring Boot project

Using Spring Tool Suite to create a Spring Starter Project. Add project info, then press Next for needed dependencies:

AngularJs Http Delete Data Object from RestAPIs with SpringBoot - dependencies

After creating project successfully, open pom.xml file and check needed dependencies:


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


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

2. SpringBoot RestAPIs development
2.1 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 that includes Address model:

package com.javasampleapproach.angularjs.model;

public class Customer {
	private String id;
	private String name;
	private Integer age;
	private Address address;
	
	public Customer(){}
	
	public Customer(String id, String name, Integer age, Address address){
		this.id = id;
		this.name = name;
		this.age = age;
		this.address = address;
	}
	
	public String getId() {
		return this.id;
	}
	
	public void setId(String id) {
		this.id = id;
	}
 
	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 + "}";
	}

}
2.2 Create Web Controller to provide web view
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";
    }
}
2.3 Create RestController for GET request
package com.javasampleapproach.angularjs.controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

import javax.annotation.PostConstruct;

import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.angularjs.model.Address;
import com.javasampleapproach.angularjs.model.Customer;


@RestController
@RequestMapping("/api/customer")
public class RestAPIs {
	
	Map custStores = new HashMap();
	
	@PostConstruct
    public void initIt() throws Exception {
        custStores.put("001", new Customer("001", "Jack", 25, new Address("NANTERRE CT", "77471")));
        custStores.put("002", new Customer("002", "Mary", 37, new Address("W NORMA ST", "77009")));
        custStores.put("003", new Customer("003", "Peter", 18, new Address("S NUGENT AVE", "77571")));
        custStores.put("004", new Customer("004", "Amos", 23, new Address("E NAVAHO TRL", "77449")));
        custStores.put("005", new Customer("005", "Craig", 45, new Address("AVE N", "77587")));
    }
	 
	@GetMapping(value = "/all")
	public List getResource() {
		
		List custList = custStores.entrySet().stream()
		        .map(entry -> entry.getValue())
		        .collect(Collectors.toList());
		
		return custList;
	}
	
	@DeleteMapping(value = "/delete/{id}")
	public String deleteCustomer(@PathVariable String id) {
		
		custStores.remove(id);
		
		return "Deleted Successfully!";
	}
}
3. AngularJS and Frontent development
3.1 Create AngularJs Application
var app = angular.module('app', []);

//#######################
//JSA CONTROLLER
//#######################

app.controller('jsaController', function($scope, $http, $location) {
	$scope.listCustomers = [];
	
	// for deleted message
	$scope.error=false;
	$scope.restMessage;
	
	// $scope.getAllCustomer = 
	function getAllCustomer(){
		// get URL
		var url = $location.absUrl() + "api/customer/all";
		
		// do getting
		$http.get(url).then(function (response) {
			$scope.listCustomers = response.data;
		}, function error(response) {
			$scope.error = true;
			$scope.restMessage = "Error Status: " +  response.statusText;
		});
	}
	
	getAllCustomer();
	
	$scope.deleteItem = function(index){
		// delete URL
		var url = $location.absUrl() + "api/customer/delete/" + $scope.listCustomers[index].id;
		
		// prepare headers for deleting
		var config = {
            headers : {
            	'Accept': 'text/plain'
            }
        }
		
		// delete processing
		$http.delete(url, config).then(function (response) {
			$scope.error = false;
			console.log(response.data);
			$scope.restMessage = "Deleted an customer: " + $scope.listCustomers[index].name + "!";
			
			// remove item on angularjs model
			$scope.listCustomers.splice(index, 1);
			
		}, function error(response) {
			$scope.error = true;
			$scope.restMessage = "Error!";
		});
	}
	
});
3.2 Create an AngularJs view




	  AngularJs PUT Form Nested Object to SpringBoot Example
	  
	  %MINIFYHTML9dd2e22d09e9a93cbb161ab9565d354916%%MINIFYHTML9dd2e22d09e9a93cbb161ab9565d354917%
	  %MINIFYHTML9dd2e22d09e9a93cbb161ab9565d354918%%MINIFYHTML9dd2e22d09e9a93cbb161ab9565d354919%



Customer List:

No Name Age Street PostCode
{{ $index + 1 }} {{ cust.name | uppercase}} {{ cust.age}} {{ cust.address.street}} {{ cust.address.postcode}}
× {{restMessage}}
× {{restMessage}}
%MINIFYHTML9dd2e22d09e9a93cbb161ab9565d354920%
4. Run & Check results

Run the project with SpringBoot mode.
-> Result:

AngularJs Http Delete Data Object from RestAPIs with SpringBoot - result

AngularJs Http Delete Data Object from RestAPIs with SpringBoot - results logs

III. Sourcecode

SpringBootAngularJsHttpDelete



By grokonez | October 30, 2017.


Related Posts


Got Something To Say:

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

*