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