How to pass a value from AngularJS to Spring REST controller

Question

I am new to AngularJS and Spring MVC. I am trying to call a REST service from AngularJS and validate the login credentials.

I am not sure if I am trying to pass the param in the right way to pass it to the Controller. Please can someone guide me if I am missing any

Controller.js

var SupportSystems = angular.module('SupportSystems', [ 'ngResource' ]);
SupportSystems
        .controller(
                'LoginController',
                function($scope, $resource) {
                    $scope.authenticate = function() {
                        var authenticateUser = $resource('http://localhost:8080/SupportSystems/SSystems/authenticateUser/:userName', {userName: '@userName'});
                        authenticateUser.save(function(data) {
                            alert("user->" + $scope.userName);
                            alert("pass->" + $scope.password);
                        });
                    }
                });

Spring controller

@RequestMapping("/SSystems")
public class SupportSystemsController { `

    @RequestMapping(value="/authenticateUser/{userName}", method=RequestMethod.POST)
    public ResponseEntity<Boolean> authenticateUser(@RequestParam("userName") String userName) {
        System.out.println("username -->" + userName);
        return new ResponseEntity<Boolean>(Boolean.TRUE, HttpStatus.OK);
    }

Error : Required String parameter 'userName' is not present.

I need to pass the value of username and password to Spring controller. I am trying to use @RequestParam

<body ng-controller="LoginController">

<form class="login-form" name="loginForm" ng-submit="authenticate()">       
    <h2> Login</h2>
    <input type="text" id="userName" class="form-control" name="userName" required autofocus="autofocus" 
    ng-model="userName" />

Nayan · Accepted Answer · 2015-11-19 10:06:08Z

1

Answer to your original question: You need to use @PathVariable instread of @RequestParam

Suggestion: I suggest you to submit the username and password data as a body of the POST request.

How to send POST request with $http:

$scope.authenticate = function() {
    var data = {
        username: $scope.username,
        password: $scope.password
    };

    var successCallBack = function(response){
        // success response found from server
    };

    var errorCallBack = function(response){
        // error response found from server
    };

    $http.post('http://localhost:8080/SupportSystems/SSystems/authenticateUser', data).then(successCallBack, errorCallBack);
}

How to process it in Spring controller:

@RequestMapping(value="/authenticateUser", method=RequestMethod.POST)
public ResponseEntity<?> authenticateUser(@Valid @RequestBody AuthenticateUserRequest request) {

    // check the submitted username and password
    if(request.getUserName().equals("nayan") && request.getPassword().equals("pass")){
        return new ResponseEntity<>(null, HttpStatus.OK);
    } else {
        return new ResponseEntity<>(null, HttpStatus.BAD_REQUEST);
    }
}

Your AuthenticateUserRequest class may look like this:

public class AuthenticateUserRequest {

    @NotNull
    private String username;

    @NotNull
    private String password;

    public String getUsername(){return this.username;}
    public void setUsername(String username){this.username = username;}
    public String getPassword(){return this.password;}
    public void setPassword(String password){this.password = password;}

}

Notes:

@Valid annotation is optional. If present, it'll ensure that username and password must be submitted to the controller. @NotNull annotation checks this validation.
In most cases you'll match submitted username and password values with values from your database. I've skipped that in order to keep it simple.

edited Nov 19, 2015 at 10:06

answered Nov 19, 2015 at 7:09

Nayan

1,6352 gold badges15 silver badges28 bronze badges

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

2 Comments

CrazyMac Over a year ago

I used $http below and was able to fetch the values. Can you explain more about payload var data = 'userName=' + $scope.userName + '&password=' + $scope.password; $http.post('localhost:8080/SupportSystems/SSystems/authenticateUser', data)

Nayan Over a year ago

I've updated the answer with some sample code. Hope it'll help you.

Collectives™ on Stack Overflow

How to pass a value from AngularJS to Spring REST controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related