In this post, we have created a Simple Tutorial explaining integration of Spring with Angular. For better understanding, we would create a Sample Application that fetches Roll number and name of Student from user and displays it.
- In the Eclipse IDE, Create a Maven project named "Tutorial".
- Create a package under src/main/java folder named "com.example" to store all our java source files.
Folder structure
Append the dependencies in POM.xml
A Project Object Model or POM is an XML file that contains information about the project and the configurations used by Maven to build the project.
Project dependencies are specified in POM.xml, these dependencies are the files you'll need to execute the project.
4.0.0
com.example
Tutorial
war
0.0.1-SNAPSHOT
Spring Angular WebApp
http://maven.apache.org
org.springframework
spring-context
4.2.4.RELEASE
org.springframework
spring-core
4.2.4.RELEASE
org.springframework
spring-webmvc
4.2.4.RELEASE
javax.servlet
javax.servlet-api
3.1.0
jstl
jstl
1.2
com.fasterxml.jackson.core
jackson-databind
2.3.3
Tutorial
AppController.java
Under com.example package, create AppController.java. This class file is a RESTful Webservice which directs the user to app.jsp file. It also stores information of Student and returns it in a JSON format.
package com.example;
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 AppController
{
@RequestMapping(value="/app")
public ModelAndView app()
{
return new ModelAndView("app");
}
@RequestMapping(value="/studentdetails",method=RequestMethod.GET,produces="application/json")
public StudentDetails studentdetails()
{
StudentDetails StudentDetails = new StudentDetails();
StudentDetails.setRoll(21);
StudentDetails.setName("Krishna");
return StudentDetails;
}
}
StudentDetails.java
Under com.example package, create another java class file, StudentDetails.java. This file contains getter and setter methods which lets us set data to object variable or get data from object variable.
package com.example;
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 StudentDetails
{
@XmlAttribute
private int roll;
@XmlAttribute
private String name;
public StudentDetails()
{
super();
}
public StudentDetails(int roll, String name)
{
super();
this.roll = roll;
this.name = name;
}
public int getRoll()
{
return roll;
}
public void setRoll(int roll)
{
this.roll = roll;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
}
app.jsp
Create a jsp file named "app.jsp" in /WEB-INF/Jsp folder.
<html ng-app>
<head>
<title>Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function App($scope, $http) {
$scope.getStudentDetails = function()
{
$http.get('http://localhost:8080/Tutorial/studentdetails').
success(function(data) {
$scope.user = data;
});
}
}
</script>
</head>
<body>
<div ng-controller="App">
<h2>Java Spring and Angular WebApplication</h2>
<button ng-click="getStudentDetails()">View</button>
<p>Roll No. : {{user.roll}}</p>
<p>Name : {{user.name}}</p>
</div>
</body>
</html>
index.jsp
When the user clicks "View" button, getStudentDetails() method is called. It uses $http service which calls REST service and fetch studentDetails in JSON format which is rendered on the screen.
Create index.jsp file in WEB-INF folder.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<% response . sendRedirect("app");%>
This won't rendered as this file just redirects to app
This jsp file redirects user to /app and the controller redirects the user to app.jsp which contains our main information.
web.xml
Edit web.xml file under WEB-INF directory, and add SpringConfiguration file. This configuration file is loaded when the Servlet is initialized.
Spring AngularJS Tutorial
SpringAngular
org.springframework.web.servlet.DispatcherServlet
SpringAngular
/
SpringAngular-servlet.xml
Create SpringAngular-servlet.xml file under WEB-INF directory. This lets Spring container search for all the annotations under "com.example" package.
Output