Spring Angular Suchfeldanwendung

In diesem Abschnitt erstellen wir eine Search Field Web-Anwendung. Diese Anwendung umfasst tabellarische Daten mit Suchfeldern. In dieser Integration verwenden wir Spring für den Backend-Teil und Angular für den Frontend-Teil.

Arbeitsanwendung

Sobald die Anwendung auf dem Server bereitgestellt wurde, wird ein Formular generiert, das tabellarische Daten und einige Suchfelder enthält. Jetzt können wir in diesen Feldern nach vorhandenen Daten in der Tabelle suchen. Hier verwenden wir zwei Suchfelder-Name und E-Mail-ID. Um Daten zu suchen, müssen Sie einen vollständigen Schlüsselwort in jedem Suchfeld angeben.

Zu verwendende Werkzeuge

Verwenden Sie jede IDE, um Spring- und Hibernate-Projekte zu entwickeln. Es könnte MyEclipse sein/Eclipse/Netbeans. Hier verwenden wir Eclipse. Für die Datenbank MySQL. Verwenden Sie jede IDE, um Angular-Projekte zu entwickeln. Es könnte Visual Studio Code sein/Sublime. Hier verwenden wir Visual Studio Code. Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Die von uns verwendeten Technologien

Hier verwenden wir die folgenden Technologien:

Spring5 Hibernate5 Winkel6 MYSQL

Erstellen Sie eine Datenbank

Lassen Sie uns eine Datenbank erstellen searchfieldexample 。Da Hibernate automatisch Tabellen erstellt, ist es nicht erforderlich, Tabellen zu erstellen. Hier müssen wir Daten in der Tabelle explizit bereitstellen, damit sie auf dem Bildschirm angezeigt werden können, um Suchoperationen durchzuführen. Aber wir können auch Daten aus Dateien importieren, die über Download-Links existieren.

Spring-Modul

Lassen Sie uns schauen, welche Spring-Verzeichnisstruktur wir befolgen müssen:

Um eine Anwendung für das Suchfeld zu entwickeln, befolgen Sie die folgenden Schritte: -

Fügen Sie die Abhängigkeiten in die Datei pom.xml hinzu.

pom.xml

Beispiel

<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/maven-v4_0_0.xsd">
　　<modelVersion>4.0.0</modelVersion>
　　<groupId>com.w3codebox</groupId>
　　<artifactId>SearchFieldExample</artifactId>
　　<packaging>war</packaging>
　　<version>0.0.1-SNAPSHOT</version>
　　<name>SearchFieldExample Maven Webapp</name>
　　<url>http://maven.apache.org</url>
　　
　　
　　<properties>
		<springframework.version>5.0.6.RELEASE</<springframework.version>
		<hibernate.version>5.2.16.Final</<hibernate.version>
		<mysql.connector.version>5.1.45</<mysql.connector.version>
		<c3po.version>0.9.5.2</c3po.version>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
	</properties>
　　
