Asynchronous call with AngularJs and Spring
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
1. Download AngularJS https://angularjs.org/
2. Include AngularJS
javascript files under your resources folder and jsp. How to include resource files in Spring project
Asynchronous Call
Spring MVC consists of
Model, View, and Controller, however AngularJs covers the View only.
 |
View
and Controller
|
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";
}
3. Asynchronously,
AngularJs Ajax http.Post will be executed when the page is rendering its
content. See AngularJS tutorial and documentation (
https://docs.angularjs.org/guide ) and http://www.w3schools.com/angular/angular_http.asp
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());
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.
for more detail on the
entire design see the next post
AngularJS Documentation
AngularJS works perfectly
in jsp file. AngularJS tutorial and documentation (
https://docs.angularjs.org/guide )
