Esempio di Iniezione di Dipendenze tramite Costruttore di Dipendenze Sicurezza di Spring

Applicazione CRUD Spring Angular

In questa sezione, svilupperemo un'applicazione web CRUD (creazione-lettura-aggiornamento-eliminazione). L'applicazione include un modulo di studenti che contiene funzionalità CRUD come aggiungere, visualizzare, eliminare e aggiornare studenti. In questa integrazione, utilizziamo Spring Boot per la parte posteriore dell'applicazione e Angular per la parte frontale.

Applicazione in funzione

Una volta che abbiamo distribuito l'applicazione sul server, la tabella degli studenti verrà generata nel browser web. Questo modulo aiuta ad aggiungere e visualizzare studenti. Cliccando sul link Aggiungi studente, la pagina verrà reindirizzata alla tabella di creazione degli studenti, dove possiamo aggiungere studenti compilando i dettagli necessari e inviando. Utilizzando il link Visualizza studenti, possiamo ottenere i dettagli degli studenti esistenti. Ogni studente include anche i link di aggiornamento e eliminazione. Di conseguenza, possiamo aggiornare i dettagli degli studenti e eliminarli dal database. Dopo aver completato, fornisci l'URL http://localhost: 4200/ nel browser web.

Strumenti da utilizzare

Utilizza qualsiasi IDE per sviluppare progetti Spring e Hibernate. Può essere STS/Eclipse/Netbeans. Qui stiamo utilizzando STS (Spring Tool Suite). MySQL per il database. Utilizza qualsiasi IDE per sviluppare progetti Angular. Può essere Visual Studio Code/Sublime. Qui stiamo utilizzando Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Le tecnologie che utilizziamo

Qui stiamo utilizzando le seguenti tecnologie:

SpringBoot2 Hibernate5 Angular6 MYSQL

Creazione del database

Creiamo il database indigo Non è necessario creare tabelle, perché Hibernate le creerà automaticamente.

Modulo Spring

Vediamo la struttura di directory di Spring Boot che dobbiamo seguire:

Per sviluppare un'applicazione CRUD, esegui i seguenti passaggi: -

Aggiungi le dipendenze al file pom.xml.

Esempio

<?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>Progetto demo per 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>

Crea la classe di configurazione
Eseguiamo configurazioni basate su annotazioni, invece di XML. Pertanto, creiamo una classe Config.java e specifichiamo le configurazioni necessarie. Tuttavia, c'è anche una classe di configurazione StudentApplication.java. Questa classe è fornita automaticamente da Spring Boot.

Config.java

Esempio

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.hbm2ddl.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.hbm2ddl.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

Esempio

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);
	}
}

Creazione della classe entità
Qui creeremo una classe Entity/POJO (Plain Old Java Object).

Student.java

Esempio

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;
	}
}

Creare l'interfaccia DAO
Qui stiamo creando l'interfaccia DAO per eseguire operazioni relative al database.

Student_DAO.java

Esempio

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);
}

Creare la classe di implementazione dell'interfaccia DAO

Student_DAO_Imp.java

Esempio

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;
	}
}

Creazione dell'interfaccia di livello di servizio

Qui stiamo creando un'interfaccia di livello di servizio che funge da ponte tra DAO e classi entità.

Student_Service.java

Esempio

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);
}

creare la classe di implementazione del livello di servizio

Student_Service_Imp.java

Esempio

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);
	}
}

creare la classe controllore

Controller.java

Esempio

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);
	}
}

编辑application.properties文件
在这里，我们正在编辑 src/main/resources 文件夹中的 application.properties 文件。以下文件包含配置属性。

application.properties

Esempio

# 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

Modulo Angular

Vediamo la struttura dei directory di Angular:

Creare un progetto Angular

Usa il seguente comando per creare un progetto Angular:

ng crea un nuovo Angular

Ecco, Angular è il nome del progetto.

Installare il framework CSS Bootstrap

Usa il seguente comando

npm install [email protected] --save

Ora, includi il seguente file di codice nel file style.css.

Esempio

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

Installare Angular-DataTable

Usa il seguente comando per installare Angular DataTable nel progetto.

npm install Angular-datatable --save

Deve includere app.module.ts Il modulo DataTableModule deve essere incluso nell'array di import delle file. 。

Generare componenti
Apri il progetto in Visual Studio e usa i seguenti comandi per generare i componenti Angular:
ng gc AddStudent
ng gc StudentList

Usiamo anche i seguenti comandi per creare il tipo di servizio: -

ng gs studente

Modifica app.module.ts File Importare routing- Ecco, stiamo importando il file di routing (app-routing.module.ts) e includendolo nell'array di imports. Importare ReactiveFormsModule - Ecco, stiamo importando ReactiveFormsModule usato per le reazioni e specificato nell'array di imports. Importare HttpModule - Ecco, stiamo importando il modulo per le richieste server. HttpModule e specificarlo nell'array di import. Registrare il tipo di servizio- Ecco, abbiamo menzionato il tipo di servizio nell'array dei fornitori.

Esempio

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　{　}

Modifica app-routing.module.ts File

Esempio

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]
})
export class AppRoutingModule { }

Modifica app.component.html File

Esempio

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

创建 Student.ts 类

让我们使用以下命令创建课程: -

ng g class Student

现在，在 Student 类中指定必填字段。

Esempio

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

此类的目的是将指定的字段与Spring实体类的字段进行映射。