　　<dependencies>
　　
　　　　<!--　Spring　-->
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring<-webmvc</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring<-tx</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<dependency>
		<groupId>org.springframework</groupId>
		<artifactId>spring<-orm</artifactId>
		<version>${springframework.version}</version>
	</dependency>
	<!--　Fügen Sie Jackson für JSON-Converter hinzu　-->
	<dependency>
		<groupId>com.fasterxml.jackson.core</groupId>
		<artifactId>jackson<-databind</artifactId>
		<version>2.9.5</version>
	</dependency>
	<!--　Hibernate　-->
	<dependency>
		<groupId>org.hibernate</groupId>
		<artifactId>hibernate<-core</artifactId>
		<version>${hibernate.version}</version>
	</dependency>
	<!--　MySQL　-->
	<dependency>
		<groupId>mysql</groupId>
		<artifactId>mysql<-connector-java</artifactId>
		<version>${mysql.connector.version}</version>
	</dependency>
	<!--　C3PO　-->
	<dependency>
		<groupId>com.mchange/groupId>
		<artifactId>c3p0</artifactId>
		<version>${c3po.version</version>
	</dependency>
	<!--　Servlet+JSP+JSTL　-->
	<dependency>
		<groupId>javax.servlet/groupId>
		<artifactId>javax.servlet-api</artifactId>
		<version>3.1.0</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet.jsp/groupId>
		<artifactId>javax.servlet.jsp-api</artifactId>
		<version>2.3.1</version>
	</dependency>
	<dependency>
		<groupId>javax.servlet/groupId>
		<artifactId>jstl/artifactId>
		<version>1.2</version>
	</dependency>
	<!--　um java auszugleichen　9　ohne jaxb　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
　	
　	<!--　　JUnit-Abhängigkeit　-->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　
　　</dependencies>
　
　　<build>
　　　　<finalName>SearchFieldExample</finalName>
　　</build>
</project>

Erstellen Sie die Konfigurationsklasse
Wir führen eine kommentarbasierende Konfiguration aus, anstatt XML. Daher erstellen wir zwei Klassen und geben in ihnen die erforderliche Konfiguration an.

DemoAppConfig.java

Beispiel

package com.w3codebox.searchfieldexample.config;
import java.beans.PropertyVetoException;
import java.util.Properties;
import javax.sql.DataSource;
import org.hibernate.SessionFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.core.env.Environment;
import org.springframework.orm.hibernate5.HibernateTransactionManager;
import org.springframework.orm.hibernate5.LocalSessionFactoryBean;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import com.mchange.v2.c3p0.ComboPooledDataSource;
@Configuration
@EnableWebMvc
@EnableTransactionManagement
@ComponentScan("com.w3codebox.searchfieldexample})
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:persistence-mysql.properties" })
@PropertySource(value = { "classpath:application.properties" })
public class DemoAppConfig implements WebMvcConfigurer {
	@Autowired
	private Environment env;
	@Bean
	public DataSource myDataSource() {
		//　erstellen Sie eine Verbindungs池
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　stellen Sie das JDBC-Treiber ein
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		//　set database connection props
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　set connection pool props
		myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize"));
		myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize"));
		myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize"));		
		myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime"));
		return myDataSource;
	}
	private Properties getHibernateProperties() {
		//　set hibernate properties
		Properties props = new Properties();
		props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
		props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql"));
		props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql"));
		props.setProperty("hibernate.hbm"}})2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		return props;				
	}
	//　Benötigen einen Hilfsmethoden　
		//　Lesen der Umgebungsproperty und Konvertieren in Integer
		private int getIntProperty(String propName) {
			String propVal = env.getProperty(propName);
			//　Jetzt in Integer konvertieren
			int intPropVal = Integer.parseInt(propVal);
			return intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			//　Erstellen der SessionFactorys
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			//　Einstellen der Eigenschaften
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			return sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			//　Einstellen des Transaktionsmanagers basierend auf der SessionFactory
			HibernateTransactionManager txManager = new HibernateTransactionManager();
			txManager.setSessionFactory(sessionFactory);
			return txManager;}
		}	
}

MySpringMvcDispatcherServletInitializer.java

Beispiel

package com.w3codebox.searchfieldexample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
	@Override
	protected Class<?>[] getRootConfigClasses() {
		//　TOdo Auto-generierter Methodenstub
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] {"/"};
	}
}

Erstellen Sie die Entitätsklasse
Hier erstellen wir eine Entity/POJO (einfaches altes Java-Objekt) Klasse.

User.java

Beispiel

