AngularJS – How to Get Data from AJAX & Spring MVC

Spring MVC Controller Methods

Following are two methods one need to write in the Spring MVC Controller:

Method below serves the page, views/httpservice_get.jsp when accessed using the following URL: http://hello-angularjs.appspot.com/angularjs-http-service-ajax-get-code-example. Try and co-relate the request URL mapping and the view (httpservice_get).

@RequestMapping(value = "/angularjs-http-service-ajax-get-code-example", method = RequestMethod.GET)
public ModelAndView httpServiceGetExample( ModelMap model ) {
    return new ModelAndView("httpservice_get");
}

Method below is used to serve the XHR for “/getAllProfiles” URL. Check the Angular $http code for the prior-mentioned URL. Watch out for JSON data in the below that is returned with “@ResponseBody String” return type and annotation.

@RequestMapping(value = "/getAllProfiles", method = RequestMethod.GET)
public @ResponseBody String getAllProfiles( ModelMap model ) {
    String jsonData = "[{\"firstname\":\"ajitesh\",\"lastname\":\"kumar\",\"address\":\"211/20-B,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-888-6666\"},{\"firstname\":\"nidhi\",\"lastname\":\"rai\",\"address\":\"201,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-876-5432\"}]";
    return jsonData;
}

AngularJS Code with $http Service

The code below demonstrates how to retrieve the data from server using AngularJS $http service based on AJAX GET protocol. It also demonstrates the capability of AngularJS dependency injection which is used to inject $http service to the controller as it is initiated.

The $http service is a core Angular service that facilitates communication with the remote HTTP servers via the browser’s XMLHttpRequest object or via JSONP. The detailed article on $http service could be found on AngularJS $http page.

Pay attention to ‘$http’ service which is injected to the controller. Also notice how data is assigned to $scope.profiles model. AngularJS parses the JSON data for us.

var helloApp = angular.module("helloApp", []);
helloApp.controller("HttpController", [ '$scope', '$http',
function($scope, $http) {
$http({method : 'GET',url : '/getAllProfiles'})
.success(function(data, status, headers, config) {
    $scope.profiles = data;
})
.error(function(data, status, headers, config) {
    alert( "failure");
});
} ])

View Displaying JSON Data

Following code displays the JSON data. Pay attention to the usage of ng-repeat directive.

<table class="table">
    <tr>
        <th>Name
        </th>
        <th>Address
        </th>
        <th>City
        </th>
        <th>Phone
        </th>
     </tr>
     <tr ng-repeat="profile in profiles">
         <td>{{profile.firstname + " " + profile.lastname}}
         </td>
         <td>{{profile.address}}
         </td>
         <td>{{profile.city}}
         </td>
         <td>{{profile.phone}}
         </td>
         </tr>
</table>

To summarize, following are the key steps in getting data using AJAX while working with Spring MVC based web application:

• Write the methods in Spring MVC controller that serves the AJAX request
• Write the XHR related AngularJS code which calls the controller method using $http service