Submit login with AngularJS - angularjs

Question

I want to avoid using <form> so instead of
<form action="./login" method="post">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="password">
<input type="submit" value="Login">
</form>
I want to use something like
<input type="text" placeholder="Nombre de usuario" data-ng-model="username">
<input type="password" placeholder="Contraseña" data-ng-model="password">
<a data-ng-click="doLogin()">Login</a>
And in controller:
$scope.doLogin=function(){
var url = '/login?username=' + $scope.username + '&password=' + $scope.password;
$http.post(url).then(function(msg){
console.log(msg);
});
}
The request is sent to Spring framework and work perfectly when I use form,but when I use Angular to perform same action it gives me an error POST http://localhost:8080/login?username=admin&password=admin 404 (Not Found)
What changes I have to do? I would like to have the perfectly the same functionality of submit, as on wrong credentials Spring framework redirects me on another view.

Answer 1

I think that you should not delete the form but change it to a pure angularjs form with a ngSubmit attribute (be sure to delete the action attribute).
Like this :
<form method="post" ng-submit="doLogin()">
<input type="text" placeholder="Username" name="username">
<input type="password" placeholder="Password" name="password">
<input type="submit" value="Login">
</form>
Then, in your js controller, your http call is a post call with parameters passed like a get call (param1=value1&param2=...), change your call to pass login parameters in post.
$scope.doLogin=function(){
var url = '/login';
$http.post(url, {username: $scope.username, password: $scope.password}).then(function(msg){
console.log(msg);
});
}
This way, your angularjs form will behave the same way than your previous code.