UI first, content later!
This tutorial is intended
to demonstrate an asynchronous call using AngularJs and Spring MVC project.
In order to perform an
asynchronous service call, we will use AngularJs ajax http.Post method
to call backends (such as SOAP/REST services or Database), and it will also map
the data returned from controller to each field on the View.
Include AngularJS in Spring MVC Project
Asynchronous Call
Spring MVC consists of
Model, View, and Controller, however AngularJs covers the View only.
According to the picture
above, it describes as the following
1. Spring View handles the
page redirection using http.Get from the View. For example when the webpage url
is called ndry93.blogspot.com/webpage1
2. Spring Controller returns
the requested view name, and thus web page will render.
@RequestMapping(value = "/webpage1", method = RequestMethod.GET)
public String index() {
return "webpage1";
}
For example,
<script type="text/javascript" src= "<c:url value="/resources/js/angular.min.js" />"></script>
<script type="text/javascript">
var app
= angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http)
{
$http.post("getSRDetails.htm", {
ticketNumber : "1004406487" })
.success(
function (response)
{
$scope.srdetails = response;
});
});
</script>
8. In the Controller, we
should have code as the following to capture request from the View. Assume we
get the values from backend service, then we need to convert the list of values
into JSON format before we send it back to the view.
@RequestMapping(value = "/getSRDetails.htm", method = RequestMethod.POST)
public @ResponseBody
String GetSRDetails(@RequestBody Map request) throws JsonGenerationException,
JsonMappingException, IOException {
List<SRConversationDetail> sRConversationDetails =
serviceRequestFacade.retrieveSRDetails(request.get("ticketNumber").toString());
logger.info("Service Request details size "+ sRConversationDetails.size());
ObjectMapper converter = new ObjectMapper();
logger.info("Service Request details converted: "+ sRConversationDetails);
return converter.writeValueAsString(sRConversationDetails);
}
*@RequestBody since request param data sent through
request body http POST method. *Use Map data type because the request param is
in JSON format
In result, browser will render webpage1.jsp and display contents from Ajax
http.Post method by calling /getSRDetails.htm.
AngularJS Documentation
