This post is a step by step guide to configure AngularJs with Spring-MVC. I am using Eclipse (Mars Edition) and Apache Tomcat for this tutorial. Also I am using Maven for build automation. If you are beginner or if you have not yet configured your workspace then I recommend these links before reading any further.

Step 1: Create a new Dynamic Web Application

Create a new dynamic web application (named AngularSpringHelloWorld for this tutorial). Also convert the project into ‘Maven Project’ (This is an optional step if you are planning to use Maven).

AngularJs SpringMvc Workspace setup

Step 2: Update dependencies for Spring MVC

Add these dependencies to pom.xml

If you are not using Maven then download the following jar versions into WEB-INF/lib folder.

spring-webmvc.jar -> 4.2.4 Version
spring-beans.jar -> 4.2.4 Version
spring-context.jar -> 4.2.4 Version
spring-aop.jar -> 4.2.4 Version
aopalliance.jar -> 1.0 Version
spring-core.jar -> 4.2.4 Version
commons-logging.jar -> 1.2 Version
spring-expression.jar -> 4.2.4 Version
spring-web.jar -> 4.2.4 Version

Step 3: Include AngularJS

Download AngularJS 1.5 from Official site and include it in workspace in /resources/opensource folder.

Step 4: Add code for Spring MVC Configuration

WebConfig

Controller

Deployment Descriptor

Copy paste this code into web.xml

Step 5: Include Html and Controller files

HTML file with angularJS references

Add below code to /WEB-INF/views/static/helloWorld.html

AngularJS – Controller

Add below code to /resources/js/helloworld.js

Output

Open a browser and enter address http://localhost:/AngularSpringHelloWorld/helloworld/1.

Angularjs springmvc output

Hope this helps!!
Learn and Share