package com.w3codebox.searchfieldexample.entity;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
@Entity
@Table(name="user")
public class User {
	@Id
	@GeneratedValue(strategy=GenerationType.AUTO)
	@Column(name="userId")
	private int userId;
	@Column(name="name")
	private String name;
	@Column(name="email_id" )
	public String emailId;
	@Column(name="qualification")
	public String qualification;
	public User() {}
	public User(int userId, String name, String emailId, String qualification) {
		super();
		this.userId = userId;
		this.name = name;
		this.emailId = emailId;
		this.qualification = qualification;
	}
	public int getUserId() {
		return userId;
	}
	public void setUserId(int userId) {
		this.userId = userId;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmailId() {
		return emailId;
	}
	public void setEmailId(String emailId) {
		this.emailId = emailId;
	}
	public String getQualification() {
		return qualification;
	}
	public void setQualification(String qualification) {
		this.qualification = qualification;
	}
	@Override
	public String toString() {
		return "User [userId="　+　userId　+　",　name="　+　name　+　",　emailId="　+　emailId　+　",　qualification="　+　qualification
				+　"]";
	}
}

Erstellen der DAO-Oberfläche
Hier erstellen wir die DAO-Oberfläche, um Operationen mit der Datenbank durchzuführen.

UserDAO.java

Beispiel

package com.w3codebox.searchfieldexample.DAO.interfaces;
import java.util.List;
import com.w3codebox.searchfieldexample.entity.User;
public interface UserDAO {}}
	public int SaveUser(User user);
	public List<User> getFilteredData(User user);
}

Erstellen Sie die Implementierungsklasse des DAO-Interfaces

UserDAOImpl.java

Beispiel

package com.w3codebox.searchfieldexample.DAO.implementation;
import java.util.ArrayList;
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 com.w3codebox.searchfieldexample.DAO.interfaces.UserDAO;
import com.w3codebox.searchfieldexample.entity.User;
@Repository("userDAO")
public class UserDAOImpl implements UserDAO {
	@Autowired
	SessionFactory sessionFactory;
	public int SaveUser(User user) {
		Session session = null;
		try {
			session = sessionFactory.getCurrentSession();
			int userId = (Integer) session.save(user);
			return userId;
		}
		catch(Exception exception)
		{
			System.out.println("Excption while saving data into DB ");　+　exception);
			return 0;
		}
		finally
		{
			session.flush();
		}
	}
	public List<User> getFilteredData(User user) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			ArrayList<Object> list_field = new ArrayList<Object>();
			ArrayList<Object> list_value = new ArrayList<Object>();
			if (user.getName() == null || user.getName() == "") {} else { list_field.add("name"); list_value.add(user.getName()); }
			if (user.getEmailId() == null || user.getEmailId() == "") {} else { list_field.add("emailId"); list_value.add(user.getEmailId()); }
			switch (list_field.size()) {
			case 0:
					Query<User> query0 = session.createQuery("from User");
					return query0.list();
			case　1:
				Query query1　= session.createQuery("from User where ")　+　list_field.get(0)　+" = :value0 ");
				query1.setParameter("value0", list_value.get(0));
				return query1.list();
			case　2:
				Query query2　= session.createQuery("from User where ")　+　list_field.get(0)　+" = :value0 und ",　+　list_field.get(1)　+　" = :value1);
				query2.setParameter("value0", list_value.get(0));
				query2.setParameter("value",1", list_value.get(1));
				return query2.list();
			}　
			return null;
		}
		catch(Exception exception)
		{
			System.out.println("Fehler beim Abrufen der Filterdaten :: ");　+　exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

Erstellen Sie die Service-Schicht-Schnittstelle
Hier erstellen wir eine Service-Schicht-Schnittstelle, die als Brücke zwischen DAO und Entity-Klassen dient.

UserService.java

Beispiel

package com.w3codebox.searchfieldexample.service.interfaces;
import java.util.List;
import com.w3codebox.searchfieldexample.entity.User;
public interface UserService {
	public int SaveUser(User user);
	public List<User> getFilteredData(User user);
}

Erstellen Sie die Implementierungsklasse der Serviceschicht

UserServiceImpl.java

Beispiel

package com.w3codebox.searchfieldexample.service.implementation;
import java.util.List;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.w3codebox.searchfieldexample.DAO.interfaces.UserDAO;
import com.w3codebox.searchfieldexample.entity.User;
import com.w3codebox.searchfieldexample.service.interfaces.UserService;
@Service("userService")
public class UserServiceImpl implements UserService {
	@Autowired
	UserDAO userDAO;
	@Transactional
	public int SaveUser(User user) {
		return userDAO.SaveUser(user) ;
	}
	@Transactional
	public List<User> getFilteredData(User user) {
		return userDAO.getFilteredData(user);
	}
}

Erstellen Sie eine Steuerelementklasse

UserController.java

Beispiel

package com.w3codebox.searchfieldexample.restcontroller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
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 com.w3codebox.searchfieldexample.entity.User;
import com.w3codebox.searchfieldexample.service.interfaces.UserService;
@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*"exposedHeaders = "Authorization"
public class UserController {}}
	@Autowired　
	private UserService userService;
	@PostMapping("/saveUser")
	public int saveAdminDetail(@RequestBody User user) {
		return userService.SaveUser(user);
	}
	@PostMapping("/filterData")
	public List<User> getFilteredData(@RequestBody User user) {
		return userService.getFilteredData(user);
	}
}

