English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel Spring

Application CRUD Spring Angular

Dans cette section, nous développerons une application CRUD (creation,-Lecture-Mise à jour-Supprimer) l'application Web. Cette application contient un formulaire d'étudiant avec des fonctionnalités CRUD, telles que l'ajout, la visualisation, la suppression et la mise à jour des étudiants. Dans cette intégration, nous utilisons Spring Boot pour traiter la partie backend, et Angular pour traiter la partie frontend.

Application de travail

Une fois l'application déployée sur le serveur, un tableau des étudiants est généré dans le navigateur web. Ce formulaire aide à ajouter et à visualiser les étudiants. Après avoir cliqué sur le lien Ajouter un étudiant, la page redirige vers le tableau de création des étudiants, où nous pouvons ajouter un étudiant en remplissant les détails nécessaires et en soumettant. En utilisant le lien Visualiser les étudiants, nous pouvons obtenir les détails des étudiants existants. Ici, chaque étudiant contient également des liens de mise à jour et de suppression. Par conséquent, nous pouvons mettre à jour les détails des étudiants et les supprimer de la base de données. Après la finition, fournissez l'URL http: dans le navigateur web//localhost: 4200/。

Outils à utiliser

Utiliser n'importe quel IDE pour développer des projets Spring et Hibernate. Cela pourrait être STS/Eclipse/Netbeans. Ici, nous utilisons STS (Spring Tool Suite). pour la base de données MySQL. Développer un projet Angular avec n'importe quel IDE. Il peut s'agir de Visual Studio Code/Sublime. Ici, nous utilisons Visual Studio Code. Serveur: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Les technologies que nous utilisons

À cet endroit, nous utilisons les technologies suivantes:

SpringBoot2 Hibernate5 Angular6 MYSQL

Créer la base de données

Créons la base de données indigo 。Il n'est pas nécessaire de créer de table, car Hibernate le créera automatiquement.

Module Spring

Voyons la structure de répertoires à suivre pour Spring Boot:

Pour développer une application CRUD, suivez les étapes suivantes: -

Ajouter les dépendances au fichier pom.xml. 

<?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>

Création de la classe de configuration
Nous exécutons une configuration basée sur les annotations au lieu de XML. Par conséquent, nous créons une classe Config.java et y spécifions la configuration requise. Cependant, il existe également une classe de configuration StudentApplication.java. Cette classe est fournie automatiquement par Spring Boot. q

Config.java 

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

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

Créer une classe d'entité
Ici, nous allons créer une Entity/POJO (objet Java ordinaire) classe.

Student.java 

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

Création de l'interface DAO
Ici, nous créons l'interface DAO pour exécuter des opérations liées à la base de données.

Student_DAO.java 

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

Créer la classe d'implémentation de l'interface DAO

Student_DAO_Imp.java 

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

Créer l'interface de couche de service

Ici, nous créons une interface de couche de service qui agit comme un pont entre le DAO et les classes entités.

Student_Service.java 

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

创建服务层实现类

Student_Service_Imp.java 

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

创建控制器类

