• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Spring MVC + AngularJS Integration

May 10, 2014 //  by Krishna Srinivasan//  Leave a Comment

Build Your REST API with Spring - VIDEO Courses

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.

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:

  • Spring Tutorials
  • Introduction to Spring MVC
  • Spring and Hibernate Integration

1. Spring MVC Controller

SpringContentController.java

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;

@Controller
public class SpringContentController {
	@Autowired UserDetails userDetails;
	@RequestMapping(value="/springcontent",
			method=RequestMethod.GET,produces={"application/xml", "application/json"})
    @ResponseStatus(HttpStatus.OK)
	public @ResponseBody
	UserDetails getUser() {
		UserDetails userDetails = new UserDetails();
		userDetails.setUserName("Praveen");
		userDetails.setEmailId("praveen@gmail.com");
		return userDetails;
	}
}

2. Java Bean

UserDetails.java

package javabeat.net.spring.controller;

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

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

	@XmlAttribute
	public String getUserName() {
		return userName;
	}

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

	@XmlAttribute
	public String getEmailId() {
		return emailId;
	}

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

3. Spring Configurations

spring-dispatcher-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
	<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"
                class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
                <property name="favorPathExtension" value="true"/>
                <property name="ignoreAcceptHeader" value="true" />
                <property name="defaultContentType" value="text/html" />
                <property name="useJaf" value="false"/>
                <property name="mediaTypes">
	                <map>
	                    <entry key="html" value="text/html" />
	                    <entry key="json" value="application/json" />
	                    <entry key="xml" value="application/xml" />
	                </map>
                </property>
        </bean>
	<bean id="jspViewResolver"
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
</beans>

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.

angular.jsp

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

5. Spring MVC + AngularJS Example

If you run the above example code, you would get the below screen.

Spring MVC and AngularJS Integration Example

[wpdm_file id=91]

Category: Spring FrameworkTag: AngularJS, Spring Integration

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.

Previous Post: « Spring MVC Redirect Example
Next Post: PrimeFaces + Spring Data + MongoDB Integration »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact