Creación de una aplicación web desde cero usando AngularJS y Firebase: Parte 2

() translation by (you can also view the original English article)

En la primera parte de esta serie, vimos cómo empezar a crear una aplicación usando AngularJS y Firebase. Creamos nuestra página principal de inicio de sesión e implementamos la funcionalidad de registro con Firebase como back-end.

En este tutorial, llevaremos esta serie al siguiente nivel. Crearemos y configuraremos la página de registro y veremos cómo hacer las validaciones de los formularios en AngularJS.

Empecemos

Comencemos clonando la primera parte del tutorial desde GitHub.

1	git clone https://github.com/jay3dec/AngularJS_Firebase_Part1.git

Una vez que recuperes el código, ve al directorio del proyecto e instala las dependencias necesarias.

1	cd AngularJS_Firebase_Part1
2	npm install

Una vez instaladas todas las dependencias, inicia el servidor.

npm start

Accede a esta url http://localhost:8000/app/#/home y la aplicación debe ejecutarse.

Crea la pantalla de registro

Comenzaremos creando una página para que se registren los usuarios invitados. Entra a AngularJS_Firebase_Part1/app y crea una carpeta llamada register. Dentro de la carpeta register, crea los archivos register.html y register.js. Así se ve el archivo register.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign In</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
      </form>

    </div>

</body></html>

Utilizamos Bootstrap para nuestro diseño HTML. Como se ve en el anterior código HTML.

Dentro del archivo register.js, declararemos las rutas para que la aplicación acceda a la vista de registro. La ruta $routeProvider tiene un método llamado when, el cual usaremos para crear una ruta para nuestra vista de registro. Al definir una nueva ruta, estableceremos un archivo templateUrl que se representaría en index.html. Junto con eso, también estableceremos un controller para el $scope recién creado de la vista de registro. Un controlador es un lógico que controla una vista determinada. Así es como debería verse:

'use strict';

angular.module('myApp.register', ['ngRoute'])

// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/register', {
        templateUrl: 'register/register.html',
        controller: 'RegisterCtrl'
    });
}])

// Register controller
.controller('RegisterCtrl', [function() {

}]);

Ahora abre el archivo app.js e incluye el módulo de registro myApp.register en la aplicación.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home',
    'myApp.register'  // Newly added register route
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home

    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

Para mostrar la página de registro, necesitamos incluir el archivo register.js dentro del archivo de la plantilla HTML principal de la aplicación. Abre el archivo index.html e incluye lo siguiente:

1	<script src="register/register.js"></script>

Reinicia el servidor y accede a esta url http://localhost:8000/app/index.html#/register y deberías poder ver la pantalla de registro:

Luego debemos crear el enlace de la pantalla de registro a la pantalla de inicio de sesión. En home.html y register.html hay un sign up y sign in href respectivamente. Estableceremos los dos orígenes href para que sean accesibles desde ambas páginas.

En home.html:

1	<a href="#/register"> Sign Up<a/>

En el archivo register.html:

1	<a href="#/home"> Sign In<a/>

Validación de los formularios en AngularJS

Necesitamos validar algunas cosas cuando un usuario introduce su dirección de correo electrónico y contraseña en la pantalla de registro. Primero, la identificación del correo electrónico ingresado debe tener un formato de identificación de correo electrónico válido y, en segundo lugar, la contraseña ingresada debe tener una longitud mínima.

AngularJS proporciona FormController, el cual realiza un seguimiento de cada elemento dentro de un formulario. De los documentos de AngularJS:

FormController realiza un seguimiento de todos sus controles y formularios anidados, así como el estado de ellos, como válidos/no válidos o sucios/intactos.

FormController tiene algunas propiedades como $pristine, $dirty, $invalid, $valid, etc. Veremos cuáles son estas propiedades y usaremos algunas de estas propiedades para implementar la validación del formulario para nuestra página de registro.

En primer lugar, necesitamos modificar nuestro formulario HTML para agregar mensajes de validación. Modifica el formulario HTML tal y como se indica en el archivo register.html.

<form class="form-signin" name="regForm">
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p>Enter a valid email.</p>
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password">
        <p>Min password length is 8 characters.</p>
    </div>
    <button type="button" class="btn btn-lg btn-primary btn-block">Register</button>
</form>

Guarda los cambios, reinicia el servidor y actualiza la página register. Deberías ver una página como esta:

Como podemos ver en la pantalla anterior, los mensajes de validación están visibles. Solo tenemos que mostrarlos cuando el correo electrónico y la contraseña no son válidos.

AngularJS proporciona una directiva denominada ngShow para mostrar un HTML basado en una expresión determinada. (Una directiva AngularJS es un atributo HTML extendido proporcionado por AngularJS para mejorar las capacidades de los elementos). Por lo tanto, usaremos la directiva ngShow para mostrar el mensaje de validación cuando el correo electrónico de entrada tenga datos inválidos. Pero, ¿cómo sabemos si el correo electrónico de entrada no es válido? Bueno, recuerda las propiedades de FormController que discutimos anteriormente. FormController tiene una propiedad llamada $invalid que es True si un control no es válido. regForm.email.$invalid sería verdadero si el correo electrónico introducido no es válido. Por lo tanto, usaremos $invalid y ngShow para mostrar el mensaje de validación. Modifica el intervalo del mensaje de correo electrónico como te muestro a continuación:

