Dependency Constructor Method Injection Example Spring Security

Spring Angular CRUD application

In this section, we will develop a CRUD (Create, Read, Update, Delete) application-Read-Update-Delete) web application. The application contains a student form with CRUD functionality, such as adding, viewing, deleting, and updating students. In this integration, we use Spring Boot for the backend part, and Angular for the frontend part.

Working application

Once we deploy the application to the server, the student table will be generated in the web browser. This form helps in adding and viewing students. After clicking the Add Student link, the page will be redirected to the Create Student form, where we can add a student by filling in the required details and submitting. Using the View Student link, we can obtain the details of existing students. Here, each student also includes Update and Delete links. Therefore, we can update student details as well as delete them from the database. After completion, provide the URL http: in the web browser//localhost: 4200/.

Tools to be used

Use any IDE to develop Spring and Hibernate projects. It could be STS/Eclipse/Netbeans. Here, we are using STS (Spring Tools Suite). MySQL for the database. Use any IDE to develop Angular projects. It could be Visual Studio Code/Sublime. Here, we are using Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

The technologies we use

Here, we are using the following technologies:

SpringBoot2 Hibernate5 Angular6 MYSQL

Create database

Let's create the database indigo No table needs to be created because Hibernate will create it automatically.

Spring module

Let's see the directory structure we need to follow for Spring Boot:

To develop a CRUD application, please follow these steps: -

Add dependencies to the pom.xml file.

Example

<?xml version="1.0"　encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.4.RELEASE</version>
		<relativePath/>　<!--　lookup parent from repository　-->
	</parent>
	<groupId>com.main</groupId>
	<artifactId>Student</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>Student</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
		　　　　<groupId>org.springframework.boot</groupId>
		　　　　<artifactId>spring-boot-devtools</artifactId>
　　　　　　　　　　　　<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

Create configuration class
We perform configuration based on annotations instead of XML. Therefore, we create a class Config.java and specify the required configuration within it. However, there is also a configuration class StudentApplication.java. This class is automatically provided by Spring Boot.

Config.java

Example

