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

Tutoriales de Spring

Aplicación CRUD de Spring Angular

En esta sección, desarrollaremos una aplicación CRUD (Crear, Leer, Actualizar, Eliminar)-Leer-Actualizar-Eliminar) la aplicación web. Esta aplicación contiene un formulario de estudiantes con funciones CRUD, como agregar, ver, eliminar y actualizar estudiantes. En esta integración, utilizamos Spring Boot para manejar la parte de backend, y Angular para manejar la parte de frontend.

Aplicación de trabajo

Una vez que desplegamos la aplicación en el servidor, se generará una tabla de estudiantes en el navegador web. Este formulario ayuda a agregar y ver estudiantes. Después de hacer clic en el enlace Agregar estudiante, la página se redirigirá al formulario de creación de estudiantes, donde podemos agregar estudiantes llenando los detalles necesarios y enviando el formulario. Utilizando el enlace Ver estudiantes, podemos obtener los detalles del estudiante existente. Aquí, cada estudiante también incluye enlaces de actualización y eliminación. Por lo tanto, podemos actualizar los detalles del estudiante y también eliminarlos de la base de datos. Después de completar, proporcione la URL http: en el navegador web//localhost: 4200/。

Herramientas a utilizar

Utilice cualquier IDE para desarrollar proyectos de Spring y Hibernate. Puede ser STS/Eclipse/Netbeans. Aquí, estamos utilizando STS (Spring Tool Suite). para la base de datos MySQL.} Usar cualquier IDE para desarrollar proyectos Angular. Puede ser Visual Studio Code/Sublime. Aquí, estamos utilizando Visual Studio Code。 Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。

Tecnologías que usamos

Aquí, estamos utilizando las siguientes tecnologías:

SpringBoot2 Hibernate5 Angular6 MYSQL

Crear base de datos

Vamos a crear la base de datos indigo 。No es necesario crear tablas, ya que Hibernate lo creará automáticamente。

Módulo Spring

Veamos la estructura de directorios que debemos seguir en Spring Boot:

Para desarrollar una aplicación CRUD, siga los siguientes pasos: -

Añadir dependencias al archivo 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>

创建配置类
我们执行基于注释的配置，而不是XML。因此，我们创建一个类Config.java并在其中指定所需的配置。但是，还有一个配置类StudentApplication.java。此类由Spring Boot自动提供。

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

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

Crear clase de entidad
Aquí, crearemos una Entity/POJO (objeto Java ordinario antiguo) clase.

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

Creación de la interfaz DAO
Aquí, estamos creando la interfaz DAO para realizar operaciones relacionadas con la base de datos.

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

Crear clase de implementación de interfaz de 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;
	}
}

Crear interfaz de capa de servicio

