Spring Boot AngularJS Example

In this post, we are going to see how to create Spring boot AngularJS example.

We will use Spring boot 1.5.3 Release version, it comes with hibernate 5. We will create a Spring boot AngularJS application which will have AngularJS as user interface. It will provide user interface from which you can add, update or delete customer database.We will use controller, services and DAO classes to achieve these functionalities. We will connect to MySQL database using SessionFactory class of hibernate.

Github Source code:

Spring Boot AngularJS example:

Here are steps to create a Spring boot AngularJS example.

💻 Awesome Tech Resources:
  • Looking for ⚒️ tech jobs? Go to our job portal.
  • Looking for tech events? Go to tech events 🗓️ Calendar.️

Project structure:

Spring Boot AngularJS Project Strucutre

Tools used for creating below project:

  1. Spring Boot 1.5.3.RELEASE
  2. Spring 4.3.8.RELEASE
  3. Tomcat Embed 8
  4. Maven 3
  5. Java 8
  6. Eclipse
  7. Hibernate 5.3.5
  8. MySQL 5.7.18

Step 1:  Create a dynamic web project using maven in eclipse named “SpringBootAngularJSExample”.
Step 2: Change “pom.xml” as below:

The spring-boot-starter-parent provides you all maven defaults required for any spring project.
Since we are developing a web application, we also need to add spring-boot-starter-web dependency and also we need to include pring-boot-starter-data-jpa to run this application with hibernate.You need to also put mysql-connector-java for MySql JDBC driver. If you are using any other database, you need to use different database connector.
Let’s do hibernate configuration first.

Hibernate Configuration

Step 3: Create a file named “HibernateConfiguration.java” in package .org.arpit.java2blog

Above class is annotated with @Configuration and @Bean annotation. These annotations are used to define bean in Spring.

@Configuration is analogous to <beans> tag in Spring XML configuration and @Bean is analogous to <bean> tag.

@Value annotation is used to inject variables from properties files. In this case, it will read from application.properties which we are going to create in next step.

Step 4: Create a file named “application.properties” in package /src/main/resources

Model class

Step 5: Create a file named “Customer.java” in package .org.arpit.java2blog.model

@Entity is used for making a persistent pojo class.For this java class,you will have corresponding table in database. @Column is used to map annotated attribute to corresponding column in table.

Create Customer table:

Create customer table in database with following DDL.

customerName varchar(255) DEFAULT NULL,
email varchar(255) DEFAULT NULL,

Controller class

Step 6: Create a file named “CustomerController.java” in package .org.arpit.java2blog.controller

Service Layer

Step 7: Create a file named “CustomerService.java” in package .org.arpit.java2blog.service

DAO layer

Step 8: Create a interface named “CustomerDao.java” in package .org.arpit.java2blog.dao

Step 9: Create a file named “CustomerDaoImpl.java” in package .org.arpit.java2blog.dao

AngularJS View

Step 10: Create a file named “customerDataAngularJS.html” in package .src.main.webapp

Explanation :

    • We have injected $http as we have done in ajax example through controller constructor.
    • We have defined various methods depending on operations such as editCustomer, deleteCustomer, submitCustomer
    • When you click on submit button on form, it actually calls POST or PUT depending on operation. If you click on edit and submit data then it will be put operation as it will be update on existing resource. If you directly submit data, then it will be POST operation to create new resource,
    • Every time you submit data, it calls refereshCustomerData() to refresh Customer table below.
    • When you call $http, you need to pass method type and URL, it will call it according, You can either put absolute URL or relative URL with respect to context root of web application.

Spring boot main file

Step 11: Create a file named “SpringBootAngularJSApplication.java” in package .org.arpit.java2blog

We have just added @SpringBootApplication and it does all the work.
Let’s understand more about this annotation.
@SpringBootApplication is an annotation that adds all of the following:

@Configuration makes the class as a source of bean definitions for the application context.
@EnableAutoConfiguration enables Spring boot to add beans presents in classpath setting and various property setting.
Normally you would add @EnableWebMvc for a Spring MVC application, but Spring Boot adds it automatically when it sees spring-webmvc on the classpath.
This flags the application as a web application and activates key behaviors such as setting up a DispatcherServlet.
@ComponentScan tells Spring to look for other components, configurations, and services in the default package, allowing it to find the controllers.
If specific packages are not defined, scanning will occur from the package of the class that declares this annotation.

Run the application

Step 12: It ‘s time to do maven build.

Right click on project -> Run as -> Maven build

Step 13: Provide goals as clean install spring-boot:run (given below) and click on run

Spring Boot AngularJS Maven Build


Step 14: Once you are done with Maven build, let’s go to the browser and put following URL.

You will see below screen.
Spring Boot AngularJS blank
Add follow details to Customer Name : as “John” and email as “[email protected]” and click on submit.
Spring Boot AngularJS Add Customer
Now I am adding more customers using above method.
Spring Boot AngularJS Add Customer list
Let’s click on edit link corresponding to customer Id :3 whose name is David.
I am changing email address from “[email protected]” to “[email protected]
Spring Boot AngularJS Edit Customer
When you click on submit, you will see below screen.
Spring Boot AngularJS Edit Customer 2
As you can see David’s email address got changed to “[email protected]”.
Let’s click on delete link corresponding to customer id :2 whose name is Martin and you will see below screen.
Spring Boot AngularJS Delete Customer
As you can see, Martin got deleted from the list.
That’s all about Spring Boot AngularJS example.
You may also like:


You may also like:

Related Posts

  • 11 January

    Spring boot JDBC example

    In this post, we will see Spring boot JDBC example. As we already know Spring boot does lot of auto configurations which help us to avoid a lot of boilerplate code. In the case of JDBC, spring boot provides auto-configuration such as creating DataSource and JDBCTemplate objects automatically based on application.properties. So you just need […]

  • 02 January

    Spring boot devtools tutorial

    In this post, we’ll be looking up what does spring has to offer for developer experience. Overview Using IDEs like Eclipse, Spring Tool Suite, Intellij Idea a typical development setup includes an application code base that gets deployed on a Web Application Server like Wildfly or Tomcat or even Glassfish. The speed of development is […]

  • 26 December

    Spring boot H2 Database example

    In this post, we are going to see how to create Spring boot application integrating with H2 database. What is H2 database? H2 is open source database. It is very fast and smaller in size. It is in-memory database and keeps all data in memory. If you start and stop the application, all the data […]

  • 22 December

    Spring Boot CrudRepository

    In this post, we’ll be looking up how to create and use Spring Boot CrudRepository. SpringBoot CrudRepository provides sophisticated CRUD functionality for the type of entity you want to be managed.This interface acts primarily as a marker interface to capture the types to work with and to help you to discover interfaces that extend this […]

  • 10 April

    Difference between Spring and Spring boot

    In this post, we will see difference between Spring and Spring boot. If you have followed spring project over time, you might have noticed it has become increasingly complex. If you want to create a spring application, you still need to put a lot of efforts. Spring boot is introduced to save time to bootstrap […]

  • 17 September

    Spring Boot SOAP Web service Example

    In this post, we will see how to create soap web services with Spring boot. We will create contract first soap web service with Spring boot. We will focus on how to define configurations for soap web services. Tools used JDK 1.8, Eclipse, Maven Spring-boot – Underlying application framework wsdl4j – for publishing WSDL for our […]

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.