Erstelle Eigenschaftsdatei
Hier erstellen wir im Projekt src/main/resources Intern erstellte Eigenschaftsdatei.

persistence-mysql.properties

Beispiel

## JDBC connection properties #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/searchfieldexample?useSSL=false
jdbc.user=root
jdbc.password=
## Connection pool properties #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Hibernate properties #
<!--　hibernate.dialect=org.hibernate.dialect.MySQLDialect　-->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialect
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.searchfieldexample.entity

Angular-Modul

Lassen Sie uns die Verzeichnisstruktur von Angular betrachten:

Erstellen Sie ein neues Angular-Projekt

Erstellen Sie ein neues Angular-Projekt mit folgendem Befehl:

ng new SearchFieldExample

Hier, SearchFieldExample ist der Name des Projekts.

Installieren Sie den Bootstrap CSS-Framework

Installieren Sie Bootstrap mit folgendem Befehl im Projekt:

npm install [email protected] --save

Fügen Sie den folgenden Inhalt in die Stylesheet-Datei ein.

Beispiel

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

Generieren Sie Komponenten
Öffnen Sie das Projekt in Visual Studio und verwenden Sie folgende Befehle, um Angular-Komponenten zu generieren:
ng g c ShowData

Wir installieren Bootstrap mit folgendem Befehl: -

ng gs services/User

Bearbeiten Sie die Datei app.module.ts Importieren Sie HttpModule -Hier importieren wir für Server-Anfragen HttpModule und wird in der imports-Array angegeben. Registrieren der Service-Klasse-Hier wird die Service-Klasse in der Provider-Array erwähnt. ReactiveFormsModule importieren -Hier werden wir die ReactiveFormsModule Wird für die Reaktionsform verwendet und wird in der imports-Array angegeben.

Beispiel

import　{　BrowserModule　}　from　'@angular/platform-browser';
import　{　NgModule　}　from　'@angular/core';
//　import ReactiveFormsModule for reactive form
import　{　ReactiveFormsModule　}　from　'@angular/forms';
//　import Http module
import　{　HttpModule　}　from　'@angular/http';
import　{　AppComponent　}　from　'./app.component';
import　{　ShowDataComponent　}　from　'./anzeigen-data/anzeigen-data.component';
import　{　UserService　}　from　'./services/user.service';
@NgModule({
　　declarations:　[
　　　　AppComponent,
　　　　ShowDataComponent
　　],
　　imports:　[
　　　　BrowserModule,
　　　　ReactiveFormsModule,
　　　　HttpModule
　　],
　　providers: [UserService],
　　bootstrap: [AppComponent]
})
export class AppModule { }

bearbeiten app.component.html Datei

Beispiel

<app-anzeigen-data></app-anzeigen-data>

创建 User.ts 类

让我们使用以下命令创建一个类: -

ng g类class/User

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

Beispiel

export class User {
　　　　name: string;
　　　　emailId: string;
　　　　qualification: string;
}

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

bearbeiten user.service.ts Datei

Beispiel

import { Injectable } from ''@angular/core';
import { User } from ''../classes/user';
import { Http } from ''@angular/http';
@Injectable({
　　providedIn: 'root'
})
export class UserService {
　　private baseUrl = "http://localhost:8080/SearchFieldExample/api/";
　　constructor(private http: Http) { }
　　getData(user: User)
　　{
　　　　let url = this.baseUrl　+　"filterData";
　　　　return this.http.post(url, user);
　　}
}

