Soumettre connexion avec AngularJS

Question

Je veux éviter d'utiliser <form> donc au lieu de

<form action="./login" method="post"> 
    <input type="text" placeholder="Username" name="username"> &nbsp; 
    <input type="password" placeholder="Password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

Je veux utiliser quelque chose comme

<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> 

Et dans le contrôleur:

$scope.doLogin=function(){ 
    var url = '/login?username=' + $scope.username + '&password=' + $scope.password; 
    $http.post(url).then(function(msg){ 
    console.log(msg); 
    });  
} 

La demande est envoyé à Spring framework et fonctionne parfaitement lorsque j'utilise la forme, mais quand j'utilise Angular pour effectuer la même action, il me donne une erreur POST http://localhost:8080/login?username=admin&password=admin 404 (Not Found)

Quels changements dois-je faire? Je voudrais avoir parfaitement la même fonctionnalité de soumettre, que sur les fausses informations d'identification Spring framework me redirige sur une autre vue.

Answer 1

Je pense que vous ne devriez pas supprimer le formulaire, mais le changer en une forme pure angularjs avec un ngSubmit attribute (veillez à supprimer l'attribut d'action).

Comme ceci:

<form method="post" ng-submit="doLogin()"> 
    <input type="text" placeholder="Username" name="username"> &nbsp; 
    <input type="password" placeholder="Password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

Ensuite, dans votre contrôleur js, votre appel http est un appel de poste avec des paramètres passés comme un appel get (param1 = valeur1 & param2 = ...), changer votre appel pour passer les paramètres de connexion dans la publication. De cette façon, votre forme angularjs se comportera de la même manière que votre code précédent.