In this tutorial, we are going to present how to create Angular application with DataTable component on the frontend and Spring Boot with MongoDB on the backend side.
Let's start with presenting the architecture.
In architecture we can distinguish three main layers:
- frontend - Angular application responsible for interaction with end-user,
- backend - Spring Boot server as a module that will communicate with the database and angular application,
- database - MongoDB database for persisting entities.
The communication between components:
- Spring Boot provides REST API for the Angular application,
- Server communicates with MongoDB using Spring Data interface,
- The Angular application sends HTTP requests and receives responses using Angular built-in HTTP client.
3. Spring Boot project
Spring Boot application is responsible for providing API and interacting with MongoDB.
3.1. Project structure
In Spring Boot project structure we could distinguished the following objects:
Application - main Spring Boot class that starts web container,
EmployeesController - Spring Rest Controller provides HTTP API,
Employee - model class for Employee,
Position - enum for employees positions,
EmployeeRespository - Spring data interface used for CRUD operations on MongoDB,
EmployeeService - Spring Service that performs operations on
application.properties - Spring Boot configuration file.
3.2. Maven dependencies
To build the Spring Boot application, first, we need to create a new Maven project with the following dependencies:
spring-boot-starter-web - Spring web container,
spring-boot-starter-data-mongodb - Spring data for MongoDB.
The latest versions of used libraries could be found in our Maven Repository:
3.3. Model objects
In model layer we have
Employee class with the following fields:
Every model object that will be persisted in MongoDB needs to have an identifier annotated with
@Id. This field will uniquely identify the object.
The employee could work in the following positions:
3.4. Spring Rest Controller
EmployeesController will provide API with the following endpoints:
||Get list of all Employees
||Create new Employee
||Delete Employees by ids
EmployeeController has the following structure:
The annotations we used in this class requires explanaition:
@RestController - marks class with Spring stereotype intended for REST controllers,
@CrossOrigin - allows cross-domain requests from
@RequestMapping - connects a specific endpoint with this Controller.
EmployeeService class is responsible for managing
Employees. It mainly uses
EmployeeRepository and adds a little business logic. The service layer separates Controller from DAO:
Note that we inject
EmployeeRepository using a constructor that's why we don't have to add the
EmployeeRepository is used for interaction with MongoDB. This interface extends MongoRepository that allows to used CRUD methods like
application.properties file contains entries related to MongoDB connection:
4. Angular project
The Angular application will be responsible for interactions with the end-user.
4.1. Project structure
Angular project has the following structure:
In this structure, there is a simple division into
employees.component.ts - the main component presenting a list of employees with
employee-form.component.ts - form for creating and editing employee,
employee-delete.component.ts - modal that presents the remove confirmation message,
employees.service.ts - services that communicate with REST API provided by Spring Boot application,
validation.service.ts - services that handle common validation errors,
control.messages.ts - a component that aggregates validation errors on forms,
environment.prod.ts - contains environment-specific parameters,
4.2. Creating components and services
We are going to use Angular CLI to create a new project with all required components and services.
To install globally Angular CLI use the following command:
Next, we need to create a new Angular project:
The next step is to install all required dependencies like bootstrap or datatable:
To create components use the following:
For creating services use these commands:
angular.json file we need to add the following entries for bootstrap and datatable:
4.3. Environment configuration
angular.json file by default there is an
When we use
ng build --configuration=production command Angular CLI will replace the environment file
--configuration=production flag the regular file will be used
environments/environment.ts that contains:
baseUrl is used in
EmployeesService as a root endpoint for all HTTP requests.
4.4. Angular module
In the Angular module file we need to register all created components and services:
4.5. Employee Service
EmployeesService is responsible for communication with REST API provided by Spring Boot server:
This service is using Angular built-in HttpClient for sending HTTP requests and receiving responses.
4.6. Date Interceptor
To register this interceptor we need to add the following provider in the Angular main module:
4.7. Data model objects
In the data model layer we have two objects
Position that represents Java classes
Employee and enum
To convert enum values into labels we introduce the
4.8. Employee List Component
EmployeesComponent is the main component that presents a list of employees in the DataTable component:
The HTML file for the employee component looks as follows:
4.9. Employee Add/Edit Form Component
Adding and updating employee information is handled in dedicated modal:
The HTML file for the employee form component looks as follows:
If you are looking for more information about how to handle modals in Angular with Bootstrap please chec the following link: https://ng-bootstrap.github.io/#/components/modal/examples
4.10. Employee Remove Confirmation Component
To present employee remove confirmation modal we use
The HTML file for the employee removal confirmation looks as follows:
4.11. Validation messages
ControlMessages component will aggregate all validation errors on forms. As an input, it takes a
This is the example use of
ControlMessages for salary field:
ValidationService contains two common validator handlers for
pattern. This list could be easily extended with new validators:
5. Start application and Testing
5.1. Starting String Boot server
To run the Spring Boot server we need to use the following command:
To create a
jar file in the target folder we must simply build our Maven project using:
5.2. Starting Angular application
To start Angular application on a default port 4200 use the following:
if there is no Angular CLI on your computer, try to install it globally:
In this article, we presented Angular application with DataTable component and Spring Boot with MongoDB on the backend side.
As usual, the whole project described in this tutorial is available in our GitHub repository.