Over a million developers have joined DZone.

AngularJs (Routing) Integration with Spring MVC

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

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

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}