Angular SpringBoot CRUD  DynamoDB Example
Tags: angular, springboot, crud, dynamodb
Published: 2021-05-16 16:17:02

https://loizenai.com/angular-springboot-crud-dynamodb/

Angular SpringBoot CRUD  DynamoDB Example

In the tutorial, I introduce how to create an "SpringBoot Angular  DynamoDB CRUD Example" with POST/GET/PUT/DELETE requests to SpringBoot RestAPIs.

- Design overview system by Architecture Diagram that includes: Angular Client, SpringBoot RestAPIs, and  DynamoDB database.
- Implement Angular CRUD Client with Angular built-in HttpClient to communicate with server side.
- Implement SpringBoot RestAPIs that gets data from  DynamoDB using Spring Data JPA and returns back data as Json format to requested Angular Client.

You can check out the complete code of the application on this <a href="https://loizenai.com/angular-11-springboot-crud-mysql-example/#sourcecode-angular-springboot">github repository</a>.

<div class="div-loizenai-pre-related-post">
Related posts:
<hr>
<ul class="ul-loizenai-pre-related-post">
<li><a href="https://loizenai.com/spring-boot-security-jwt-authentication-example-mysql-postgresql-spring-jpa-restapis/">Spring Boot Security JWT Authentication Example</a></li>
<li><a href="https://loizenai.com/angular-spring-boot-jwt-authentication-example-angular-6-8-9-spring-security-mysql-postgresql/">Angular Spring Boot JWT Authentication Example</a></li>
<li><a href="https://loizenai.com/angular-django-crud-restapis-application-examples-fullstack-angular-10-django-mysql-postgresql/">Angular Django CRUD RestAPIs Application Examples</a></li>
<li><a href="https://loizenai.com/angular-10-nodejs-postgresql-crud-example-using-express-restapis-sequelize-tutorial/">Angular 10 Nodejs PostgreSQL CRUD Example</a></li>
</ul>
</div>



Let's start the tutorial "Angular SpringBoot CRUD  MSSQL" ->
<h2 id="overal-architecture-application-example">Overall Angular SpringBoot DynamoDB CRUD Architecture Application</h2>
[caption id="attachment_4997" align="alignnone" width="588"]<img src="https://loizenai.com/wp-content/uploads/2021/05/Overall-Architecture-Angular-CRUD-Application-with-SpringBoot-Fullstack-Example-1.png" alt="Overall-Architecture-Angular-CRUD-Application-with-SpringBoot-Fullstack-Example" width="588" height="481" class="size-full wp-image-4997" /> Overall-Architecture-Angular-CRUD-Application-with-SpringBoot-Fullstack-Example[/caption]

<ul>
<li>We build backend SpringBoot Application that provides RestAPIs for POST/GET/PUT/DELETE Customer entities and store them in  DynamoDB/PostgreSQL database.</li>
<li>We implement Angular Application that use Angular HTTPClient to interact (call/receive requests) with SpringBoot backend and display corresponding page view in browser.</li>
</ul>
<h2 id="overview-springboot-backend-architecture">Overview SpringBoot CRUD  DynamoDB Backend Architecture</h2>
[caption id="attachment_4999" align="alignnone" width="635"]<img src="https://loizenai.com/wp-content/uploads/2021/05/SpringBoot-RestAPIs-Backend-Architecture-Design-1.png" alt="SpringBoot-RestAPIs-Backend-Architecture-Design" width="635" height="473" class="size-full wp-image-4999" /> SpringBoot-RestAPIs-Backend-Architecture-Design[/caption]

<ul>
<li>For building RestAPIs in SpringBoot application, we use Spring MVC Web.</li>
<li>For interacting with database  DynamoDB/PostgreSQL, we use Spring JPA.</li>
<li>We implement RestAPI’s URL in RestAPIController.java file to process bussiness logic.</li>
<li>For manipulating database’s records, we define a JPA model for mapping field data and use a JPA CRUD repository to do CRUD operation with  DynamoDB/PostgreSQL.</li>
</ul>

- SpringBoot Project Structure for tutorial "Angular SpringBoot CRUD  MSSQL"

[caption id="attachment_1075" align="alignnone" width="549"]<img src="https://loizenai.com/wp-content/uploads/2020/06/SpringBoot-Backend-Project-Structure.png" alt="Angular SpringBoot CRUD  DynamoDB Example - SpringBoot RestAPI Backend Project Structure" width="549" height="252" class="size-full wp-image-1075" /> SpringBoot Backend Project Structure[/caption]

