Spring Boot + Angular 13 example: CRUD application
Tags: webdev, java, spring, javascript
Published: 2021-11-20 03:18:17

In this tutorial, we will learn how to build a full stack Spring Boot + Angular 13 example with a CRUD Application. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data JPA for interacting with embedded database (H2 database). Front-end side is made with Angular 13, HttpClient, Router and Bootstrap 4.

Full article: [https://www.bezkoder.com/spring-boot-angular-13-crud/](https://www.bezkoder.com/spring-boot-angular-13-crud/)

Using other databases:
- [Spring Boot + Angular 13 +  MySQL example](https://www.bezkoder.com/spring-boot-angular-13-mysql/)
- [Spring Boot + Angular 13 + PostgreSQL example](https://www.bezkoder.com/spring-boot-angular-13-postgresql/)
- [Spring Boot + Angular 13 + MongoDB example](https://www.bezkoder.com/angular-13-spring-boot-mongodb/)

Security: [Angular 13 + Spring Boot JWT Authentication](https://www.bezkoder.com/angular-13-spring-boot-jwt-auth/)

<h2>Spring Boot and Angular 13 CRUD example</h2>
We will build a full-stack Angular 13 + Spring Boot Tutorial CRUD Application in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>We can also find Tutorials by title.</li>
</ul>

The images below shows screenshots of our System.

- Create a new Tutorial:

![spring-boot-angular-13-crud-example-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e93pb4zpj2pc2bfoqn07.png)

- Retrieve Tutorials:

![spring-boot-angular-13-crud-example-retrieve-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw56zutyn7hidf4tkpqu.png)

- Click on <strong>Edit</strong> button to update a Tutorial:

![spring-boot-angular-13-crud-example-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4r4iw92s6d3nkj0asyri.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>remove the Tutorial from Database using <strong>Delete</strong> button</li>
	<li>update the Tutorial details on Database with <strong>Update</strong> button</li>
</ul>

![spring-boot-angular-13-crud-example-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gpw39rr62bnixqp8eq9.png)

If you want to implement Form Validation, please visit:
<a href="https://bezkoder.com/angular-12-form-validation/">Angular Form Validation example (Reactive Forms)</a>

- Search Tutorials by title:

![spring-boot-angular-13-crud-example-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2aqjtqplkiqjmi2vy5wc.png)

<h2>Spring Boot + Angular 13 fullstack Architecture</h2>
Now look at the application architecture we will build:

![spring-boot-angular-13-crud-example-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0gcm3auzszxitgegrx5.png)

- Spring Boot exports REST Apis using Spring Web MVC & interacts with embedded H2 Database using Spring Data JPA.
- Angular 13 Client sends HTTP Requests and retrieve HTTP Responses using HttpClient Module, shows data on the components. We also use Angular Router for navigating to pages.

<div class="alert alert-success">
You can also find the Spring Restful Apis that works with other databases here:
- <a href="https://bezkoder.com/spring-boot-postgresql-example/">Spring JPA + PostgreSQL</a>
- <a href="https://bezkoder.com/spring-boot-jpa-crud-rest-api/">Spring JPA + MySQL</a>
- <a href="https://bezkoder.com/spring-boot-mongodb-crud/">Spring Data + MongoDB</a>
- <a href="https://www.bezkoder.com/spring-boot-sql-server/">Spring JPA + SQL Server</a>
- <a href="https://bezkoder.com/spring-boot-hibernate-oracle/">Spring JPA + Oracle</a>
- <a href="https://bezkoder.com/spring-boot-cassandra-crud/">Spring Data + Cassandra</a>
</div>

<h2>Video</h2>
This is our Angular + Spring Boot CRUD application demo and brief instruction:

{% youtube K8mV6XWA_EY %}

In the video, we use Angular 10 with MySQL database, but the logic and UI are the same as this Angular version 13 and embedded database.

<h2>Spring Boot Back-end</h2>
<h3>Overview</h3>
These are APIs that Spring Boot App will export:
<div class="table-responsive">
<table class="table table-hover  table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>
- We make CRUD operations & finder methods with Spring Data JPA's <code>JpaRepository</code>.
- The database will be H2 Database (in memory or on disk) by configuring project dependency & datasource.

<h3>Technology</h3>
<ul>
    	<li>Java 8</li>
    	<li>Spring Boot 2.2.1 (with Spring Web MVC, Spring Data JPA)</li>
    	<li>H2 Database</li>
    	<li>Maven 3.6.1</li>
</ul>

<h3>Project Structure</h3>
![spring-boot-angular-13-crud-example-server-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fcvxhmfvqnvdwu6cxec4.png)

– <code>Tutorial</code> data model class corresponds to entity and table <em>tutorials</em>.
– <code>TutorialRepository</code> is an interface that extends <a href="https://docs.spring.io/spring-data/jpa/docs/current/api/org/springframework/data/jpa/repository/JpaRepository.html">JpaRepository</a> for CRUD methods and custom finder methods. It will be autowired in <code>TutorialController</code>.
– <code>TutorialController</code> is a <a href="https://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/RestController.html">RestController</a> which has request mapping methods for RESTful requests such as: <em>getAllTutorials</em>, <em>createTutorial</em>, <em>updateTutorial</em>, <em>deleteTutorial</em>, <em>findByPublished</em>...
– Configuration for Spring Datasource, JPA & Hibernate in <strong>application.properties</strong>.
– <strong>pom.xml</strong> contains dependencies for Spring Boot and H2 Database.

<h2>Angular 13 Front-end</h2>
<h3>Overview</h3>
![spring-boot-angular-13-crud-example-client-overview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzgeizj3n1dp6phy0msw.png)

– The <code>App</code> component is a container with <code>router-outlet</code>. It has navbar that links to routes paths via <code>routerLink</code>.

– <code>TutorialsList</code> component gets and displays Tutorials.
– <code>TutorialDetails</code> component has form for editing Tutorial's details based on <code>:id</code>.
– <code>AddTutorial</code> component has form for submission new Tutorial.

– These Components call <code>TutorialService</code> methods which use Angular <code>HTTPClient</code> to make HTTP requests and receive responses.

<h3>Technology</h3>
<ul>
	<li>Angular 13</li>
	<li>Angular HttpClient</li>
	<li>Angular Router</li>
	<li>Bootstrap 4</li>
</ul>

<h3>Project Structure</h3>
![spring-boot-angular-13-crud-example-client-project-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9agk9rk1ha17zc8xq2w.png)

- <code>tutorial.model.ts</code> exports the main class model: <code>Tutorial</code>.
- There are 3 components: <code>tutorials-list</code>, <code>tutorial-details</code>, <code>add-tutorial</code>.
- <code>tutorial.service</code> has methods for sending HTTP requests to the Apis.
- <code>app-routing.module.ts</code> defines routes for each component.
- <code>app</code> component contains router view and navigation bar.
- <code>app.module.ts</code> declares Angular components and import necessary modules.

For step by step instruction and Github, please visit:
[https://www.bezkoder.com/spring-boot-angular-13-crud/](https://www.bezkoder.com/spring-boot-angular-13-crud/)

<h2>Further Reading</h2>
<ul>
	<li><a href="https://docs.spring.io/spring-data/jpa/docs/current/reference/html/">Spring Data JPA</a></li>
	<li><a href="https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html">Spring Web MVC</a></li>
	<li><a href="https://angular.io/guide/http">Angular HttpClient</a></li>
	<li><a href="https://angular.io/guide/template-syntax">Angular Template Syntax</a></li>
</ul>

Security: [Angular 13 + Spring Boot JWT Authentication](https://www.bezkoder.com/angular-13-spring-boot-jwt-auth/)

Upload: <a href="https://www.bezkoder.com/angular-13-spring-boot-file-upload/">Angular + Spring Boot: File upload/download example</a>

If you want to implement Form Validation, please visit:
<a href="https://bezkoder.com/angular-12-form-validation/">Angular Form Validation example (Reactive Forms)</a>

Or Pagination: <a href="https://bezkoder.com/pagination-spring-boot-angular-12/">Angular + Spring Boot: Pagination example</a>

Serverless with Firebase:
- <a href="https://www.bezkoder.com/angular-13-firebase-crud/">Angular CRUD with Firebase Realtime Database</a>
- <a href="https://www.bezkoder.com/angular-13-firestore-crud-angularfirestore/">Angular CRUD with Cloud Firestore</a>
- <a href="https://www.bezkoder.com/angular-13-firebase-storage/">Angular File Upload with Firebase Storage</a>