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.

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.

CREATE TABLE CUSTOMER (
id int(11) NOT NULL AUTO_INCREMENT,
customerName varchar(255) DEFAULT NULL,
email varchar(255) DEFAULT NULL,
PRIMARY KEY (id)
)

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.

http://localhost:8080/customerDataAngularJS.html
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:

Was this post helpful?

    Leave a Reply

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