Aquí, estamos creando una interfaz de capa de servicio, que actúa como puente entre el DAO y la clase de entidad.

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-estudiante/{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-estudiante/{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

Módulos de Angular

Vamos a ver la estructura de directorios de Angular:

Crear un proyecto Angular

Use las siguientes órdenes para crear un proyecto Angular:

ng nuevo Angular


Aquí, Angular es el nombre del proyecto.

Instalar el framework CSS Bootstrap

Use las siguientes órdenes

npm install [email protected] --save

Ahora, incluya el siguiente código en el archivo style.css.

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

Instalar Angular-DataTable

Use las siguientes órdenes para instalar Angular Data Table en el proyecto.

npm install Angular-datatable --save

debe incluirse app.module.ts El módulo DataTableModule debe incluirse en el array de imports de 。

Generar componentes
Abra el proyecto en Visual Studio y use las siguientes órdenes para generar componentes de Angular:
ng gc AddStudent
ng gc StudentList

También usamos las siguientes órdenes para crear el tipo de servicio: -

ng gs estudiantes

editar app.module.ts archivo Importar rutas-Aquí, estamos importando el archivo de rutas (app-routing.module.ts) y agregarlo al array de imports. Importar ReactiveFormsModule -Aquí, vamos a importar ReactiveFormsModule para la reactividad y especificarlo en el array de imports. Importar HttpModule -Aquí, importamos el módulo HttpModule para las solicitudes de servidor HttpModule y especificarlo en el array de importación. Registrar el tipo de servicio-Aquí, mencionamos el tipo de servicio en el array de proveedores. 

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

editar app-routing.module.ts archivo 

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

editar export class AppRoutingModule { } archivo 

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

创建 Student.ts 类

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

ng g class Student

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

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

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

editar student.service.ts archivo 

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

editar add-student.component.ts archivo 

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

editar add-student.component.html archivo 

<h3>Crear Estudiante</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="derecha" title="Ingrese Nombre del Estudiante" >
　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif="(StudentName.touched) && (StudentName.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentName.errors.required">Nombre del Estudiante es Obligatorio</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="derecha" title="Ingrese Correo Electrónico del Estudiante">
　　　　　　　　　　　　　　　　<div class="alert alert-danger"　*ngif　=　"(StudentEmail.touched)　&&　(StudentEmail.invalid)"　
　　　　　　　　　　　　　　　　style="margin-top:　5px;">
　　　　　　　　　　　　　　　　　　<span　*ngIf="StudentEmail.errors.required">El correo electrónico del estudiante es obligatorio</span>
　　　　　　　　　　　　　　　　　　　　<span　*ngif　=　"StudentEmail.errors.email">　
　　　　　　　　　　　　　　　　　　　　　　　　Formato de correo electrónico no válido　
　　　　　　　　　　　　　　　　　　　　</span>　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　</div>
　　
　　　　　　　　　　<div class="form-group">
　　　　　　　　　　　　　　<label　for="branch">Rama del estudiante</label>
　　　　　　　　　　　　　　　　<select class="form-control"　formControlName="student_branch"　data-toggle="tooltip"　
　　　　　　　　　　　　　　　　　　　　　　data-placement="right"　title="Seleccione la rama del estudiante">
　　　　　　　　　　　　　　　　　　　　<option　value="null">--Seleccione una rama--</option>
　　　　　　　　　　　　　　　　　　<option value="B-Tech">B-Tecnología/option>
　　　　　　　　　　　　　　　　　　<option　value="BCA">BCA</option>
　　　　　　　　　　　　　　　　　　<option　value="MCA">MCA</option>
　　　　　　　　　　　　　　　　　　

Hacer clic Agregar estudianteCuando, se generará la siguiente página:

Ahora, rellena los detalles necesarios y luego envía para agregar al estudiante.

editar estudiante-list.component.ts archivo 

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'-estudiante-list',
　　templateUrl: './estudiante-list.component.html',
　　styleUrls: ['./estudiante-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('estudiante_nombre');
　　}
　　get　StudentEmail(){
　　　　return　this.studentupdateform.get('estudiante_email');
　　}
　　get　StudentBranch(){
　　　　return　this.studentupdateform.get('estudiante_rama');
　　}
　　get　StudentId(){
　　　　return　this.studentupdateform.get('estudiante_id');
　　}
　　changeisUpdate(){
　　　　this.isupdated=false;
　　}
}

editar estudiante-list.component.html archivo 

<div　class="panel　panel-default">
　　<div class="panel-heading">
　　　　　　<h1　style="texto-align:　center">Estudiantes</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>Datos del estudiante eliminados</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>Nombre del estudiante</th>
　　　　　　　　　　　　　　　　　　<th>Correo electrónico del estudiante</th>
　　　　　　　　　　　　　　　　　　<th>rama de estudiante</th>
　　　　　　　　　　　　　　　　　　<th>Acción</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">Eliminar</i></button>　
　　　　　　　　　　　　　　　　　　　　<button (click)="updateStudent(student.student_id)" class='btn btn-info'
　　　　　　　　　　　　　　　　　　　　data-toggle="modal" data-target="#myModal">Actualizar</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-Tecnología/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="BCA" [selected]="'BCA' == student.student_branch">BCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　<option value="MCA" [selected]="'MCA' == student.student_branch">MCA</option>/option>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Hacer clic Ver estudiantesCuando, se generará la siguiente página:

Hacer clic Actualizar estudianteCuando, se mostrará el siguiente modo de guía:

Aquí, podemos actualizar los detalles del estudiante existente.

Hacer clic Eliminar (Eliminar), los estudiantes existentes serán eliminados de la base de datos. Vamos a ver los resultados después de eliminar al estudiante específico.

Subida de archivos Angular de Spring Inicio de sesión y desconexión Angular de Spring Campo de búsqueda Angular de Spring
Ejemplo de inyección de métodos constructores de dependenciasSeguridad de Spring