In this tutorial, we will learn how to integrate AngularJS with Spring MVC application. We will be building a REST Web service using Spring MVC Controller (@RESTController), here AngularJS will request the data through the HTTP protocol and the RESTFul Web Service will return the JSON format response. Let’s now dig into the code.
Folder Structure:
- Create a simple Maven Project “Spring-Angularjs-Tutorial” and create a package for our source files “com.javainterviewpoint” under src/main/java
- Now add the following dependency in the POM.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.javainterviewpoint</groupId> <artifactId>Spring-Angularjs-Tutorial</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>Spring-Angularjs-Tutorial Maven Webapp</name> <url>http://maven.apache.org</url> <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>4.2.4.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-core</artifactId> <version>4.2.4.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>4.2.4.RELEASE</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.3.3</version> </dependency> </dependencies> <build> <finalName>Spring-Angularjs-Tutorial</finalName> </build> </project> - Create the Java classes HelloController.java and UserDetails.java under com.javainterviewpoint folder.
- Place the hello.jsp under /WEB-INF/Jsp directory.
- Place the web.xml and SpringAngular-servlet.xml under the /WEB-INF directory
AngularJS Spring MVC integration
HelloController
package com.javainterviewpoint;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
@RestController
public class HelloController
{
@RequestMapping(value="/hello")
public ModelAndView hello()
{
return new ModelAndView("hello");
}
@RequestMapping(value="/userdetails",method=RequestMethod.GET,produces="application/json")
public UserDetails userdetails()
{
UserDetails userDetails = new UserDetails();
userDetails.setName("JavaInterviewPoint");
userDetails.setDepartment("Blogging");
return userDetails;
}
}
- Our HelloController will act as the RESTFul Webservice, it has two methods.
- hello() – This method simply redirects the user to hello.jsp
- userdetails() – This method serves the request “/userdetails” returns the user information in the JSON format.
UserDetails
package com.javainterviewpoint;
import javax.xml.bind.annotation.XmlAccessType;
import javax.xml.bind.annotation.XmlAccessorType;
import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
@XmlAccessorType(XmlAccessType.FIELD)
public class UserDetails
{
@XmlAttribute
private String name;
@XmlAttribute
private String department;
public UserDetails()
{
super();
}
public UserDetails(String name, String department)
{
super();
this.name = name;
this.department = department;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
public String getDepartment()
{
return department;
}
public void setDepartment(String department)
{
this.department = department;
}
}
UserDetails class is a simple POJO class consisting the details of the user such name and department.
index.jsp
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%response.sendRedirect("hello");%>
<html>
<body>
<h2>Hello World!</h2>
</body>
</html>
index page simply redirects the user to /hello and the controller in-turn redirects the user to hello.jsp
hello.jsp
<!doctype html>
<html ng-app>
<head>
<title>Angularjs Spring MVC sample application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$scope.getUserDetails = function()
{
$http.get('http://localhost:8080/Spring-Angularjs-Tutorial/userdetails').
success(function(data) {
$scope.user = data;
});
}
}
</script>
</head>
<body>
<div ng-controller="Hello">
<h2>Angularjs Spring MVC sample application!!</h2>
<button ng-click="getUserDetails()">Get User Details</button>
<p>Name : {{user.name}}</p>
<p>Department : {{user.department}}</p>
</div>
</body>
</html>
When the user clicks on the “Get User Details” button the getUserDetails() method will be called. The getUserDetails() method uses the $http service and hits our REST Service and retrieves the userDetails in the JSON format which will be binded and displayed in the Screen.
web.xml
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>Spring AngularJS Tutorial</display-name> <servlet> <servlet-name>SpringAngular</servlet-name> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SpringAngular</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>
- The web.xml has everything about the application that a server needs to know, which is placed under the WEB-INF directory. It contains the name of the SpringConfiguration file, when the DispatcherServlet is initialized the framework will try to load a configuration file “[servlet-name]-servlet.xml” under the WEB-INF directory.
SpringAngular-servlet.xml
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd"> <context:component-scan base-package="com.javainterviewpoint" /> <mvc:annotation-driven /> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/Jsp/" /> <property name="suffix" value=".jsp" /> </bean> </beans>
- The SpringConfig-servlet.xml is also placed under the WEB-INF directory.
- <context:component-scan> will let the Spring Container to search for all the annotation under the package “com.javainteriviewpoint”.
- <mvc:annotation-driven/> annotation will activate the @Controller, @RequestMapping, @Valid etc annotations.
- The view is resolved through “org.springframework.web.servlet.view.InternalResourceViewResolver” which searches for the jsp files under the /WEB-INF/Jsp/ directory.
Output:
Leave a Reply