Controller.java 

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-étudiant/{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-étudiant/{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 

#　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

Module Angular

Voyons la structure de répertoires d'Angular:

Créer un projet Angular

Utilisez la commande suivante pour créer un projet Angular:

ng nouveau Angular


Ici, Angular est le nom du projet.

Installer le cadre CSS Bootstrap

Utilisez la commande suivante

npm install [email protected] --save

Maintenant, incluez les fichiers de code suivants dans style.css.

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

Installer Angular-DataTable

Utilisez la commande suivante pour installer Angular DataTable dans le projet.

npm install Angular-datatable --save

doit inclure app.module.ts Le DataTableModule dans l'array d'import du fichier 。

Générer le composant
Ouvrez le projet dans Visual Studio, puis utilisez les commandes suivantes pour générer les composants Angular:
ng gc AddStudent
ng gc StudentList

Nous utilisons également les commandes suivantes pour créer la classe de service: -

ng gs étudiant

Éditer app.module.ts Fichier Importer la route-Ici, nous importons le fichier de route (app-routing.module.ts) et le inclure dans l'array d'import. Importer ReactiveFormsModule -Ici, nous allons importer ReactiveFormsModule pour le format réactif, et spécifier-le dans l'array d'import. Importer HttpModule -Ici, nous importons pour les demandes de serveur HttpModule et spécifier-la dans l'array d'import. Enregistrer la classe de service-Ici, nous avons mentionné les classes de services de l'array de fournisseurs. 

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　'./étudiant-list/étudiant-list.component';
import　{　AddStudentComponent　}　from　'./ajouter-étudiant/ajouter-student.component';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　StudentListComponent,
　　　　AddStudentComponent,
　　],
　　imports:　[
　　　　BrowserModule,
　　　　AppRoutingModule,
　　　　FormsModule,
　　　　ReactiveFormsModule,
　　　　HttpClientModule,
　　　　DataTablesModule
　　],
　　providers:　[],
　　bootstrap:　[AppComponent]
})
export　class　AppModule　{　}

Éditer app-routing.module.ts Fichier 

import　{　NgModule　}　from　'@angular/core';
import　{　Routes,　RouterModule　}　from　'@angular/router';
import　{　StudentListComponent　}　from　'./étudiant-list/étudiant-list.component';
import　{　AddStudentComponent　}　from　'./ajouter-étudiant/ajouter-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]}

Éditer export class AppRoutingModule { } Fichier 

　　　　app.component.html-<div class="container
　　　　fluide">-<nav class="navbar navbar-expand-sm bg-sombre navbar
　　　　　　　　sombre">-<ul class="navbar
　　　　　　　　　　principal actif" role="bouton" >Voir Étudiant<-nav">
　　　　　　　　　　　　article">-<a routerLink="add-étudiant" class="nav-<a routerLink="view/a> Ajouter Étudiant<
　　　　　　　　　　</li>　
　　　　　　　　　　principal actif" role="bouton" >Voir Étudiant<-<li class="nav
　　　　　　　　　　　　article">-<a routerLink="add-étudiant" class="nav-lien" class="btn btn/a> Ajouter Étudiant<
　　　　　　　　　　</li>　　　　　　　　　　
　　　　　　　　</ul>
　　　　　　</nav>　　　
　　　　　　　　<router-outlet></router-outlet>
　　　　</div>

créer Student.ts classe

Laissez-nous utiliser la commande suivante pour créer le cours : -

ng g class Student

Maintenant, dans Student Spécifiez les champs obligatoires dans la classe.

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

L'objectif de cette classe est de mapper les champs spécifiés avec les champs des classes d'entités Spring.

Éditer student.service.ts Fichier 

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) {}
　　
　　　　+-
　　}
　　
　　　　+-student
　　}
　　
　　　　/-étudiant/${id}
　　}
　　
　　　　return this.http.get(`${this.baseUrl}/étudiant/${id});
　　}
　　
　　　　return this.http.post(`${this.baseUrl}/-étudiant/${id}
　　}
　　
}

Éditer ajouter-student.component.ts Fichier 

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'-ajouter-student
　　templateUrl: './ajouter-student.component.html'
　　styleUrls: ['./ajouter-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.enregistrer();
　　}
　　
　　enregistrer()　{
　　　　this.studentservice.creerÉtudiant(this.etudiant)
　　　　　　.subscribe(data　=>　console.log(data),　error　=>　console.log(error));
　　　　this.etudiant　=　new　Student();
　　}
　　get　StudentName(){
　　　　return　this.studentsaveform.get('nom_etudiant');
　　}
　　get　StudentEmail(){
　　　　return　this.studentsaveform.get('email_etudiant');
　　}
　　get　StudentBranch(){
　　　　return　this.studentsaveform.get('étape_du_étudiant');
　　}
　　ajouterFormulaireÉtudiantForm(){
　　　　this.submitted=false;
　　　　this.studentsaveform.reset();
　　}
}

