CRUD application in angularJs and struts2

Question

I want a simple CRUD application in struts2 and angularJs.

I have tried for below code

addTourController.js

 var myapp = angular.module('myapp', []);
 myapp.controller('addTourCart', function($scope, $http){
 $scope.getDataFromServer = function(){
     var jouMObj={};
     var params = {
        "FromState" : $scope.TourFromState,
        "FromCity" : $scope.TourFromCity,
        "FromDate" : $scope.TourFromDate,
        "ToState" : $scope.TourToState,
        "ToCity" : $scope.TourToCity,
        "ToDate" : $scope.TourToDate,
        "Purpose" : $scope.purpose,
        "StayDetails" : $scope.TourStayMode
     };
     var data = angular.toJson(params);
     $http( {
            method : 'POST',
            url : 'addTourCart.action',
            data : 'value=' + data,
            headers : {
                'Content-Type' : 'application/x-www-form-urlencoded'
            }
        }).success(function(data){
            $scope.jouMObj = data.jouMObj;
            alert(data.jouMObj);
            alert(params.FromDate);
     });
  }
 });

jsp page

   <!DOCTYPE html>
   <html>
   <head>
   <meta charset="ISO-8859-1">
   <title>Tour</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">  </script>
</head>
<body>
<div ng-app="myapp">
          <div id="divjourneydetail" ng-controller="addTourCart">
                    <table id="table2" align="center"  cellpadding="0" cellspacing = "0">
                    <tr>
                        <th><b>From</b></th>
                        <th><b>To</b></th>
                        <th><b>Travel Details</b></th>
                        <th>Add / Reset</th>
                    </tr>
                    <tr>
                        <td><strong>State/City</strong></td>
                        <td><strong>Date</strong></td>
                        <td><strong>State/City</strong></td>
                        <td><strong>Date</strong></td>
                        <td><strong>Purpose</strong></td>
                        <td><strong>Stay Detail</strong></td>
                        <td>
                            <input type="button" id="AddTourDtl" value="Add" ng-click="getDataFromServer()"/>
                      </td>
                    </tr>
                    <tr>
                        <td>
                            <s:select name="TourFromState" id="TourFromState" list="statelist" listKey="stateCode" listValue="stateName" ng-model="TourFromState" headerKey="" headerValue="-Select State-" value="27" onchange="jFun_stateByCityList(this.value,'TourFromCity')"/>
                            <div id="tourReplaceCity">
                                <s:select name="TourFromCity" id="TourFromCity" list="citylist" listKey="regCd" listValue="distName" ng-model="TourFromCity"  headerKey="" headerValue="-Select City-" onchange="jFun_setNewCity(this.value,'getTourFromNewCity','NewTourFromCity')"/>
                            </div>
                            <div id="getTourFromNewCity"></div>
                        </td>
                        <td>
                            <input type="text" name="FromDate" id="TourFromDate" value=""  maxlength="10" ng-model="TourFromDate" >
                            <img src="<%=request.getContextPath()%>/MahBill/Images/calender_anim.gif" onClick="popupCalender('TourFromDate');"  width="19" height="19"  >
                        </td>
                        <td>
                            <s:select name="TourToState" id="TourToState" list="statelist" listKey="stateCode" listValue="stateName" ng-model="TourToState" headerKey="" headerValue="-Select State-"value="27" onchange="jFun_stateByCityList(this.value,'TourToCity')"/>
                            <div id="tourReplaceToCity">
                                <s:select name="TourToCity" id="TourToCity" list="citylist" listKey="regCd" listValue="distName" ng-model="TourToCity" headerKey="" headerValue="-Select City-" onchange="jFun_setNewCity(this.value,'getTourNewCity','NewTourToCity')"/>
                            </div>
                            <div id="getTourNewCity" ></div>
                        </td>
                        <td>
                            <input type="text" name="TourToDate" id="TourToDate" value="" maxlength="10"  ng-model="TourToDate" />
                            <img src="<%=request.getContextPath()%>/MahBill/Images/calender_anim.gif" onClick="popupCalender('TourToDate');"  width="19" height="19"  >
                        </td>
                        <td >
                            <s:textarea key="purpose" name="purpose" id="Tourpurpose" ng-model="purpose" cols="24" rows="2"/> 
                        </td>
                        <td>
                             <s:select name="TourStayMode" id="TourStayMode" headerValue="- Select -" headerKey="" ng-model="TourStayMode"
                            list="staymodelist" listKey="staymodeid" listValue="staymodename" onchange="return jFun_stayMode(this.value);"/>
                        </td>
                   </tr>
                </table>
                <div id="cartTourDetails">
                    <table id="table2" align="center"  cellpadding="0" cellspacing = "0">
                        <tr>
                            <th align="center" colspan="2" style="border-right:1px solid #333;"><b>From</b></th>
                            <th align="center" colspan="2" style="border-right:1px solid #333;"><b>To</b></th>
                            <th align="center" colspan="2" style="border-right:1px solid #333;"><b>Travel Details</b></th>
                        </tr>
                        <tr>
                            <td><strong>State/City</strong></td>
                            <td><strong>Date</strong></td>
                            <td><strong>State/City</strong></td>
                            <td><strong>Date</strong></td>
                            <td><strong>Purpose</strong></td>
                            <td><strong>Stay Detail</strong></td>
                        </tr>
                        <tr ng-repeat="journey in params">
                            <td  valign="middle">
                                {{FromState}}
                                <div id="tourReplaceCity">
                                    {{FromCity}}
                                </div>
                            </td>
                            <td>{{FromDate}}</td>
                            <td valign="middle">
                                {{ToState}}
                                <div id="tourReplaceToCity">
                                    {{ToCity}}
                                </div>
                            </td>
                            <td>{{ToDate}}</td>
                            <td>{{purpose}} </td>
                            <td>{{ToDate}}</td>
                       </tr>
                    </table>
                </div>
                </div>
 </div>

