Spring Boot Tutorial with basic & advanced concepts, in-depth details using hands-on examples. Spring Boot Introduction + Hello World Example An introduction to Spring boot, basic-concepts with example, explaining what spring boot brings to the party, with help of examples. This tutorial explains the basic concepts of Spring Boot and how to run a simple application using the Spring Boot framework. Also end of this tutorial, popular tutorials on Spring Boot has been collated and given for the readers reference.
In this tutorial, we will learn how to develop a CRUD (Create, Read, Update, Delete) Web Application using Angular 7 as a front-end and Spring boot 2 restful API as a backend.
If you are looking for Angular 6 with spring boot 2 integration example then check out Spring Boot + Angular 6 CRUD Example article.
You can download the source code of this tutorial from my GitHub repository at the end of this tutorial.
What you'll learn
- You will develop your first FULL STACK Application with Angular 7 and Spring Boot
- You will learn the basics of building AWESOME frontend Applications with Angular 7
- You will be introduced to building great RESTful APIs with Spring Boot
- You will learn to solve the challenges of connecting an Angular frontend to a RESTful API
- You will learn the basics of Angular - Angular Modules, Components, Data Binding and Routing
- You will learn to connect REST API to JPA/Hibernate with Spring Boot
- You will learn to use a wide variety of Spring Boot Starter Projects - Spring Boot Web, and Spring Boot Data JPA
What we will build?
Basically, we will create two projects:
-
springboot2-jpa-crud-example: This project is used to develop CRUD RESTFul APIs for a simple Employee Management System using Spring Boot 2, JPA and MySQL as a database.
-
angular7-springboot-client: This project is used to develop single page application using Angular 7 as front-end technology. This Angular 7 application consumes CRUD Restful APIs developed and exposed by a springboot2-jpa-crud-example project.
Let me list out tools and technologies used to develop these two applications.
Tools and technologies used
Server-side technologies
- Spring Boot - 2.0.4.RELEASE
- JDK - 1.8 or later
- Spring Framework - 5.0.8 RELEASE
- Hibernate - 5.2.17.Final
- Spring Data JPA - 2+
Front end technologies
- Angular 7.2
- Bootstrap 4
- npm- 6.4.1
- JQuery
Tools
- Maven - 3.2+
- IDE - Eclipse or Spring Tool Suite (STS)
- Visual Studio 2017
- Angular CLI
Let's first we will build a CRUD RESTFul APIs for a Simple Employee Management System using Spring Boot 2 JPA and MySQL. Later we will consume these Rest APIs using Angular 7 client application. Following are five REST APIs (Controller handler methods) are created for Employee resource.
1. Creating and Importing a Project
There are many ways to create a Spring Boot application. The simplest way is to use Spring Initializrat http://start.spring.io/, which is an online Spring Boot application generator.
Look at the above diagram, we have specified the following details:
- Generate: Maven Project
- Java Version: 1.8 (Default)
- Spring Boot:2.0.4
- Group: net.guides.springboot2
- Artifact: springboot2-jpa-crud-example
- Name: springboot2-jpa-crud-example
- Description: Rest API for a Simple Employee Management Application
- Package Name : net.guides.springboot2.springboot2jpacrudexample
- Packaging: jar (This is the default value)
- Dependencies: Web, JPA, MySQL, DevTools
Once, all the details are entered, click on Generate Project button will generate a spring boot project and downloads it. Next, Unzip the downloaded zip file and import it into your favorite IDE.
2. Packaging Structure
Following is the packing structure of our Employee Management System -
3. The pom.xml File
4. Configuring MySQL Database
Configure application.properties to connect to your MySQL database. Let's open an application.properties file and add the following database configuration to it. Also, note that we have added MySQL dependency to pom.xml so spring boot will auto-configure all database related beans and configurations internally.
Change the above configuration such as JDBC URL, username and password as per your environment.
5. Create JPA Entity - Employee.java
6. Create a Spring Data Repository - EmployeeRepository.java
7. Create Spring Rest Controller - EmployeeController.java
8. Exception(Error) Handling for RESTful Services
Spring Boot provides a good default implementation for exception handling for RESTful Services. Let’s quickly look at the default Exception Handling features provided by Spring Boot.
Resource Not Present
Heres what happens when you fire a request to not resource found: http://localhost:8080/some-dummy-url
That's a cool error response. It contains all the details that are typically needed.
What happens when we throw an Exception?
Let’s see what Spring Boot does when an exception is thrown from a Resource. we can specify the Response Status for a specific exception along with the definition of the Exception with ‘@ResponseStatus’ annotation.
Lets create a ResourceNotFoundException.java class.
Customizing Error Response Structure
Default error response provided by Spring Boot contains all the details that are typically needed.
However, you might want to create a framework independent response structure for your organization. In that case, you can define a specific error response structure.
To use ErrorDetails to return the error response, let’s create a GlobalExceptionHandler class annotated with @ControllerAdvice annotation. This class handles exception specific and global exception in a single place.9. Running Application
The main() method uses Spring Boot’s SpringApplication.run() method to launch an application.
Or you can start spring boot application via command line using mvn spring-boot:run command.This completes the development of Spring boot CRUD Rest APIs. Now we will develop client application using Angular 7.
Angular 7 Client Application Development
Let's develop a step by step CRUD (Create, Read, Update, Delete) Web Application using Angular 7 which consume above CRUD rest APIs.
Good to know Angular 7 release notes and new features at Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more.
Good to know Angular 7 release notes and new features at Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more.
I assume that you have installed Node.js. Now, we need to check the Node.js and NPM versions. Open the terminal or Node command line then type this commands.
That's the Node.js and NPM version that we are using. Now, you can go to the main steps.
That's the Node.js and NPM version that we are using. Now, you can go to the main steps.
Install or Update Angular 7 CLI and Create Application
To install or update Angular 7 CLI, type this command in the Terminal or Node Command Line.Now, you have the latest version of Angular CLI.
Next, create a new Angular 7 Web Application using this Angular CLI command.
The Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
If you are new to Angular CLI then check out official documentation at https://cli.angular.io.
Create Angular 7 client application using Angular CLI
Let's use below command to generate an Angular 7 Client application. We name this project as 'angular7-springboot-client'.
Components, Services, and Modules
![Spring boot tutorial intellij Spring boot tutorial intellij](/uploads/1/2/3/9/123900314/447506496.jpg)
Let's list out what are components, service, and modules we are going to create in this application. We will use Angular CLI to generate components, services because Angular CLI follows best practices and saves much of time.
- Components
- create-employee
- employee-list
- employee-details
- Services
- employee.service.ts - Service for Http Client methods
- Modules
- FormsModule
- HttpClientModule
- AppRoutingModule.
- Employee Class (Typescript class)
- employee.ts: class Employee (id, firstName, lastName, emailId)
In this next step, we will generate these components, classes, and services using Angular CLI.
Create Service & Components
Let's auto-generate service and components using Angular CLI. Change your project directory to angular7-springboot-clientsrcapp and run the following commands:
Here is complete command and output for your reference:
We will use Bootstrap 4 for styling our application so let's integrate bootstrap 4 with Angular 7.
Integrate Bootstrap with Angular
Use NPM to download Bootstrap & JQuery. Bootstrap and jQuery will be installed into the node_modules folder.
Configure installed Bootstrap & JQuery in an angular.json file:
Let's discuss each of the above generate components and service files and we will customize it as per our requirement.
package.json
This file Configures npm package dependencies that are available to all projects in the workspace.Note that angular version 7.2.0 in dependencies section in below file.
Create Employee class - employee.ts
Before defining the EmployeeListComponent, let’s define an Employee class for working with employees. create a new file employee.ts inside src/app folder and add the following code to it -
EmployeeService - employee-service.ts
The EmployeeService will be used to get the data from backend by calling spring boot APIs. Update the employee.service.ts file inside src/app directory with the following code to it -
EmployeeListComponent - employee-list.component.ts
Let's update the EmployeeListComponent component which will be used to display a list of employee, create a new employee, and delete an employee.
Update/remove the content of employee-list.component.ts inside src/app directory and add the following code to it -
Create a template for EmployeeListComponent - employee-list.component.html
Update employee-list.component.html file with the following code to it -
CreateEmployeeComponent - create-employee.component.ts
CreateEmployeeComponent is used to create and handle a new employee form data. Add the following code to it -
Create a template for EmployeeCreateComponent create-employee.component.html
EmployeeDetailsComponent- employee-details.component.ts
Create a template for EmployeeDetailsComponent employee-details.component.html
AppRoutingModule - app-routing.module.ts
AppComponent - app/app.component.ts
Defines the logic for the app's root component, named AppComponent. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your app.
app/app.component.html
Defines the HTML template associated with the root AppComponent.
app/app.module.ts
Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.
Configure a proxy for your API calls with Angular CLI
Here I will show you how to set up your Angular development server and how to configure it to properly communicate with your backend (REST) API.
In a real-world setup where you have your Angular CLI development server running on http://localhost:4200 and your backend API (in whichever technology you like) running on some other port or even host, let’s say http://localhost:8080 (this could also be http://dev-123.mycompany.com or something else ofc).
When you then want to execute an HTTP call within the app, you’d have to write something like this, indicating the full path of your backend API.
Obviously, the base URL (i.e. the host) can be configured in a central place somewhere, such as via the environment.ts file (that gets generated by the Angular CLI). But there’s another issue as well. Unless you’re creating some publicly consumable API and you inject the required CORS headers, you’ll most probably get some CORS exceptions.
What is the solution? Here is a solution with different options.
Configuring your Angular CLI dev-server proxy
- add the proper CORS headers - This is definitely a must in a case when you design a generic API where you don’t even know the consumer.
- use a proxy - A proxy is a piece of software which is in between your JavaScript/Angular app doing the Ajax request and your backend API. This is the choice to go in a classic app.
In this example, I have used proxy to configure our Angular CLI dev-server proxy.
To set it up, we need to create a file proxy.conf.json at the root of our Angular CLI project. The content should look as follows:
proxy.conf.json
All requests made to /api/v1/employees from within our application will be forwarded to http://localhost:8080//api/v1/employees
As we already started Spring boot application. Now let's run this Angular 7 application.Running Angular 7 Application
Let's run the above developed Angular App with a command: npm startNote that when you execute npm start, ng serve will be invoked which is a command to the CLI to fire up its internal development server.
Output
Open browser for URL - http://URLalhost:4200/:Employee List Page
Add Employee Page
Delete Employee
Note that update employee functionality is not implemented so you can take as exercise and try to implement yourself (Tip: Add an update button to the employee list page and based on employee id you can implement update functionality. Note that Rest API is already created for update employee functionality).The source code of this article available on my GitHub repository at https://github.com/RameshMF/angular7-springboot-crud-tutorial
Related Java EE Tutorials
<< Back to Spring Boot Tutorial