Struts2 AngularJS integration
In this post, we will learn to implement AJAX calls from a JSP page to a Struts 2 Action class using AngularJS and update the same JSP page back with the Json response from the Struts 2.
Library Required
Since Angular can send and receive only in json format, to handle it you need struts2-json-plugin-2.x.x.jar. This plugin allows you to serialize the Action class attribute which has getter and setter into a JSON object.
How to use?
First of all create a “Dynamic Web Project” in Eclipse and download the AngularJS library and place in js folder of eclipse work-space, and refer this files in the head section in the jsp, this file is responsible for the AJAX call made to the Struts2 and for updating the response back in the JSP.
Jsp Page
File: index.jsp
AJAX with Struts 2 using AngularJS First Name : {{person.firstName}}
Last Name : {{person.lastName}}
HTML – Data Binding
We can display JSON data values in jsp by using their attributes in expressions like {{person.firstName}}, {{person.lastName}} etc.. Here the id=”ng-app” is most important for Internet Explorer browser data binding.
ng-controller
Specifies a JavaScript controller class that evaluates HTML expressions.
ng-click
Angular on click event
Model class
package com.model; public class PersonData { private String firstName; private String lastName; // Create Getters and Setters }
Recommended Reading:
- AJAX implementation in Struts 2 using JQuery and JSON
- jQuery Tutorial for Beginners
- GridView in Struts2 using jQuery DataTable via Ajax
Action Class
In action class you need to create instance variables and its respective getter and setter methods. Here all the variables that have a setter can be set to the values received as parameters from AngularJs and all the variables that have a getter method can be retrieved in the AngularJs code.
package com.action; import com.model.PersonData; import com.opensymphony.xwork2.Action; public class AngularAction implements Action { private PersonData personData = new PersonData(); public String execute() { personData.setFirstName("Mohaideen"); personData.setLastName("Jamil"); return SUCCESS; } public PersonData getPersonData() { return personData; } public void setPersonData(PersonData personData) { this.personData = personData; } }
Code Explanation
When the user clicks on “Fetch data from server” button, button click event is fired via angularJS “ng-click” directive and the ‘http’ function executes the Ajax GET request on the Servlet.
struts.xml
Since the response needed by AngularJs is of type json, so we need to convert the PersonData objects to json strings, for this you need to configure Action class in struts.xml such that it returns a json object. This configuration is as follows:
Create a package in struts.xml file, which extend json-default and specify the result type of your action class inside this package to be json. The json-default package contains an interceptor and the result type configuration for JSON requests and responses.
personData true true
Note: json-default package extends struts-default
Web.xml
Struts2 struts2 org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter struts2 /* index.jsp
Recommended Article :
Demo
Once you done with above steps then Right click on project –> Run As –> Run on Server
(Note: I have used tomcat server to run this application. If you are not sure how to configure tomcat server in eclipse please follow this link).
Click button: Fetch data from server to pass HTTP request using angularJS where Java servlet will return data as below:
AngularJS demo
Hi Jamil,
Nice post.I tried to work on with your code regarding Struts2 and AngularJs, but on clicking “fetch data from server” an error occur —org.apache.struts2.dispatcher.Dispatcher.serviceAction Could not find action or result
There is no Action mapped for namespace / and action name angularAction https://uploads.disquscdn.com/images/beb3a15bdfe2eaa487b727dae4d2f0b13d0db068e8c43c8f15d9ab6320fca4b2.png
Hi Jamil,
Nice post.I tried to work on with your code regarding Struts2 and AngularJs, but on clicking “fetch data from server” an error occur —org.apache.struts2.dispatcher.Dispatcher.serviceAction Could not find action or result
There is no Action mapped for namespace / and action name angularAction
hi Jamil,
This is a really nice post. I see that this example is good when we are building a single page applications, but I am in a situation, where I need to add an angularJS Page to an existing Struts2 application. So I need
1. an action in the existing struts.xml to point to new angular JS page
2. all the actions that are invoked from this angularJS page which need json responses.
Can you help me with this configuration.
Thanks,
Syam
http://www.simplecodestuffs.com/ajax-implementation-in-struts-2-using-jquery-and-json/
Hi… I just want to do the crud functionality using AngularJS $resource.. How do i implement the same using Struts2. Please help me with that.