AngularJS Spring MVC integration

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:

1. Create a simple Maven Project “Spring-Angularjs-Tutorial” and create a package for our source files “com.javainterviewpoint” under  src/main/java 
2. 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%20http://maven.apache.org/maven-v4_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>

3. Create the Java classes HelloController.java and UserDetails.java under com.javainterviewpoint folder.
4. Place the hello.jsp under /WEB-INF/Jsp directory.
5. 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: