Submitting form by AngularJs in spring mvc

Question

I am new to Angularjs and trying to save table by using angularjs in spring mvc. My table and controller is :

@Entity
public class StudentSkills {

@Id
@GeneratedValue(strategy= GenerationType.AUTO)
private int skillId;
private String skillName;
private int expMonth;
private int expYear;
private String experties;

@ManyToOne
@JoinColumn(name= "student")
@JsonIgnore
private Student student;

// Getters Setters

My jsp page is : The Angularjs Coding is probably not correct

<script>
var skillApp = angular.module('skillApp', []);

skillApp.controller('skills', function($scope, $http) {

$scope.refreshSkill = function(){
    $http.get('/user/getuserskills')
    .success(function(data) {
        $scope.allSkills = data;
    });
};  

$scope.addSkill = function(skill){

    $http.put('/user/addskill/'+skill)

    .success($scope.refreshSkill());            
};
});
</script>

<title>Add Skill</title>
</head>
<body>
    <div ng-app="skillApp">
        <div ng-controller="skills" ng-init="refreshSkill()">
            <div ng-repeat="skill in allSkills">
                <div class="col-sm-6 col-lg-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h5>Name : {{skill.skillName}}</h5>
                            <h5>Name : {{skill.expMonth}}</h5>
                            <h5>Name : {{skill.expYear}}</h5>
                            <h5>Name : {{skill.experties}}</h5>
                        </div>
                    </div>
                </div>
            </div>  
                <form novalidate ng-submit="addSkill(skill)">
                    <input type="text" ng-model="skill.skillName">
                    <input type="text" ng-model="skill.expMonth">
                    <input type="text" ng-model="skill.expYear">
                    <input type="text" ng-model="skill.experties">
                    <input type="button" id="submit" value="Submit">                        
                </form>
        </div>
    </div>
</body>

My Controller is :

@RequestMapping(value= "getuserskills", method = RequestMethod.GET)
public @ResponseBody List<StudentSkills> getStudentSkills(Model model){     
    List<StudentSkills> skills = studentService.getAllSkills(getStudentName());
    return skills;

}

@RequestMapping(value = "/addskill", method = RequestMethod.PUT)
@ResponseStatus(value = HttpStatus.NO_CONTENT)
public void update(@PathVariable("skill") StudentSkills skills) {       
    skills.setStudent(studentService.getStudent(getStudentName()));
    studentService.addStudentSkill(skills);
}

I want to fetch all the skills saved by using refreshSkill() function, and submit new skills through form. It is not working and i have tried but could not get it to work. How to link form like we can link using @modelAttribute. Or any other way to submit form using ajax. Thank You.

Answer 1

maybe you should follow some Angular JS tutorial or example, such as Angular phone tutorial , and this guide of the notion scope.

There are several problems in your codes :

1, you should define the json object skill in your controller, so that your view can recognize it : $scope.skill={}; .
2, as the api of $http.put shows, the syntax should be : put(url, data, [config]); . So you should modify your code to

 $http.put('/user/addskill/', $scope.skill).success($scope.refreshSkill());

3, in the server side, you should use the annotation @RequestBody for the StudentSkills parameter, like this :

public void update(@RequestBody StudentSkills skills) {       
    // your codes ...
}

Because the annotation @PathVariable is for the uri parameter, and when you use http put, the parameter is stored in the request body.

Hope help!

Submitting form by AngularJs in spring mvc

Question

1 answers

solution1
2 ACCPTED 2015-03-13 22:01:58

Submitting form by AngularJs in spring mvc

Question

1 answers

solution1 2 ACCPTED 2015-03-13 22:01:58

solution1
2 ACCPTED 2015-03-13 22:01:58