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.

Qianyue · Accepted Answer · 2015-03-13 22:01:58Z

2

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!

answered Mar 13, 2015 at 22:01

Qianyue

1,78719 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kharoud Over a year ago

It is still not working, Not even the get operation is responding.

Qianyue Over a year ago

@Kharoud have you configured a general url for your controller ? In your request the get all skills $http.get('/user/getuserskills'), there is a prefix user, but in your controller, the mapping is getuserskills.

Kharoud Over a year ago

Hello sir i recognized that earlier and changed it. but it still not responding. Now i am doing angularjs from beginning and hope to find what i am doing wrong.

Kharoud Over a year ago

get method starts to work. I didn't knew i have too mention my project name to in the get url.

Kharoud Over a year ago

It seems the main problem was with my url. Thank you

Collectives™ on Stack Overflow

Submitting form by AngularJs in spring mvc

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related