<ul>
<li><code>models</code> package defines <code>Customer</code> model and <code>Message</code> response class.</li>
<li><code>repository</code> package defines Spring JPA repository class <code>CustomerRepository</code> to do CRUD operation with database.</li>
<li><code>service</code> package defines a middleware class <code>CustomerServices</code> between Controller and Repository.</li>
<li><code>controller</code> package defines a RestAPI Controller <code>RestAPIController</code> to handle POST/GET/PUT/DELETE request.</li>
</ul>
<h2 id="overview-angular-crud-application-design">Overview Angular CRUD Architecture Design - Angular SpringBoot CRUD  DynamoDB RestAPI</h2>
[caption id="attachment_1079" align="alignnone" width="647"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-Application-Frontend-Design-Architecture.png" alt="Angular CRUD Application - Frontend Design Architecture" width="647" height="532" class="size-full wp-image-1079" /> Angular CRUD Application - Frontend Design Architecture[/caption]

Angular CRUD Application is designed with 3 main layers:

<ul>
<li>Service Layer is used to define Angular Common Services and HttpClient Services to interact with RestAPIs</li>
<li>Component Layer is used to define Angular Components to show views in Browser for interacting with Users</li>
<li>Router Layer is used to route URLs mapping with the corresponding Angular Components</li>
</ul>

Angular Project Structure:

[caption id="attachment_1085" align="alignnone" width="796"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-Application-Project-Structure-1.png" alt="Angular SpringBoot CRUD  DynamoDB Example - Angular CRUD Application - Project Structure" width="796" height="456" class="size-full wp-image-1085" /> Angular CRUD Application - Project Structure[/caption]

Angular CRUD Application defines 3 components, 2 services, 1 routers, and 2 data models:

- Components:

<ul>
<li><code>add-customer</code> component is used to add a new customer to system</li>
<li><code>list-customer</code> component is used to show all customers on view pages, delete a customer and update a customer</li>
<li><code>message</code> component is used to define a view to show logging message on browser</li>
</ul>

- Services:

<ul>
<li><code>customer.service.ts</code> defines POST/GET/PUT/DELETE HTTP requests to SpringBoot RestAPIs with the built-in Angular HttpClient.</li>
<li><code>message.service.ts</code> defines an array storage to log all messages when Angular CRUD App running</li>
</ul>

- Router: <code>app-routing.module.ts</code> defines how to map a corresponding Angular component with an URL.

- Models:

<ul>
<li><code>customer.ts</code> defines the main data model of our application.</li>
<li><code>message.ts</code> defines the response data model between SpringBoot and Angular application.</li>
</ul>
<h2 id="overview-goal">Goal - Angular SpringBoot CRUD  DynamoDB RestAPI</h2>
- Add new Customer: from Angular to SpringBoot and save to  DynamoDB.

[caption id="attachment_1087" align="alignnone" width="492"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-App-Add-new-customers.png" alt="Angular CRUD SpringBoot  DynamoDB App - Add new customers" width="492" height="537" class="size-full wp-image-1087" /> Angular CRUD App - Add new customers[/caption]

- List All Customers: from Angular calls SpringBoot RestAPI to get customer from  DynamoDB.

[caption id="attachment_1088" align="alignnone" width="622"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-Application-List-All-Customer.png" alt="Angular CRUD SpringBoot  DynamoDB Application - List All Customer" width="622" height="474" class="size-full wp-image-1088" /> Angular CRUD Application - List All Customer[/caption]

- Details a Customer: from Angular calls get http request from SpringBoot RestAPI to get a record in  DynamoDB database

[caption id="attachment_1089" align="alignnone" width="517"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-App-Details-a-Customer.png" alt="Angular CRUD SpringBoot  DynamoDB App - Details a Customer" width="517" height="649" class="size-full wp-image-1089" /> Angular CRUD App - Details a Customer[/caption]

- Update a Customer: from Angular calls a put http request from SpringBoot RestAPI to update a record in  DynamoDB database.

[caption id="attachment_1090" align="alignnone" width="511"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-Application-Update-a-Customer.png" alt="Angular CRUD SpringBoot  DynamoDB Application - Update a Customer" width="511" height="651" class="size-full wp-image-1090" /> Angular CRUD Application - Update a Customer[/caption]

- Delete a Customer: from Angular calls a delete http request from SpringBoot RestAPI to delete a record in  DynamoDB database.

[caption id="attachment_1091" align="alignnone" width="810"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-App-Delete-a-Customer-successfully.png" alt="Angular CRUD App - Delete a Customer successfully" width="810" height="471" class="size-full wp-image-1091" /> Angular CRUD SpringBoot  DynamoDB App - Delete a Customer successfully[/caption]

- Check database records: do a get request from Angular to SpringBoot RestAPI.

[caption id="attachment_1092" align="alignnone" width="627"]<img src="https://loizenai.com/wp-content/uploads/2020/06/Angular-CRUD-App-Check-database-records.png" alt="Angular CRUD App - Check database records" width="627" height="199" class="size-full wp-image-1092" /> Angular CRUD App - Check database records[/caption]
<h2 id="youtube-video-guide">Video Guide -  Angular SpringBoot CRUD  DynamoDB Example FullStack DEBUG</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/848fOT3Jt44" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h2 id="create-springboot-application">Create SpringBoot Application</h2>
For building SpringBoot RestAPIs CRUD Application, we need Spring Web, Spring JPA and  DynamoDB, so we add below dependencies in <code>pom.xml</code> file:

https://loizenai.com/angular-springboot-crud-dynamodb/

Angular SpringBoot CRUD  DynamoDB Example