package config;
import java.util.Properties;
import javax.sql.DataSource;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.orm.jpa.HibernateJpaAutoConfiguration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.ComponentScans;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.datasource.DriverManagerDataSource;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.view.InternalResourceViewResolver;
@Configuration
@EnableTransactionManagement
@EnableAutoConfiguration(exclude = { HibernateJpaAutoConfiguration.class })
@ComponentScans(value = { @ComponentScan("boot.entry"),
	　　　　　　@ComponentScan("Model"),
	　　　　　　@ComponentScan("Controller"),
	　　　　　　@ComponentScan("DAO"),
	　　　　　　@ComponentScan("Miscellaneous"),
	　　　　　　@ComponentScan("Service")}
public class Config {
	　@Value("${db.driver}")
	　　　　private String DB_DRIVER;
	　　　　@Value("${db.password}")
	　　　　private String DB_PASSWORD;
	　　　　@Value("${db.url}")
	　　　　private String DB_URL;
	　　　　@Value("${db.username}")
	　　　　private String DB_USERNAME;
	　　　　@Value("${hibernate.dialect}")
	　　　　private String HIBERNATE_DIALECT;
	　　　　@Value("${hibernate.show_sql}")
	　　　　private String HIBERNATE_SHOW_SQL;
	　　　　@Value("${hibernate.hbm}"2ddl.auto")
	　　　　private String HIBERNATE_HBM2DDL_AUTO;
	　　　　@Value("${entitymanager.packagesToScan}")
	　　　　private String ENTITYMANAGER_PACKAGES_TO_SCAN;
	　　　　@Bean
	　　　　public LocalSessionFactoryBean sessionFactory() {
	　　　　　　　　LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
	　　　　　　　　sessionFactory.setDataSource(dataSource());
	　　　　　　　　sessionFactory.setPackagesToScan(ENTITYMANAGER_PACKAGES_TO_SCAN);
	　　　　　　　　Properties hibernateProperties = new Properties();
	　　　　　　　　hibernateProperties.put("hibernate.dialect", HIBERNATE_DIALECT);
	　　　　　　　　hibernateProperties.put("hibernate.show_sql", HIBERNATE_SHOW_SQL);
	　　　　　　　　hibernateProperties.put("hibernate.hbm",2ddl.auto, HIBERNATE_HBM2DDL_AUTO);
	　　　　　　　　sessionFactory.setHibernateProperties(hibernateProperties);
	　　　　　　　　return sessionFactory;
	　　　　}
	　　　　@Bean
	　　　　public DataSource dataSource() {
	　　　　　　　　DriverManagerDataSource dataSource = new DriverManagerDataSource();
	　　　　　　　　dataSource.setDriverClassName(DB_DRIVER);
	　　　　　　　　dataSource.setUrl(DB_URL);
	　　　　　　　　dataSource.setUsername(DB_USERNAME);
	　　　　　　　　dataSource.setPassword(DB_PASSWORD);
	　　　　　　　　return dataSource;
	　　　　}
	　　　　@Bean
	　　　　public HibernateTransactionManager transactionManager() {
	　　　　　　　　HibernateTransactionManager txManager = new HibernateTransactionManager();
	　　　　　　　　txManager.setSessionFactory(sessionFactory().getObject());
	　　　　　　　　return txManager;
	　　　　}
	　　　　
	　　　　@Bean
	　　　　public InternalResourceViewResolver jspViewResolver() {
	　　　　　　　　InternalResourceViewResolver resolver = new InternalResourceViewResolver();
	　　　　　　　　resolver.setPrefix("/views/");
	　　　　　　　　resolver.setSuffix(".jsp");
	　　　　　　　　return resolver;
	　　　　}　
	　　　
	　　　
	　　　
	}

StudentApplication.java

Example

package config;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class StudentApplication {
	public static void main(String[] args) {
		SpringApplication.run(StudentApplication.class, args);
	}
}

Create entity class
Here, we will create an Entity/POJO (Plain Old Java Object) class.

Student.java

Example

package Model;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="student")
public class Student {
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	private int student_id;
	private String student_name;
	private String student_email;
	private String student_branch;
	public int getStudent_id() {
		return student_id;
	}
	public void setStudent_id(int student_id) {
		this.student_id = student_id;
	}
	public String getStudent_name() {
		return student_name;
	}
	public void setStudent_name(String student_name) {
		this.student_name = student_name;
	}
	public String getStudent_email() {
		return student_email;
	}
	public void setStudent_email(String student_email) {
		this.student_email = student_email;
	}
	public String getStudent_branch() {
		return student_branch;
	}
	public void setStudent_branch(String student_branch) {
		this.student_branch = student_branch;
	}
}

Create DAO interface
Here, we are creating a DAO interface to perform operations related to the database.

Student_DAO.java

Example

package DAO;
import java.util.List;
import Model.Student;
public interface Student_DAO {
	public boolean saveStudent(Student student);
	public List<Student> getStudents();
	public boolean deleteStudent(Student student);
	public List<Student> getStudentByID(Student student);
	public boolean updateStudent(Student student);
}

Create DAO interface implementation class

Student_DAO_Imp.java

Example

package DAO;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import Model.Student;
@Repository
public class Student_DAO_Imp implements Student_DAO {
	@Autowired
	private SessionFactory sessionFactory;
	@Override
	public boolean saveStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().save(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
	@Override
	public List<Student> getStudents() {
		Session currentSession = sessionFactory.getCurrentSession();
		Query<Student> query = currentSession.createQuery("from Student", Student.class);
		List<Student> list = query.getResultList();
		return list;
	}
	@Override
	public boolean deleteStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().delete(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
	@Override
	public List<Student> getStudentByID(Student student) {
		Session currentSession = sessionFactory.getCurrentSession();
		Query<Student> query = currentSession.createQuery("from Student where student_id=:student_id", Student.class);
		query.setParameter("student_id", student.getStudent_id());
		List<Student> list = query.getResultList();
		return list;
	}
	@Override
	public boolean updateStudent(Student student) {
		boolean status = false;
		try {
			sessionFactory.getCurrentSession().update(student);
			status = true;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return status;
	}
}

Create service layer interface

Here, we are creating a service layer interface that acts as a bridge between the DAO and entity classes.

Student_Service.java

Example

package Service;
import java.util.List;
import Model.Student;
public interface Student_Service {
	public boolean saveStudent(Student student);
	public List<Student> getStudents();
	public boolean deleteStudent(Student student);
	public List<Student> getStudentByID(Student student);
	public boolean updateStudent(Student student);
}

Create the service layer implementation class

Student_Service_Imp.java

Example

package Service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import DAO.Student_DAO;
import Model.Student;
@Service
@Transactional
public class Student_Service_Imp implements Student_Service {
　
	@Autowired
	private Student_DAO studentdao;
	@Override
	public boolean saveStudent(Student student) {
		return studentdao.saveStudent(student);
	}
	@Override
	public List<Student> getStudents() {
		return studentdao.getStudents();
	}
	@Override
	public boolean deleteStudent(Student student) {
		return studentdao.deleteStudent(student);
	}
	@Override
	public List<Student> getStudentByID(Student student) {
		return studentdao.getStudentByID(student);
	}
	@Override
	public boolean updateStudent(Student student) {
		return studentDao.updateStudent(student);
	}
}

Create the controller class

Controller.java

Example

package Controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import Model.Student;
import Service.Student_Service;
@RestController
@CrossOrigin(origins="http://localhost:4200")
@RequestMapping(value="/api")
public class Controller {
	@Autowired
	private Student_Service studentService;
	@PostMapping("save")-student"
	public boolean saveStudent(@RequestBody Student student) {
		　return studentservice.saveStudent(student);
	}
	@GetMapping("students"-list"
	public List<Student> allstudents() {
		　return studentservice.getStudents();
	}
	@DeleteMapping("delete"-student/{student_id}"
	public boolean deleteStudent(@PathVariable("student_id") int student_id, Student student) {
		student.setStudent_id(student_id);
		return studentservice.deleteStudent(student);
	}
	@GetMapping("student"/{student_id}"
	public List<Student> allstudentByID(@PathVariable("student_id") int student_id, Student student) {
		　student.setStudent_id(student_id);
		　return studentservice.getStudentByID(student);
	}
	@PostMapping("update"-student/{student_id}"
	public boolean updateStudent(@RequestBody Student student, @PathVariable("student_id") int student_id) {
		student.setStudent_id(student_id);
		return studentservice.updateStudent(student);
	}
}

Edit the application.properties file
Here, we are editing src/main/resources the folder application.properties The following file contains configuration properties.

application.properties

Example

# Database
db.driver=  com.mysql.jdbc.Driver
db.url=  jdbc:mysql://localhost:3306/indigo
db.username=root
db.password=
# Hibernate
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.hbm2ddl.auto=update
entitymanager.packagesToScan=Model

Angular module

Let's take a look at the Angular directory structure:

Create an Angular project

Use the following command to create an Angular project:

ng new Angular

Here, Angular is the name of the project.

Install Bootstrap CSS framework

Use the following command

npm install [email protected] --save

Now, include the following code file in style.css.

Example

@import "~bootstrap/dist/css/bootstrap.css";

Install Angular-DataTable

Use the following command to install Angular data table in the project.

npm install Angular-datatable --save

must include app.module.ts The DataTableModule in the import array of the file .

Generate component
Open the project in Visual Studio and then use the following command to generate Angular components:
ng gc AddStudent
ng gc StudentList

We also use the following command to create service classes: -

ng gs student

Edit app.module.ts File Import route-Here, we are importing the route file (app-routing.module.ts), and include it in the imports array. Import ReactiveFormsModule -Here, we will import ReactiveFormsModule for reactive forms and specify it in the imports array. Import HttpModule -Here, we import the HttpModule for server requests HttpModule , and specify it in the import array. Register service class-Here, we mentioned the service class in the provider array.

Example

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from '.',/app-routing.module';
import { AppComponent } from '.'/app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { DataTablesModule } from 'angular-datatables';
import { StudentListComponent } from './student-list/student-list.component';
import { AddStudentComponent } from './add-student/add-student.component';
@NgModule({
　　declarations: [
　　　　AppComponent,
　　　　StudentListComponent,
　　　　AddStudentComponent,
　　],
　　imports: [
　　　　BrowserModule,
　　　　AppRoutingModule,
　　　　FormsModule,
　　　　ReactiveFormsModule,
　　　　HttpClientModule,
　　　　DataTablesModule
　　],
　　providers: [],
　　bootstrap: [AppComponent]
})
export class AppModule { }

Edit app-routing.module.ts File

Example

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentListComponent } from './student-list/student-list.component';
import { AddStudentComponent } from './add-student/add-student.component';
const routes: Routes = [
　　{ path: '', redirectTo: 'view-student', pathMatch: 'full' },
　　{ path: 'view-student', component: StudentListComponent },
　　{ path: 'add-student', component: AddStudentComponent },
]);
@NgModule({
　　imports: [RouterModule.forRoot(routes)],
　　exports:　[RouterModule]
})
exports: [RouterModule]

Edit export class AppRoutingModule { } File

Example

　　　　app.component.html-<div class="container
　　　　fluid">-<nav class="navbar navbar-expand-sm bg-dark navbar
　　　　　　　　dark">-<ul class="navbar
　　　　　　　　　　primary active" role="button">View Student<-nav">
　　　　　　　　　　　　item">-<a routerLink="add-student" class="nav-<a routerLink="view/a> Add Student <
　　　　　　　　　　</li>　
　　　　　　　　　　primary active" role="button">View Student<-<li class="nav
　　　　　　　　　　　　item">-<a routerLink="add-student" class="nav-link" class="btn btn/a> Add Student <
　　　　　　　　　　</li>　　　　　　　　　　
　　　　　　　　</ul>
　　　　　　</nav>　　　
　　　　　　　　<router-outlet></router-outlet>
　　　　</div>

Create Student.ts class

Let's use the following command to create a course: -

ng g class Student

Now, in Student Specify required fields in the class.

Example

export class Student {
　　　　student_id: number;
　　　　student_name: String;
　　　　student_email: String;
　　　　student_branch: String;
}

The purpose of this class is to map the specified fields with the fields of Spring entity classes.

Edit student.service.ts File

Example

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
　　providedIn: 'root'
})
export class StudentService {
　　private baseUrl = 'http://localhost:8080/api/';
　　constructor(private http: HttpClient) {}
　　getStudentList(): Observable<any> {
　　　　return this.http.get(`${this.baseUrl}`+'students-list');
　　}
　　createStudent(student: object): Observable<object> {
　　　　return this.http.post(`${this.baseUrl}`+-
　　}
　　
　　　　/-student/${id}
　　}
　　
　　　　return this.http.get(`${this.baseUrl}`,/student/${id}
　　}
　　
　　　　return this.http.post(`${this.baseUrl}`,/-student/${id}
　　}
　　
}

Edit add-student.component.ts File

Example

import　{　Component,　OnInit　}　from　'@angular/core';
import　{　StudentService　}　from　'../student.service';
import　{FormControl,FormGroup,Validators}　from　'@angular/forms';
import　{　Student　}　from　'../student';
@Component({
　　selector: 'app'-add-student
　　templateUrl: './add-student.component.html'
　　styleUrls: ['./add-student.component.css
})
export class AddStudentComponent implements OnInit {
　　constructor(private studentservice: StudentService) { }
　　student: Student = new Student();
　　submitted = false;
　　ngOnInit() {
　　　　this.submitted=false;
　　}
　　studentsaveform = new FormGroup({
　　　　student_name: new FormControl('', [Validators.required, Validators.minLength(5);
　　　　student_email: new FormControl('', [Validators.required, Validators.email]),
　　　　student_branch: new FormControl()
　　});
　　saveStudent(saveStudent){
　　　　this.student = new Student();　　　
　　　　this.student.student_name = this.StudentName.value;
　　　　this.student.student_email = this.StudentEmail.value;
　　　　this.student.student_branch = this.StudentBranch.value;
　　　　this.submitted = true;
　　　　this.save();
　　}
　　
　　save() {
　　　　this.studentservice.createStudent(this.student)
　　　　　　.subscribe(data => console.log(data), error => console.log(error));
　　　　this.student = new Student();
　　}
　　get StudentName(){
　　　　return this.studentsaveform.get('student_name');
　　}
　　get StudentEmail(){
　　　　return this.studentsaveform.get('student_email');
　　}
　　get StudentBranch(){
　　　　return this.studentsaveform.get('student_branch');
　　}
　　addStudentForm(){
　　　　this.submitted=false;
　　　　this.studentsaveform.reset();
　　}
}

Edit add-student.component.html File

Example

<h3>Create Student</h3>
<div　class="row">
　　<div class="col-sm-4></div>
　　<div class="col-sm-4" >
　　　　<div [hidden]="submitted" style="width:　400px;">
　　　　　　<form [formGroup]="studentsaveform" #savestudent (ngSubmit)="saveStudent(saveStudent)">    <div class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Name</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　data-placement="right" title="Enter Student Name" >
　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif = "(StudentName.touched) && (StudentName.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentName.errors.required">Student Name is Required</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif = "StudentName.errors.minlength"　
　　　　　　　　　　　　　　　　　　　　　　　　MinLength Error　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Email</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control formControlName="student_email"　
　　　　　　　　　　　　　　　　data-toggle="tooltip" data-placement="right" title="Enter Student Email">
　　　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif　=　"(StudentEmail.touched)　&&　(StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">Student　Email　is　Required</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Invalid　Email　Format　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Student　Branch</label>
　　　　　　　　　　　　　　　　<select class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Select　Student　Branch">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Select　Branch--</option>
　　　　　　　　　　　　　　　　　　<option value="B-Tech">B-Tech/option>
　　　　　　　　　　　　　　　　　　<option　value="BCA">BCA</option>
　　　　　　　　　　　　　　　　　　<option　value="MCA">MCA</option>
　　　　　　　　　　　　　　　　　　<option　value="M">-Tech">M-Tech/option>
　　　　　　　　　　　　　　　　</select>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<button　type="submit"　class="btn　btn-success">Submit</button>
　　　　　　</form>
　　</div>
　　</div>
　　<div class="col-sm-4></div>
</div>
<div　class="row">
　　<div class="col-sm-4></div>
　　<div class="col-sm-4">
　　　　　　<div　[hidden]="!submitted">
　　　　　　　　　<h4>Student　Added　SuccessFully!</h4>
　　　　　　　　　<button　(click)="addStudentForm()"　class='btn　btn-primary'>Add　More　Student</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div class="col-sm-4></div>
</div>

Click Add StudentWhen, the following page will be generated:

Now, fill in the required details and submit to add a student.

Edit student-list.component.ts File

Example

import　{　Component,　OnInit　}　from　'@angular/core';
import　{　StudentService　}　from　'../student.service';
import　{　Student　}　from　'../student';
import　{　Observable,Subject　}　from　"rxjs";
import　{FormControl,FormGroup,Validators}　from　'@angular/forms';
@Component({
　　selector: 'app'-student-list',
　　templateUrl: './student-list.component.html',
　　styleUrls: ['./student-list.component.css
})
export class StudentListComponent implements OnInit {
　constructor(private studentservice: StudentService) { }
　　studentsArray: any[] = [];
　　dtOptions: DataTables.Settings = {};
　　dtTrigger: Subject<any> = new Subject();
　　students: Observable<Student[]>;
　　student: Student = new Student();
　　deleteMessage: false;
　　studentlist: any;
　　isupdated = false;　　　　
　
　　ngOnInit() {
　　　　this.isupdated=false;
　　　　this.dtOptions = {
　　　　　　pageLength:　6,
　　　　　　stateSave: true,
　　　　　　lengthMenu: [[6,　16,　20,　-1], [[6,　16,　20, "All"]],
　　　　　　processing: true};　　　
　　　　this.studentservice.getStudentList().subscribe(data =>{
　　　　this.students = data;
　　　　this.dtTrigger.next();
　　　　})
　　}
　　
　　deleteStudent(id: number) {
　　　　this.studentservice.deleteStudent(id)
　　　　　　.subscribe(
　　　　　　　　data => {
　　　　　　　　　　console.log(data);
　　　　　　　　　　this.deleteMessage = true;
　　　　　　　　　　this.studentservice.getStudentList().subscribe(data =>{
　　　　　　　　　　　　this.students = data
　　　　　　　　　　　　})
　　　　　　　　},
　　　　　　　　error => console.log(error));
　　}
　　updateStudent(id: number){
　　　　this.studentservice.getStudent(id)
　　　　　　.subscribe(
　　　　　　　　data => {
　　　　　　　　　　this.studentlist = data　　　　　　　　　　　
　　　　　　　　},
　　　　　　　　error => console.log(error));
　　}
　　studentupdateform: new FormGroup({
　　　　student_id: new FormControl(),
　　　　student_name: new FormControl(),
　　　　student_email: new FormControl(),
　　　　student_branch: new FormControl()
　　});
　　updateStu(updstu){
　　　　this.student = new Student();　
　　　this.student.student_id = this.StudentId.value;
　　　this.student.student_name = this.StudentName.value;
　　　this.student.student_email = this.StudentEmail.value;
　　　this.student.student_branch = this.StudentBranch.value;
　　　console.log(this.StudentBranch.value);
　　　
　　　this.studentservice.updateStudent(this.student.student_id,this.student).subscribe(
　　　　data => {　　　　　
　　　　　　this.isupdated=true;
　　　　　　this.studentservice.getStudentList().subscribe(data =>{
　　　　　　　　this.students = data
　　　　　　　　})
　　　　},
　　　　error => console.log(error));
　　}
　　get StudentName(){
　　　　return this.studentupdateform.get('student_name');
　　}
　　get StudentEmail(){
　　　　return this.studentupdateform.get('student_email');
　　}
　　get StudentBranch(){
　　　　return this.studentupdateform.get('student_branch');
　　}
　　get StudentId(){
　　　　return this.studentupdateform.get('student_id');
　　}
　　changeisUpdate(){
　　　　this.isupdated=false;
　　}
}

Edit student-list.component.html File

Example

<div class="panel panel-default">
　　<div class="panel-heading">
　　　　　　<h1　style="text-align: center">Students</h1><br>
　　　　　　<div class="row" [hidden]="!deleteMessage">
　　　　　　　　　　　
　　　　　　　　　　　　　　　　<div class="col-sm-4></div>
　　　　　　　　　　　　　　　　<div class="col-sm-4">
　　　　　　　　　　　　　　　　　　　　　　　　<div class="alert alert-info alert-dismissible">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<button type="button" class="close" data-dismiss="alert">×</button>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<strong>Student Data Deleted</strong>
　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　<div class="col-sm-4></div>
　　　　　　　　</div>　　　　　　　　　　　
　　　　</div>
　　
　　<div class="panel-body>
　　　　　　<table　　class="table table-hover table-sm" datatable [dtOptions]="dtOptions"
　　　　　　[dtTrigger]="dtTrigger"　　>
　　　　　　　　　　<thead class="thead-light">
　　　　　　　　　　　　　　<tr
　　　　　　　　　　　　　　　　　　<th>Student Name</th>
　　　　　　　　　　　　　　　　　　<th>Student Email</th>
　　　　　　　　　　　　　　　　　　<th>Student Branch</th>
　　　　　　　　　　　　　　　　　　<th>Action</th>
　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　</tr>
　　　　　　　　　　</thead>
　　　　　　　　　　<tbody>
　　　　　　　　　　　　　　　<tr　*ngFor="let student of students ">
　　　　　　　　　　　　　　　　　　<td>{{student.student_name}}</td>
　　　　　　　　　　　　　　　　　　<td>{{student.student_email}}</td>
　　　　　　　　　　　　　　　　　　<td>{{student.student_branch}}</td>
　　　　　　　　　　　　　　　　　　<td><button (click)="deleteStudent(student.student_id)" class='btn btn-primary'><i class="fa fa-futboll-0">Delete</i></button>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Update</button>　　</td>
　　　　　　　　　　　　　　　　</tr>　
　　　　　　　　　　</tbody><br>
　　　　　　</table>
　　</div>
</div>　
<div class="modal" id="myModal">
　　　　　　　　<div　class="modal-dialog">
　　　　　　　　　　<div　class="modal-content">
　　　　　　　　　　　　　　　　<form [formGroup]="studentupdateform" #updstu (ngSubmit)="updateStu(updstu)"><!--　Modal Header　-->
　　　　　　　　　　　　<div　class="modal-header">
　　　　　　　　　　　　　　<h4　class="modal-title" style="text-align: center">Update Student</button>/h4>
　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!--　Modal body　-->
　　　　　　　　　　　　<div　class="modal-body"　*ngFor="let student of studentlist " >
　　　　　　　　　　　　　　　　<div [hidden]="isupdated">
　　　　　　　　　　　　　　　　　　　　<input type="hidden" class="form-control" formControlName="student_id" [(ngModel)]="student.student_id">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Name</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Email</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Student Branch</label>/label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<select class="form-control" formControlName="student_branch" required>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="B-Tech" [selected]="'B-Tech' == student.student_branch">B-Tech/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="MCA" [selected]="'MCA' == student.student_branch">MCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option　value="M">-Tech"　[selected]="'M-Tech' == student.student_branch">M-Tech/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</select>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　</div>　　
　　　　　　　　　　　　　　　　　　<div　[hidden]="!isupdated">
　　　　　　　　　　　　　　　　　　　　　　<h4>Student Detail Updated!</h4>
　　　　　　　　　　　　　　　　　　</div>　　　　　　　　
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!--　Modal footer　-->
　　　　　　　　　　　　<div　class="modal-footer">
　　　　　　　　　　　　　　<button　type="submit"　class="btn　btn-success"　[hidden]="isupdated">Update</button>
　　　　　　　　　　　　　　<button　type="button"　class="btn　btn-danger"　data-dismiss="modal"　(click)="changeisUpdate()">Close</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　</form>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

Click View StudentsWhen, the following page will be generated:

Click Update StudentWhen, the following wizard mode will appear:

Here, we can update the details of an existing student.

Click Delete (Deleted), existing students will be deleted from the database. Let's view the result after deleting a specific student.

Dependency Constructor Method Injection Example Spring Security

Spring Tutorial

Spring Angular CRUD application

Working application

Tools to be used

The technologies we use

Create database

Spring module

Angular module

Install Bootstrap CSS framework

Install Angular-DataTable