Cómo usar angularJS con el controlador de resorte para crear una página de inicio de sesión

Angular JS sigue MVC del lado del cliente. Por lo tanto, defina su controlador, vista y servicio por separado en el lado del cliente.

En primer lugar, exponga el recurso REST a través del controlador de primavera .

@RequestMapping (value = “/ validate”, method = RequestMethod.POST)
Public ResponseEntity validate (@RequestBody String userString, solicitud HttpServletRequest) {
Usuario de mapa = nuevo Gson (). FromJson (userString, Map.class); userService.validateUser (usuario, solicitud);
return new ResponseEntity (HttpStatus.OK);
}

En su página html, defina su aplicación y cree formularios html normales

use ng-submit que llamará a su método definido en el controlador en lugar de enviar el formulario.

Ahora crea tu controlador

var Aplicación = angular.module (‘aplicación’, []);
App.controller (‘userController’, [‘$ scope’, ‘userService’,
función ($ scope, userService) {
$ scope.login = function () {
userService.postUserData ($ scope.user) .then (
función (d) {
// después de iniciar sesión es exitoso
});
};

Ahora defina su servicio angular de la siguiente manera:

App.factory (‘userService’, función ($ http, $ q) {
regreso {

postUserData: function (usuario) {
var config = {
encabezados: {
‘Content-Type’: ‘application / json’
}
}
return $ http.post (‘validar’, usuario, config)
.luego(
función (respuesta) {
return response.data;
},
función (errResponse) {
alerta (errResponse.status + ‘:’ + errResponse.statusText);
return $ q.reject (errResponse);
});
});

Referencias

Integración Spring Mvc Angularjs

  1. Crear login.html o login.jsp
  2. Incluya los scripts en su encabezado o pie de página
  1. Archivo de biblioteca central angular
  2. Tus scripts (app.js)
  • Cree el módulo angular de la aplicación dentro de su página de inicio de sesión
  • 4. Asigne el modelo a sus elementos de formulario

    5. Agregue reglas de validación a sus elementos de formulario como

    necesario

    6. Agregue ng-submit a su etiqueta de formulario y asígnele una función para procesar al enviar

    7. Cree el módulo angular y el controlador en app.js

    var myApp = angular.module (‘appName’, []);

    myApp.controller (‘ControllerName’, [‘$ scope’, function ($ scope) {

    $ scope.processForm = function () {

    // Haz la validación

    // Puede obtener los datos del formulario en el objeto $ scope.user

    // Si la validación se realiza correctamente, pase los datos al controlador de Spring utilizando ajax y realice la validación del lado del servidor

    // De lo contrario, se muestran los errores

    };

    }]);

    Lea más sobre la validación de formularios con AngularJS.

    He usado la versión angular 1.

    Espero que esto te haya dado una ventaja!

    ¡Aclamaciones!

    Su plantilla se puede mover a AngularJS, que luego unirá el objeto propietario a la plantilla AngularJS . Para que Spring MVC convierta su objeto devuelto (que debe ser serializable) en un objeto JSON, puede usar la biblioteca de serialización Jackson2 que es parte de la dependencia de Spring MVC .

    Para saber más visite Learnvern.