Struts.xml

 <package name="base" extends="json-default">
        <action name="addTourCart" class="Action.Tour"  method="addTourCart">
            <result type="json">
                <param name="root">jouMObj</param>
            </result>
        </action>
 </package>

Model Class

   public class JourneyDetail_M implements Serializable{
   private String FromState;
   private String FromCity;
   private String FromDate;
   private String ToState;
   private String ToCity;
   private String ToDate;
   private String staymodeid;
   private String staymodename;
   private String purpose;
    //getter and setter
}

Action class

public class Tour extends ActionSupport {
    JourneyDetail_M jouMObj=new JourneyDetail_M();

public String addTourCart(){
    try {
        System.out.println(request.getParameter("value"));

        String TourFromState=request.getParameter("FromState");
        String TourFromCity=request.getParameter("FromCity");
        String TourToState=request.getParameter("ToState");
        String TourToCity=request.getParameter("ToCity");
        String TourFromDate=request.getParameter("FromDate");
        String TourToDate=request.getParameter("ToDate");
        String purpose=request.getParameter("Purpose");
        String stayMode=request.getParameter("StayDetails");

        jouMObj.setFromState(TourFromState);
        jouMObj.setFromCity(TourFromCity);
        jouMObj.setFromDate(TourFromDate);
        jouMObj.setToState(TourToState);
        jouMObj.setToCity(TourToCity);
        jouMObj.setToDate(TourToDate);
        jouMObj.setPurpose(purpose);
        jouMObj.setStaymodeid(stayMode);
    } catch (IOException e) {
        e.printStackTrace();
        return "error";
    }
    return SUCCESS;
}
public JourneyDetail_M getJouMObj() {
    return jouMObj;
}
public void setJouMObj(JourneyDetail_M jouMObj) {
    this.jouMObj = jouMObj;
}

 }

here is my code in action using request.getParameter("value") i got all value but how to set and get from action class?

Yes, I am tried but I am not able to do return model object to angular js — Rohini, Sep 02 '16 at 06:33
@Rohini It is already another problem but you can use Jackson. — Roman C, Sep 04 '16 at 17:19

score 1 · Answer 1 · edited May 23 '17 at 12:00

I am not familiar with AngularJS.... but the data : 'value=' + data, lines means that you are passing all the data as a single request parameter to your action (value). There is no way that struts can read the value and fill the JourneyDetail_M object for you.

You need to use some gson utility class to deserialize the request.getParameter("value") to you object.

Or you can use html submit without angular.toJson as mentioned in Angularjs - simple form submit. In this way all parameters are send separately. Make your struts action ModelDriven and your model can be filled by struts.

May be its the naming problem... may your action property names be camelCase. So for example rename the FromState to fromState in your action and make sure you have public setFromState (String ... ) also set the input name in your jsp to fromState.

Also while working with struts actions let struts fill your action properties and do not use request as far as you can.

CRUD application in angularJs and struts2

1 Answers1