AngularJs (Routing) Integration with Spring MVC

DZone 's Guide to

AngularJs (Routing) Integration with Spring MVC

· Web Dev Zone ·
Free Resource

In this article I will explain how to enable angularJs routing feature with Spring MVC. Assuming you have minimum understanding of angularJs and Spring MVC framework. 

Lets start with a link which can be clicked to get all the customers.

    <!-- Url Link to get the list of customer -->
    <li><a href="#/customerList">Customer List </a></li>
When you clicks on this link,  control goes to angularJs route and check any route enabled for '#/customerList' .  Please see below an angularJs route function.
'use strict';

var customerApp = angular.module('CustomerApp', [ 'ngRoute' ]);

customerApp.config(function($routeProvider,$locationProvider) {


.when('/customerList', {
templateUrl : 'partials/customerList.do',
controller : 'CustomerListController'

.when('/customer/:CUSTOMER_ID', {
templateUrl : 'partials/customerDetails.do',
controller : 'CustomerDetailsController'

// Define other routes here ...

redirectTo : '/customerList'

Value for template url points to a method in Spring MVC controller. Please see below the Spring controller.

public class SpringAngularJsController {

private static final Logger logger = LoggerFactory.getLogger(SpringAngularJsController.class);

@RequestMapping(value = "/customerList", method = RequestMethod.GET)
public String displayCustomers(Model m) {

return "partials/customers";

@RequestMapping(value = "/customerDetails", method = RequestMethod.GET)
public String displayCustomerDetails(Model m) {

return "partials/detailsPage";

Here I defined 'SpringAngularJsController' spring controller. Here I am using '@RequestMapping' annotation to map the request urls to the methods.  This controller got two methods, one to display all customers and other to display customer details. These methods return the angularJs view pages. Once the control get back to angular route , angular will invole the controller defined in the route and data generated will be transfered to the view.
Please see below an angularJs controller. 
angular.module('customerApp').controller("CustomerListController", function($scope, $http) {

$scope.customerData = [];

$scope.loadData = function() {

var responsePromise = $http.get('/customers.do');

responsePromise.success(function(data, status, headers, config) {

$scope.customerData = data;
responsePromise.error(function(data, status, headers, config) {
Console.log("Failed to load data . Please try again !");


//initial customer load

In this controller, we use angularJs http service to invoke the serve side code to get all the customers.  Here the scope variable customerData will be passed to the angularjs view page. Please see below a angularJs partial view screen. Please see below an angular partial view page.
<div  class="well" data-ng-repeat="customer in customerData">
<div class="row">
<div class="col-lg-3">

<label>POD I </label> : {{customer.lastName}} <br/>
<label>Case Number </label> : {{customer.firstName}} <br/>

<!-- Define other properties here -->



I hope the the above explanation will help you to integrate angularJs route with spring MVC framework.

angularjs, html5, java, jsp, route, spring mvc

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}