Modifica student.service.ts File

Esempio

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}` + 'save-student', student);
　　}
　　deleteStudent(id: number): Observable<any> {
　　　　return this.http.delete(`${this.baseUrl}/delete-student/${id}`, { responseType: 'text' });
　　}
　　getStudent(id: number): Observable<Object> {
　　　　return this.http.get(`${this.baseUrl}/student/${id}`);
　　}
　　updateStudent(id: number, value: any): Observable<Object> {
　　　　return this.http.post(`${this.baseUrl}/update-student/${id}`, value);
　　}
　　
}

Modifica add-student.component.ts File

Esempio

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();
　　}
}

Modifica add-student.component.html File

Esempio

<h3>Crea Studente</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">Nome Studente</label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　data-placement="destra" title="Inserisci Nome Studente">
　　　　　　　　　　　　　　<div class="alert alert-danger" *ngif="(StudentName.touched) && (StudentName.invalid)">　
　　　　　　　　　　　　　　　　style="margin-top: 5px;">
　　　　　　　　　　　　　　　　　　<span *ngIf="StudentName.errors.required">Il Nome dello Studente è Obbligatorio</span>
　　　　　　　　　　　　　　　　　　　　<span *ngif="StudentName.errors.minlength">　
　　　　　　　　　　　　　　　　　　　　　　　　Errore MinLunghezza　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Email Studente</label>
　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email">　
　　　　　　　　　　　　　　　　data-toggle="tooltip" data-placement="destra" title="Inserisci Email Studente">
　　　　　　　　　　　　　　　　<div class="alert alert-danger" *ngif="(StudentEmail.touched) && (StudentEmail.invalid)">　
　　　　　　　　　　　　　　　　style="margin-top: 5px;">
　　　　　　　　　　　　　　　　　　<span *ngIf="StudentEmail.errors.required">L'email dello Studente è Obbligatoria</span>
　　　　　　　　　　　　　　　　　　　　<span *ngif="StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Formato Email Non Valido　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="branch">Ramo Studente</label>
　　　　　　　　　　　　　　　　<select class="form-control" formControlName="student_branch" data-toggle="tooltip">　
　　　　　　　　　　　　　　　　　　　　　　data-placement="destra" title="Seleziona Ramo Studente">
　　　　　　　　　　　　　　　　　　　　<option value="null">--Seleziona Ramo--</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">Invia</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>Studente aggiunto con successo!</h4>
　　　　　　　　　<button (click)="addStudentForm()" class='btn btn-primary'>Aggiungi altro studente</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div class="col-sm-4"></div>
</div>

Clicca Aggiungi studenteQuando, verrà generata la seguente pagina:

Ora, inserisci i dettagli richiesti e invia per aggiungere lo studente.

Modifica student-list.component.ts File

Esempio

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;
　　}
}

Modifica student-list.component.html File

Esempio

<div class="panel panel-default">
　　<div class="panel-heading">
　　　　　　<h1 style="text-align: center">Studenti</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>Dati Studente Eliminati</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>Nome Studente</th>
　　　　　　　　　　　　　　　　　　<th>Email Studente</th>
　　　　　　　　　　　　　　　　　　<th>Branche Studente</th>
　　　　　　　　　　　　　　　　　　<th>Azione</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">Elimina</i></button></td>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'>
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Aggiorna</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 --></form>
　　　　　　　　　　　　<div class="modal-header">
　　　　　　　　　　　　　　<h4 class="modal-title" style="text-align: center">Aggiorna Studente</h4>
　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!-- Corpo Modale -->
　　　　　　　　　　　　<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">Nome Studente</label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_name" [(ngModel)]="student.student_name">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Email Studente</label>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<input type="text" class="form-control" formControlName="student_email" [(ngModel)]="student.student_email">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<label for="name">Branche Studente</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 value="MCA" [selected]="'MCA' == student.student_branch">MCA</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="M-Tech" [selected]="'M-Tech' == student.student_branch">M-Tech</option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　</select>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　</div>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　</div>　　
　　　　　　　　　　　　　　　　　　<div [hidden]="!isupdated">
　　　　　　　　　　　　　　　　　　　　　　<h4>Dettagli Studente Aggiornati!</h4>
　　　　　　　　　　　　　　　　　　</div>　　　　　　　　
　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　　　　　<!-- Footer del Modale -->
　　　　　　　　　　　　<div class="modal-footer">
　　　　　　　　　　　　　　<button type="submit" class="btn btn-success" [hidden]="isupdated">Aggiorna</button>
　　　　　　　　　　　　　　<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Chiudi</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　</form>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

Clicca Visualizza StudenteQuando, verrà generata la seguente pagina:

Clicca Aggiorna StudenteQuando, apparirà il seguente modello di guida:

Qui possiamo aggiornare i dettagli degli studenti esistenti.

Clicca Elimina (Elimina), gli studenti esistenti saranno eliminati dal database. Vediamo i risultati dopo l'eliminazione dello studente specifico.

Esempio di Iniezione di Dipendenze tramite Costruttore di Dipendenze Sicurezza di Spring

Corso di Spring

Applicazione CRUD Spring Angular

Applicazione in funzione

Strumenti da utilizzare

Le tecnologie che utilizziamo

Creazione del database

Modulo Spring

Modulo Angular

Installare il framework CSS Bootstrap

Installare Angular-DataTable