Spring MVC + AngularJS Integration

This tutorial illustrates how to use or integrate the Spring MVC and AngularJS together. AngularJS is popular JS framework for building the single page web applications. Also most of the mobile applications and rich user interfaces are using the AngularJS framework. Here we will show how to use this framework in the view layer and access the Spring MVC controller to display the data. AngularJS framework is created and maintained by Google.

If you have any queries, please write it in the comments section or post it in our facebook page.

books to refer:

In this Spring MVC and AngularJS example, data returned from server is in the type of JSON, that will be assigned to the AngularJS object and will display to the user. Lets look at the example.

also read:

1. Spring MVC Controller


package javabeat.net.spring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;

public class SpringContentController {
	@Autowired UserDetails userDetails;
			method=RequestMethod.GET,produces={"application/xml", "application/json"})
	public @ResponseBody
	UserDetails getUser() {
		UserDetails userDetails = new UserDetails();
		return userDetails;

2. Java Bean


package javabeat.net.spring.controller;

import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;

public class UserDetails {
	private String userName;
	private String emailId;

	public String getUserName() {
		return userName;

	public void setUserName(String userName) {
		this.userName = userName;

	public String getEmailId() {
		return emailId;

	public void setEmailId(String emailId) {
		this.emailId = emailId;

3. Spring Configurations


<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	<context:component-scan base-package="javabeat.net.spring.controller" />
	<bean id="userDetails" class="javabeat.net.spring.controller.UserDetails"/>
	<mvc:annotation-driven content-negotiation-manager="contentManager"/>
	<bean id="contentManager"
                <property name="favorPathExtension" value="true"/>
                <property name="ignoreAcceptHeader" value="true" />
                <property name="defaultContentType" value="text/html" />
                <property name="useJaf" value="false"/>
                <property name="mediaTypes">
	                    <entry key="html" value="text/html" />
	                    <entry key="json" value="application/json" />
	                    <entry key="xml" value="application/xml" />
	<bean id="jspViewResolver"
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />

4. AngularJS View

This is very simple use of the AngularJS framework. The function “Hello” can be added to the JS controler which is best practice. However, for the simplicity we have used inside the JSP page.


<!doctype html>
<html ng-app>
		<title>Spring MVC + AngularJS Demo</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    	function Hello($scope, $http) {
    	        success(function(data) {
    	            $scope.user = data;
		<div ng-controller="Hello">
			<h2>Spring MVC + AngularJS Demo</h2>
			<p>EMail Id : {{user.emailId}}</p>
			<p>User Name : {{user.userName}}</p>

5. Spring MVC + AngularJS Example

Spring MVC and AngularJS Integration Example



About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

  • http://vizaysoni.com Vijay Soni

    How to apply security to AngularJS Resources?
    Like we will be creating many js/views files for angular modules, But these are static files, How can we apply security to these? so only authenticated user has access to them?

  • Yogendra Singh Butola

    You can use SpringSecurtiy to apply security on js/views files. You can completely block a user from viewing them or a part of your view.

    • Ryan

      It’s correct if you’re building Angularjs and webAPI on 1 project. I would like to say on the spirit of Angularjs, it must be able to put at any server which is different to WebAPI project. So this is the problem, i’m using Spring security on Angularjs project to secure its resources and a spring security on WebAPI to secure REST but it’s seem that i can not handle authenticate token when login at Angular project side. Do you have any ideas?