In this tutorials will teach you spring boot with angular how to do the Restful API to add the records in to the mysql database .Spring Boot with Angular use to create a full-stack web application.how to insert the records into mysql database step by step via spring boot layer architecture process using industrial standards.
Create the Package entity inside the package create the class Employee
package com.example.Registation.Entity;
import javax.persistence.*;
@Entity
@Table(name="employee")
public class Employee
{
@Id
@Column(name="employee_id", length = 45)
@GeneratedValue(strategy = GenerationType.AUTO)
private int employeeid;
@Column(name="employee_name", length = 255)
private String employeename;
@Column(name="address", length = 255)
private String address;
@Column(name="mobile", length = 20)
private int mobile;
public Employee(int employeeid, String employeename, String address, int mobile) {
this.employeeid = employeeid;
this.employeename = employeename;
this.address = address;
this.mobile = mobile;
}
public Employee() {
}
public int getEmployeeid() {
return employeeid;
}
public void setEmployeeid(int employeeid) {
this.employeeid = employeeid;
}
public String getEmployeename() {
return employeename;
}
public void setEmployeename(String employeename) {
this.employeename = employeename;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public int getMobile() {
return mobile;
}
public void setMobile(int mobile) {
this.mobile = mobile;
}
@Override
public String toString() {
return "Employee{" +
"employeeid=" + employeeid +
", employeename='" + employeename + '\'' +
", address='" + address + '\'' +
", mobile=" + mobile +
'}';
}
}
Create the Package Dt0 inside the package create the class EmployeeDTO
package com.example.Registation.Dto;
import javax.persistence.Column;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
public class EmployeeDTO {
private int employeeid;
private String employeename;
private String address;
private int mobile;
public EmployeeDTO(int employeeid, String employeename, String address, int mobile) {
this.employeeid = employeeid;
this.employeename = employeename;
this.address = address;
this.mobile = mobile;
}
public EmployeeDTO() {
}
public int getEmployeeid() {
return employeeid;
}
public void setEmployeeid(int employeeid) {
this.employeeid = employeeid;
}
public String getEmployeename() {
return employeename;
}
public void setEmployeename(String employeename) {
this.employeename = employeename;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public int getMobile() {
return mobile;
}
public void setMobile(int mobile) {
this.mobile = mobile;
}
@Override
public String toString() {
return "EmployeeDTO{" +
"employeeid=" + employeeid +
", employeename='" + employeename + '\'' +
", address='" + address + '\'' +
", mobile=" + mobile +
'}';
}
}
Create the Package Controller inside the package create the class EmployeeController
package com.example.Registation.EmployeeController;
import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@CrossOrigin
@RequestMapping("api/v1/employee")
public class EmployeeController {
@Autowired
private EmployeeService employeeService;
@PostMapping(path = "/save")
public String saveEmployee(@RequestBody EmployeeDTO employeeDTO)
{
String id = employeeService.addEmployee(employeeDTO);
return id;
}
}
Create the Package Service inside the package create the one class EmployeeServiceIMPL and create one interface EmployeeService
package com.example.Registation.Service;
import com.example.Registation.Dto.EmployeeDTO;
public interface EmployeeService {
String addEmployee(EmployeeDTO employeeDTO);
}
package com.example.Registation.Service.impl;
import com.example.Registation.Dto.EmployeeDTO;
import com.example.Registation.Entity.Employee;
import com.example.Registation.Repo.EmployeeRepo;
import com.example.Registation.Service.EmployeeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class EmployeeIMPL implements EmployeeService
{
@Autowired
private EmployeeRepo employeeRepo;
@Override
public String addEmployee(EmployeeDTO employeeDTO)
{
Employee employee = new Employee(
employeeDTO.getEmployeeid(),
employeeDTO.getEmployeename(),
employeeDTO.getAddress(),
employeeDTO.getMobile()
);
employeeRepo.save(employee);
return employee.getEmployeename();
}
}
Create the Package EmployeeRepo inside the package create one interface EmployeeRepo
package com.example.Registation.Repo;
import com.example.Registation.Entity.Employee;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.config.EnableJpaRepositories;
import org.springframework.stereotype.Repository;
@EnableJpaRepositories
@Repository
public interface EmployeeRepo extends JpaRepository<Employee,Integer> {
}
First you have to run the Back-end Spring Boot Application
Study RestFul Api How to Works for beginners here.
After That Create a new component in Angular
ng g c employee in the employee.component.html paste the following code.
employeetable.component.html
<div class="container mt-4" >
<div class="card">
<h1>Employee Registation</h1>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" [(ngModel)]="name" [ngModelOptions]="{standalone: true}" class="form-control" id="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label>address</label>
<input type="text" [(ngModel)]="address" [ngModelOptions]="{standalone: true}" class="form-control" id="address" placeholder="Enter address">
</div>
<div class="form-group">
<label>Mobile</label>
<input type="text" [(ngModel)]="mobile" [ngModelOptions]="{standalone: true}" class="form-control" id="mobile" placeholder="Enter Mobile">
</div>
<button type="submit" class="btn btn-primary mt-4" (click)="save()" >Submit</button>
</form>
</div>
<div> employee.component.ts
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent
{
name: string ="";
address: string ="";
mobile: Number =0;
constructor(private http: HttpClient)
{}
register()
{
let bodyData = {
"employeename" : this.name,
"address" : this.address,
"mobile" : this.mobile
};
this.http.post("http://localhost:8085/api/v1/employee/save",bodyData).subscribe((resultData: any)=>
{
console.log(resultData);
alert("Employee Registered Successfully")
this.name = '';
this.address = '';
this.mobile = 0;
});
}
save()
{
this.register();
}
}
Have you ever wanted to talk to a friendly, smart robot that helps you with…
DeepSeek AI is becoming a friendly and powerful new tool in the world of artificial…
Do you want to become an expert in Spring Boot CRUD operations? This comprehensive tutorial…
Modern websites must have a navigation bar that is clear and responsive. FlexBox CSS is…
Introduction In this section, we will guide you step by step in the development of an image upload registration system in Java using MySQL and JDBC. In the application, users register…
The Touchable Shop POS (Point of Sale) system is a sophisticated software solution developed using…