Éditer ajouter-student.component.html Fichier 

<h3>Créer　Étudiant</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)="enregistrerÉtudiant(enregistrerÉtudiant)">　　<div　class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Name</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control"　　formControlName="nom_etudiant"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　data-placement="droite"　title="Entrer　Nom　Étudiant"　>
　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif　=　"(NomDeLÉtudiant touched)　&&　(NomDeLÉtudiant invalide)"　
　　　　　　　　　　　　　　　　style="marge-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="ErreursDuNomDeLÉtudiant.obligatoire">Nom　de　l'Étudiant　est　obligatoire</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"ErreursDuNomDeLÉtudiant.minlength">　
　　　　　　　　　　　　　　　　　　　　　　　　MinLength　Erreur　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label for="name">Student Email</label>/label>
　　　　　　　　　　　　　　<input type="text" class="form-control"　formControlName="email_etudiant"　
　　　　　　　　　　　　　　　　data-toggle="infobulle"　data-placement="droite"　title="Entrer　Email　Étudiant">
　　　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif　=　"(StudentEmail.touched)　&&　(StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="marge-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">L'adresse e-mail de l'étudiant est requise</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Format de Courriel Invalide　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Filière de l'Étudiant</label>
　　　　　　　　　　　　　　　　<select class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Sélectionnez la Filière de l'Étudiant">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Sélectionnez la Filière--</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">Soumettre</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>Étudiant Ajouté avec Succès !</h4>
　　　　　　　　　<button　(click)="addStudentForm()"　class='btn　btn-primary'>Ajouter Plus D'Étudiants</button>
　　　　　　</div>　　　　　　
　　</div>
　　<div class="col-sm-4></div>
</div>

Cliquez ici Ajouter un étudiantLorsque, la page suivante sera générée:

Maintenant, remplissez les détails nécessaires et soumettez pour ajouter un étudiant.

Éditer étudiant-list.component.ts Fichier 

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'-étudiant-list',
　　templateUrl: './étudiant-list.component.html',
　　styleUrls: ['./étudiant-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;
　　}
}

Éditer étudiant-list.component.html Fichier 

<div　class="panel　panel-default">
　　<div class="panel-heading">
　　　　　　<h1　style="text-align:　center">Étudiants</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>Données de l'étudiant supprimées</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>Nom de l'étudiant</th>
　　　　　　　　　　　　　　　　　　<th>Email de l'étudiant</th>
　　　　　　　　　　　　　　　　　　<th>Branche de l'étudiant</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">Supprimer</i></button>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Mettre à jour</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>
　　　　　　　　　　　　
　　　　　　　　　　　　<!--　Pied de modal　-->
　　　　　　　　　　　　<div　class="modal-footer"　>
　　　　　　　　　　　　　　<button　type="submit"　class="btn　btn-success"　[hidden]="isupdated">Mettre à jour</button>
　　　　　　　　　　　　　　<button　type="button"　class="btn　btn-danger"　data-dismiss="modal"　(click)="changeisUpdate()">Fermer</button>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　
　　　　　　　　</form>
　　　　　　　　　　</div>
　　　　　　　　</div>
　　　　　　</div>

Cliquez ici Voir les étudiantsLorsque, la page suivante sera générée:

Cliquez ici Mise à jour des étudiantsLorsque, le mode guide suivant apparaîtra:

Ici, nous pouvons mettre à jour les détails des étudiants existants.

Cliquez ici Supprimer (Suppression), les étudiants existants seront supprimés de la base de données. Veuillez consulter les résultats après la suppression de l'étudiant spécifique.

Téléversement de fichier Angular Spring Connexion et déconnexion Angular Spring Champ de recherche Angular Spring
Exemple d'injection de méthode de construction de dépendanceSécurité Spring