7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Angular

Creando una aplicación de blog usando Angular y MongoDB: Inicio de sesión

Read Time: 7 mins
This post is part of a series called Creating a Blogging App Using Angular & MongoDB.
Creating a Blogging App Using Angular & MongoDB: Home

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Angular es un framework integral para crear aplicaciones móviles y web empleando el mismo código reutilizable. A través del uso de Angular puedes dividir toda la aplicación en componentes reutilizables, lo que facilita el mantenimiento y la reutilización de código.

En esta serie de tutoriales aprenderás cómo comenzar a crear una aplicación web usando Angular con MongoDB como back-end. Para ejecutar el servidor usarás Node.js.

A lo largo de este tutorial construirás una aplicación de blog utilizando Angular, Node.js y MongoDB.

En este tutorial verás cómo comenzar a configurar la aplicación y crear el componente Login (Inicio de sesión).

Primeros pasos

Vamos a comenzar instalando la CLI de Angular.

Una vez que hayas instalado la CLI de Angular, crea una carpeta de proyecto llamada AngularBlogApp.

Desde la carpeta del proyecto, crea una nueva aplicación de Angular usando el siguiente comando:

Una vez que hayas creado la aplicación client (Cliente), navega a la carpeta del proyecto e instala las dependencias necesarias usando Node Package Manager (npm), o Administrador de Paquetes de Node.

Arranca el servidor cliente usando npm.

La aplicación deberá ejecutarse en http://localhost:4200/.

Configurando la aplicación

Tu aplicación web de Angular tendrá un componente raíz (root). Crea una carpeta llamada root dentro del directorio src/app. Crea un archivo llamado root.component.html y agrega el siguiente código HTML:

Añade un archivo llamado root.component.ts y agrega el siguiente código:

Elimina los archivos app.component.html, app.component.ts, app.component.scssapp.component.spec.ts. Tendrás solamente un archivo llamado app.module.ts dentro de la carpeta src/app.

Importa el RootComponent dentro del archivo app.module.ts.

Incluye al RootComponent en ngModules y ejecútalo.

Guarda los cambios y reinicia el servidor. Ahora el RootComponent aparecerá al cargar la aplicación.

Usaremos Router de Angular para el enrutamiento en nuestra aplicación de blog. Por lo tanto, importa las dependencias relacionadas con el enrutamiento en un nuevo archivo llamado app.routing.ts dentro del directorio src/app.

Define la ruta del enrutamiento junto con los componentes como se muestra a continuación:

Exporta las rutas para crear un módulo con todos los proveedores de enrutamiento.

El archivo app.routing.ts se ve de esta forma:

Como puedes ver en el código anterior, aún no has creado el LoginComponent. Éste se agrega para mayor claridad.

Importa la clase ROUTING en el archivo app.module.ts.

Inclúyela en la sección imports de NgModule.

Coloca RouterOutlet en la página root.component.html. Aquí es donde se representa el componente de la ruta.

Crea una carpeta llamada login dentro del directorio src/app. Dentro de la carpeta login, crea un archivo llamado login.component.ts y añade el siguiente código:

Crea un archivo llamado login.component.html y agrega el siguiente código:

Guarda los cambios anteriores y reinicia el servidor. El LoginComponent será mostrado de acuerdo a las rutas definidas al cargar la aplicación.

Login Component - Blogging AppLogin Component - Blogging AppLogin Component - Blogging App

Creando el Login Component (Componente de Inicio de sesión)

Ya has sentado las bases para el LoginComponent al configurar la aplicación. Vamos a crear la vista para el LoginComponent usando Bootstrap.

Descarga e incluye el estilo CSS de bootstrap en la carpeta assets e incluye la referencia en la página src/index.html.

Coloca un contenedor alrededor de app-root en la página index.html.

Agrega el siguiente código HTML a la página login.component.html.

Crea un archivo llamado login.component.css dentro de la carpeta login y agrega el siguiente estilo CSS.

Modifica el decorador @Component para incluir el estilo CSS.

Guarda los cambios anteriores e intenta cargar la aplicación. El LoginComponent aparecerá con la vista de inicio de sesión.

Login Screen Angular Blogging AppLogin Screen Angular Blogging AppLogin Screen Angular Blogging App

Creando el servicio de inicio de sesión

El LoginComponent necesitará interactuar con la base de datos para verificar si el usuario que inició sesión es válido o no. Por lo tanto necesitará hacer llamadas a APIs. Vamos a mantener la parte de interacción con la base de datos en un archivo separado llamado login.service.ts.

Crea un archivo llamado login.service.ts y agrega el siguiente código:

Importa el LoginService en el LoginComponent y agrégalo como proveedor en el decorador del componente.

Añade un método llamado validateLogin en el archivo login.service.ts que hará la llamada a la API. Esto se ve de la siguiente manera:

Como se observa en el código anterior, éste devuelve un observable que será suscrito en el archivo login.component.ts. El archivo login.service.ts se ve de la siguiente manera:

Implementando la validación de inicio de sesión de usuario

Agrega la directiva ngModel a los elementos de entrada en login.component.html.

Agrega un evento click al botón de inicio de sesión.

El archivo login.component.html modificado se ve de esta forma:

Define e inicializa la variable del usuario en el archivo login.component.ts.

El modelo User ha sido definido en la carpeta src/app/models. A continación se muestra cómo se ve:

Define un método llamado validateLogin que será invocado cuando se haga clic en el botón. El método se ve de la siguiente manera:

Cuando tanto el nombre de usuario como la contraseña hayan sido introducidos, el método validateLogin se suscribe al método LoginService para validar el inicio de sesión del usuario.

De esta manera se ve el archivo login.component.ts:

Concluyendo

En esta parte de la serie de tutoriales para crear una aplicación de blog en Angular viste cómo iniciar con la creación de una aplicación web usando Angular. Generaste la estructura básica de la aplicación de Angular y creaste el LoginComponent que permitirá al usuario validar su nombre de usuario y contraseña.

En la siguiente parte de esta serie de tutoriales escribirás la API REST para la validación del inicio de sesión del usuario y crearás el componente home.

El código fuente de este tutorial se encuentra disponible en GitHub.

Háznos llegar tus ideas y sugerencias en los comentarios a continuación.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.