1	<p ng-show="regForm.email.$invalid">Enter a valid email.</p>

Guarda los cambios, reinicia el servidor y ve a la página de registro. Verás que ya no se muestra el mensaje de validación para el identificador de correo electrónico. Ahora, intenta ingresar datos en el correo electrónico de entrada y aparecerá el mensaje de error. Intenta ingresar una dirección de correo electrónico válida y el mensaje de validación desaparecerá. Pero todavía aparece el mensaje para la longitud mínima de contraseña. Vamos a arreglarlo.

AngularJS proporciona otra directiva denominada ng-minlength para establecer la longitud mínima de cualquier control de entrada. Lo usaremos para establecer la longitud mínima en el campo de la contraseña, y luego usaremos la directiva ngShow para mostrar u ocultar el mensaje de validación. Modifica el campo de la contraseña para incluir la directiva ng-minlength así:

1	<input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">

Luego, modifica el intervalo de los mensajes de validación para el campo de la contraseña, así:

1	<p ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>

Por lo tanto, si la longitud mínima del campo de la contraseña no es según la longitud mínima establecida en el campo de entrada de la contraseña, entonces regForm.password.$error.minlength se establecerá en "true" y se mostrará el mensaje de validación.

Guarda todos los cambios, reinicia el servidor y ve a la página de registro. Intenta ingresar un valor para la contraseña y el mensaje de validación aparecerá hasta que la longitud de la contraseña sea 8.

Ahora podemos utilizar algunos estilos con el fin de resaltar los elementos de entrada no válidos. Mediante una directiva AngularJS llamada ngClass podemos resaltar dinámicamente los elementos de entrada defectuosos mediante la propiedad $invalid. Agrega la directiva ngClass al div primario de los elementos del correo electrónico y la contraseña.

<div class="form-group" ng-class="{ 'has-error' : regForm.email.$invalid }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p class="help-block" ng-show="regForm.email.$invalid">Enter a valid email.</p>
</div>

<div class="form-group" ng-class="{ 'has-error' : regForm.password.$invalid }">
    <label>Password</label>
    <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="8">
    <p class="help-block" ng-show="regForm.password.$error.minlength">Min password length is 8 characters.</p>
</div>

Guarda los cambios, reinicia el servidor e intenta ir a la página de registro. Ahora, en las entradas no válidas, los mensajes de validación se muestran así:

Validation messages showing on registration page

Como puedes ver en la pantalla anterior, en los errores de validación el botón Register está habilitado. Vamos a desactivarlo a menos que el correo electrónico y la contraseña ingresados sean válidos. AngularJS proporciona una directiva denominada ngDisabled que ayuda a deshabilitar los elementos en función de una expresión. Si se validan el email y password, se establecerán los modelos user.email y user.password. Entonces, usaremos estos dos objetos para habilitar/deshabilitar el botón de registro usando la directiva ngDisabled. Modifica el botón de registro HTML así:

1	<button type="button" ng-disabled="!user.email \|\| !user.password" class="btn btn-lg btn-primary btn-block">Register</button>

Como puedes ver, la directiva ng-disabled será verdadera si user.email o user.password no es falsa, que será el caso solo cuando los datos no sean válidos.

Guarda todos los cambios, reinicia el servidor y actualiza la página de registro. Como notarás, el botón Registrar está deshabilitado y permanecerá así, hasta que se introduzca una dirección de correo electrónico y una contraseña válidas.

Registration screen with Register button disabled

Validación de la pantalla de inicio de sesión

La implementación de la validación en la pantalla de inicio de sesión es bastante similar a la forma en que lo hicimos para la pantalla de registro. Te sugiero implementar la validación para la pantalla de inicio de sesión como un ejercicio. Si te bloqueas o te estancas, revisa el código HTML modificado para el formulario sign in en home.html como se muestra a continuación:

<form class="form-signin" name="signinForm" role="form">
    <div class="form-group" ng-class="{ 'has-error' : signinForm.email.$invalid }">
        <label>Email</label>
        <input type="email" name="email" class="form-control" ng-model="user.email">
        <p class="help-block" ng-show="signinForm.email.$invalid">Enter a valid email.</p>
    </div>
    <div class="form-group" ng-class="{ 'has-error' : signinForm.password.$invalid }">
        <label>Password</label>
        <input type="password" name="password" class="form-control" ng-model="user.password" ng-minlength="3">
        <p class="help-block" ng-show="signinForm.password.$error.minlength">Min password length is 8 characters.</p>
    </div>
    <label class="checkbox">
        <a href="#/register"> Sign Up</a>
    </label>
    <button ng-disabled="!user.email || !user.password" type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>
</form>

Para concluir

En esta parte del tutorial, creamos la página de registro y configuramos sus rutas. También vimos cómo implementar validaciones para la página de registro en AngularJS.

En la siguiente parte, nos centraremos en implementar la funcionalidad de registro y algunas otras características. El código fuente del tutorial anterior está disponible en GitHub.

!Déjanos conocer tu opinión en los comentarios!