Simple Tutorial on working with Java Spring and AngularJS together

[6927 views]




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.

  1. In the Eclipse IDE, Create a Maven project named "Tutorial".
  2. Create a package under src/main/java folder named "com.example" to store all our java source files.
  3. Folder structure

  4. Integrate AngularJS with Spring RESTful API Web Application

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.

<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.example</groupId> <artifactId>Tutorial</artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>Spring Angular 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>Tutorial</finalName> </build> </project>

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");%> <html> <body> <h2>This won't rendered as this file just redirects to app</h2> </body> </html>

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.

<!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>

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.

<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.example" /> <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>

Output

Creating a Simple Web App With Java 8, Spring, JSP and Angular JS

Spring and Angular JS simple Tutorial
                 



Clear Any Java Interview by Reading our Ebook Once.


Can you clear Java Interview?



Comments










Search Anything:

Sponsored Deals ends in



Interesting Technical Quizzes:

Search Tags

    Java Spring and Angular integration project

    Example project for java spring and angular