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:

AngularJS Spring MVC

  1. Create a simple Maven Project “Spring-Angularjs-Tutorial” and create a package for our source files com.javainterviewpointunder  src/main/java 
  2. Now add the following dependency in the POM.xml
     <project xmlns="" xmlns:xsi=""
      <name>Spring-Angularjs-Tutorial Maven Webapp</name>
  3. Create the Java classes and 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


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;

public class HelloController
    public ModelAndView hello()
        return new ModelAndView("hello");
    public UserDetails userdetails()
        UserDetails userDetails = new UserDetails();
        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.


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;

public class UserDetails
    private String name;
    private String department;
    public UserDetails()
    public UserDetails(String name, String department)
        super(); = name;
        this.department = department;
    public String getName()
        return name;
    public void setName(String 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.


 <%@ taglib uri="" prefix="c" %>
<h2>Hello World!</h2>

index page simply redirects the user to /hello and the controller in-turn redirects the user to hello.jsp


 <!doctype html>
<html ng-app>
    <title>Angularjs Spring MVC sample application</title>
    <script src=""></script>
      function Hello($scope, $http) {
        $scope.getUserDetails = function()
           success(function(data) {
           $scope.user = data;
     <div ng-controller="Hello">
       <h2>Angularjs Spring MVC sample application!!</h2>
       <button ng-click="getUserDetails()">Get User Details</button>
       <p>Name : {{}}</p>
       <p>Department : {{user.department}}</p>

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.


 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "" >

  <display-name>Spring AngularJS Tutorial</display-name>
  • 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.


 <beans xmlns=""
 <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" />
  • 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.


Angularjs Spring MVC sample application

Angularjs Spring MVC sample application 1

Leave a Reply

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