bearbeiten anzeigen-data.component.ts Datei

Beispiel

import { Component, OnInit } from ''@angular/core';
import { User } from ''../classes/user';
import { UserService } from ''../services/user.service';
import { FormGroup, FormControl } from ''@angular/forms';
@Component({
　　selector: ''app-anzeigen-data',
　　templateUrl: ''./anzeigen-data.component.html',}}
　　styleUrls:　['./anzeigen-data.component.css'
})
export　class　ShowDataComponent　implements　OnInit　{
　　private　user　=　new　User();
　　private　data;
　　constructor(private　userService　:　UserService)　{　}
　　ngOnInit()　{
　　　　this.getData(this.user);
　　}
　　form　=　new　FormGroup({
　　　　name　:　new　FormControl(),
　　　　email　:　new　FormControl()
　　});
　　getData(user)
　　{
　　　　　　this.userService.getData(user).subscribe(
　　　　　　　　response　=>　{
　　　　　　　　　　this.data　=　response.json();
　　　　　　　　},
　　　　　　　　error　=>　{
　　　　　　　　　　console.log("Fehler beim Abrufen der Benutzerdetails");
　　　　　　　　}
　　　　　　);
　　}
　　searchForm(searchInfo)
　　{
　　　　　　　　this.user.name　=　this.Name.value;
　　　　　　　　this.user.emailId　=　this.Email.value;
　　　　　　　　this.getData(this.user);
　　}
　　get　Name()
　　{
　　　　return　this.form.get('name');
　　}
　　get　Email()
　　{
　　　　return　this.form.get('email');
　　}
}

bearbeiten anzeigen-data.component.html Datei

Beispiel

<br><br>
<div class="row">
　　　　<div class="col-md-offset-4　col-md-4">　
　　　　　　　　<form　[formGroup]="form"　#searchInfo　(ngSubmit)="searchForm(searchInfo)"><table>
　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="name"　placeholder="Eingabe　Name"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td>　<input　type="text"　formControlName="email"　placeholder="Eingabe　E-Mail-ID"　class="form-control">　</td>
　　　　　　　　　　　　　　　　　　　　<td><button class="btn btn-primary hidden-xs">Suchen</button></td>
　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</table>
　　　　　　　　</form>
　　　　</div>
</div>
<br><br>
<div class="row">
　　　　<div class="col-md-offset-4　col-md-4">
　　　　　　　　<table class="table table-gebordernte Tabelle-gepunktete Tabelle-responsive">
　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　<th>Name</th>
　　　　　　　　　　　　　　　　<th>E-Mail</th>
　　　　　　　　　　　　　　　　<th>Qualifikation</th>
　　　　　　　　　　　　</tr>
　　　　　　　　　　　　<ng-container　*ngFor="let item of data">　
　　　　　　　　　　　　　　　　<tr>
　　　　　　　　　　　　　　　　　　　　<td>{{item.name}}</td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.emailId}}</td>
　　　　　　　　　　　　　　　　　　　　<td>{{item.qualification}}</td>
　　　　　　　　　　　　　　　　</tr>
　　　　　　　　　　　　</ng-container>
　　　　　　　　</table>
　　　　</div>
</div>

Nach dem Abschluss geben Sie die URL http: im Web ein //localhost: 4200/Browser. Es erscheint die folgende Webseite:

Jetzt können wir Daten durch Angabe eines bestimmten Schlüsselworts im Suchfeld suchen.

Suchen Sie nach Namen:

Suchen Sie nach E-Mail-ID:

Spring-Angular-Anmeldung und Abmeldung

Spring-Lehrbuch

Spring Angular Suchfeldanwendung

Arbeitsanwendung

Zu verwendende Werkzeuge

Die von uns verwendeten Technologien

Erstellen Sie eine Datenbank

Spring-Modul

Angular-Modul

Installieren Sie den Bootstrap CSS-Framework