About Neha Goel

Neha holds a Bachelors degree in Computer Science and Engineering. Currently she is working as a Sr. Programmer Analyst for a client in USA and has a total of 9+ years of Java/J2EE experience.Her expertise includes participation in all stages of SDLC. She has experience with multiple web based and enterprise based applications. She has a very impressive understanding in Object oriented architecture, analysis, design and software development using latest technologies like Java, J2EE , Restful Services, Spring, Hibernate, JDBC, JSP, Servlets, GWT, ATG etc.

Spring MVC 4 AngularJS Example

This tutorial is about integration of AngularJS with Spring MVC version 4. Before proceeding with this article, we assume readers have a working knowledge of Java and its frameworks. We will see how AngularJS will request the data through the HTTP protocol and we will write a Restful web service that returns response in JSON format.

1. Introduction

Spring MVC is a Model-View-Controller (MVC) web framework build on notion of a central Front Controller servlet (DispatcherServlet) which is responsible for dispatching each request to appropriate handlers, resolving views and finally returning the response.

AngularJS is a JavaScript framework, with the core goal of simplification. It excels at building dynamic, single page web apps (SPAs) and supports the Model View Controller (MVC) programming structure. Lets proceed to see how Spring MVC and AngularJS can be integrated to give us a complete example.

We will be using Eclipse Indigo and Java8 to demonstrate this example.

HelloController class will act as the RESTFul Webservice. It has two methods.

1. hello() method – This method serves the request “/hello” and simply redirects the user to hello.jsp file. The method returns a ModelAndView object, passing "hello" as view name to the servlet.
2. userdetails() method – This method serves the request “/userdetails” and returns the user information in the JSON format. A new UserDetails object is created in the method and the values are populated in the POJO. The values can be seen on the UI when application is run and a request to this method is there.

UserDetails.java class is a simple POJO class consisting the details of the user such as name and department with their corresponding getter and setter methods.

2.4 Create jsp files

Create a file index.jsp in src/main/webapp/ package. The code for index.jsp looks like below.
The index.jsp page redirects the user to /hello. The control then passes onto the HelloController.java, hello() method which passes "hello" in ModelAndView and redirects the user to hello.jsp.

As you see the code for hello.jsp, we are creating a button, Get User Details. When this button is clicked, the getUserDetails() method is called. The getUserDetails() method defined in the hello.jsp calls the http service and hits our Rest service class, HelloController -> userDetails() method and return the userDetails object in JSON format. The JSON response is then binded with the corresponding fields on the UI and displayed to the user.

2.5 Creating web.xml

The web.xml contains the information that the server need to run the application. This file is placed under the src/main/webapp/WEB-INF directory. It contains the name of the Spring Configuration file, which is used when the DispatcherServlet is initialized. The Spring framework will then try to load a configuration file “[servlet-name]-servlet.xml” under the WEB-INF directory.

3. Complete project structure

The complete project structure looks like the one below:

Fig 5: Complete project structure

4. Output

4.1 Run Maven Build

Next step is to do a clean Maven build to run the project. Right click the project and first select Maven Clean and then the Maven Build to get the project war file. The war file gets created in the project directory target folder.

Fig 6: Run Maven build

4.2 Deploy war

The war file created can be deployed in Tomcat. After placing the war file in ../tomcat/webapps directory, start the server and hit the application url to get to the application.

The URL will be "http://localhost:8080/SpringMVC_AngularJS_Example/hello" for this particular example.

Fig 7: Application running

Click on Get User Details button and the fields Name and Department get populated as below.

Fig 8: Click Get User Details button

5. Download the Source Code

This was an example of Spring MVC with Angular JS and how the data flow happens in such an application.

Newsletter

Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

Email address:

Receive Java & Developer job alerts in your Area

Leave this field empty if you're human:

Join Us

With 1,240,600 monthly unique visitors and over 500 authors we are placed among the top Java related sites around. Constantly being on the lookout for partners; we encourage you to join us. So If you have a blog with unique and interesting content then you should check out our JCG partners program. You can also be a guest writer for Java Code Geeks and hone your writing skills!

Disclaimer

All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners. Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries. Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.