Bienvenidos sean a este post, hoy crearemos otra aplicacion en Angular.
En este post, crearemos una nueva aplicacion que nos servira con otras que crearemos en proximos posts y al mejor estilo MCU todo ira a un final tremendo pero eso es algo que veremos bastante mas adelante. Volviendo a este post, lo primero que haremos es ejecutar el siguiente comando:
$ ng new librosEsto dara comienzo a la creacion de la aplicacion, nos preguntara por el estilo que queremos usar y seleccionaremos scss, para compatibilidad con el proximo modulo que instalaremos. En la siguiente pregunta pueden usar Y o N, yo utilice la primera opcion pero es opcional y no influye en el codigo. Sobre cada uno de los detalles los hemos visto en los posts anteriores. Una vez finalizado ingresen al nuevo directorio y ya estamos listos para comenzar.
Lo siguiente sera ejecutar este comando:
$ ng add @angular/materialEste nos hara una pregunta para comenzar con la instalacion o no. Le responden que si y procedera a instalarlo. Una vez instalado nos hara algunas preguntas, sobre si usaremos algunos estilos predeterminados o uno personalizado (custom). En mi caso, elegi a Magenta/Violet. Asi como tambien si deseamos habilitarlo de forma global para angular y por ultimo, si deseamos incluir las animaciones. En ambos casos, elegi que si. Les dejo las opciones que elegi para este modulo:
$ ng add @angular/material
✔ Determining Package Manager
› Using package manager: npm
✔ Searching for compatible package version
› Found compatible package version: @angular/material@18.1.2.
✔ Loading package information from registry
✔ Confirming installation
✔ Installing package
? Choose a prebuilt theme name, or "custom" for a custom theme: Magenta/Violet
[Preview: https://material.angular.io?theme=magenta-violet]
? Set up global Angular Material typography styles? yes
? Include the Angular animations module? Include and enable animations
UPDATE package.json (1330 bytes)
✔ Packages installed successfully.
UPDATE src/app/app.config.ts (515 bytes)
UPDATE angular.json (2915 bytes)
UPDATE src/index.html (515 bytes)
UPDATE src/styles.css (181 bytes)
$Ya tenemos nuestro modulo de materiales instalado, este sera esencialmente para muchos aspectos esteticos, asi como tambien distintos elementos de nuestra pagina pero sobre esto hablaremos en un rato. A continuacion ejecutemos el siguiente comando:
$ npm install underscore @types/underscoreEste instalara el modulo y el archivo de declaracion de underscore. Este sera un modulo que usaremos cuando necesitemos trabajar con las interacciones en nuestro codigo pero al igual que el caso anterior lo veremos cuando lleguemos. Con esto realizado nuestro siguiente paso sera generar un componente, para ello ejecutaremos el siguiente comando:
$ ng generate component headerRecuerden que este nos genera cuatro archivos para las distintas acciones que podemos utilizar,en este post hablamos sobre componentes, y en este caso sera para crear el componente encargado del header de nuestra pagina. Nuestro siguiente paso sera ir a app.component.ts y lo modificaremos de la siguiente manera:
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HeaderComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'libros';
}En esta ocasion, solo hicimos dos modificaciones. La primera es la importacion de la clase del componente que generamos anteriormente y la segunda fue agregarla en la propiedad imports para poder utilizarla. La siguiente modificacion sera reemplazar el codigo de app.component.html por el siguiente:
<app-header></app-header>Con esto ya tenemos nuestro nuevo header implementado pasemos a trabajar sobre este. Para ello, primero iremos al archivo header.component.html y modificaremos el codigo existente de la siguiente manera:
<mat-toolbar color="primary">
<span>Venta de Libros</span>
<span class="espaciador"></span>
</mat-toolbar>Esto implementara la toolbar de material. Le pasamos el color que le asignaremos y en este tenemos dos span para mostrar el texto y otro con una clase para espaciar los elementos de esta. El siguiente paso sera ir a header.component.ts y modificaremos el codigo de la siguiente manera:
import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
@Component({
selector: 'app-header',
standalone: true,
imports: [MatToolbarModule],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {
}Al igual que en el archivo anterior agregamos primero la importacion de la clase encargada de la toolbar. La siguiente sera modificar imports para agregar esa clase. Con todo esto ya tenemos todo listo para poder implementarlo. Si lo ejecutan al proyecto y abren un navegador, este se vera de la siguiente manera:
Ya tenemos la base de nuestra aplicacion, pasemos a agregar un nuevo componente. Para ello, ejecutaremos el siguiente comando:
$ ng generate component detalles-userCon nuestro compomente generado, el siguiente paso sera modificar a header.component.html de la siguiente manera:
<mat-toolbar color="primary">
<span>Venta de Libros</span>
<span class="espaciador"></span>
<app-detalles-user></app-detalles-user>
</mat-toolbar>Este sera la implementacion del nuevo componente en nuestro header. El siguiente paso sera implementarlo y para ello iremos a header.component.ts y lo modificaremos de la siguiente manera:
import { Component } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { DetallesUserComponent } from
'../detalles-user/detalles-user.component';
@Component({
selector: 'app-header',
standalone: true,
imports: [MatToolbarModule, DetallesUserComponent],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {
}Primero, como siempre, importaremos al componente para poder acceder a su clase. Lo siguiente sera agregarlo en la propiedad imports para poder acceder desde nuestra pagina. Con esto ya tendriamos esto resuelto pero nos falta una configuracion mas. Para ello deben ir a header.component.scss y agregaremos el siguiente codigo:
.espaciador {
flex: 1 1 auto;
}Este es simplemente para dar una separacion al primer span y al nuevo complemento. Si lo prueban, veran el cambio pero vamos a continuar y lo veremos al final. Nuestra siguiente modificacion sera en detalles-user.component.html:
<span *ngIf="estaDentro" class="usuario-span">{{nombreUser}}</span>
<button *ngIf="estaDentro" mat-icon-button color="white">
<mat-icon>shopping_cart</mat-icon>
</button>
<button *ngIf="estaDentro" mat-icon-button color="white" (click)="salir()">
<mat-icon>logout</mat-icon>
</button>
<button *ngIf="!estaDentro" mat-icon-button color="white" (click)="entrar()">
<mat-icon>login</mat-icon>
</button>Aqui tendremos los componentes basicos que dispondremos en nuestra pagina. El primer span sera para mostrar el usuario que ingreso. Por el momento solo mostrara el nombre del mismo. Luego tenemos tres botones para distintas acciones. En cada uno usaremos el icono de material para identificarlo, siendo el primero para el carrito. El segundo sera para salir o «desloguear» a nuestro usuario. Y el tercero sera para ingresar o «loguearnos». Por el momento, el boton del carrito no tiene ninguna accion relacionada. En cambio los otros dos si, y sera asociar el evento click de cada uno a los metodos salir y entrar para cada accion detallada anteriormente. Si observan en cada uno de los casos usamos a ngIf. Estos son condicionales que seran utilizados para mostrar o no los distintos elementos. En el caso de que la variable estaDentro sea true las mostrara, salvo por el ultimo que solo la mostrara si ess false. Lo siguiente es implementar estos elementos. Para ello deben ir a detalles-user.component.ts y modificarlo de la siguiente manera:
import { Component, OnInit, EventEmitter } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
@Component({
selector: 'app-detalles-user',
standalone: true,
imports: [MatIconModule],
templateUrl: './detalles-user.component.html',
styleUrl: './detalles-user.component.scss'
})
export class DetallesUserComponent implements OnInit {
nombreUser: string = "";
estaDentro: boolean = false;
constructor() {}
ngOnInit(): void {}
entrar(){
console.log(`DetallesUserComponent : entrar()`);
}
salir(): void {
this.nombreUser = "";
this.estaDentro = false;
}
}Primero, modificaremos la primer linea para importar a la clases OnInit y EventEmitter desde el core. La primera clase la implementaremos en un momento y la segunda proximamente. La siguiente accion sera importar al modulo encargado de manejar los iconos antteriores. La siguiente modificacion es en la propiedad imports donde agregaremos al modulo de los iconos. Nuestra siguiente modificacion es en la clase que exportamos. Aqui la haremos implementar a OnInit para poder acceder a todos sus metodos y propiedades. Lo primero que haremos en esta clase sera definir dos propiedades. La primera es para el nombre del usuario y la segunda es para indicar cuando el usuario esta logueado o no, la del condicional en el html. Luego tenemos al construcctor que por el momento no hara nada y luego tenemos un metodo llamado ngOnInit que estara vacio. Este es utilizado para monitorear que todo fue iniciado correctamente por Angular. En nuestro caso sera en blanco pero se pueden agregar mas tareas adicionales. Lo siguiente es definir los dos metodos relacionado a los eventos de los botones. Por el momento, el metodo entrar solamente muestra un mensaje en la consola y el de salir resetea todos los valores de esas propiedades para indicar que salimos. Si lo prueban se vera de la siguiente manera:
Por el momento lo mostrara asi porque todavia no establecimos el tema de los condicionales. Nuestro siguiente paso sera implementar el service, el verdadero artifice de todo, y para ello primero ejecutaremos el siguiente comando:
$ ng generate service servicios/broadcastEsto no solo genera un servicio sino que tambien implementara una tecnica que vimos en este post como es el broadcast. Los servicios son los encargados de manipular los datos y las funciones y son parte clave del funcionamiento de angular. Sobre este tema hablamos en este post por si necesitan mas informacion. Nuestro siguiente paso sera ir a broadcast.service.ts y lo modificaremos de la siguiente manera:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
export interface IEventoBroadcast {
clave: ClaveEventos;
datos?: any;
}
export enum ClaveEventos {
TODOS = "Todos los eventos",
CLICK_BOTON_LOGIN = "click_boton_login",
EVENTO_USER_LOGIN = "evento_user_login"
}
@Injectable({
providedIn: 'root'
})
export class BroadcastService {
private busEvento = new Subject<IEventoBroadcast>();
broadcast(clave: ClaveEventos, datos: string) {
this.busEvento.next({clave, datos});
}
}Primero agregaremos una importacion de dos clases de rxjs. Estan son Observable y Subject, las cuales nos permitiran generar el broadcast en principio. Luego agregaremos una interfaz para manejar los eventos de broadcast. Esta poseera dos propiedades, siendo la primera para la clave del evento y la segunda para los datos. Este segundo no solo admitira cualquier tipo de dato sino que tambien sera opcional.
La segunda opcion que agregaremos sera un enum donde almacenaremos tres constantes que representaran las claves de los distintos eventos que manipularemos.. Y a su vez, seran los que pasaremos en la interfaz anterior para la propiedad clave. Observen que cada constante tiene un mensaje que lo representa. Nuestra siguiente modificacion sera en la clase. Primero crearemos un nuevo objeto de Subject con el nombre de busEvento, y este sera del tipo de la interfaz. Lo siguiente sera definir un metodo llamado broadcast, el cual recibira dos datos y mediante next los pasaremos. Esto ya veremos en un rato como trabaja pero debemos continuar con algunos temas mas. La siguiente modificacion sera en detalles-user.component.ts y modificaremos la clase DetallesUserComponent de la siguiente manera:
export class DetallesUserComponent implements OnInit {
nombreUser: string = "";
estaDentro: boolean = false;
constructor(private broadCast: BroadcastService) {}
ngOnInit(): void {}
entrar(){
console.log(`DetallesUserComponent : entrar()`);
this.broadCast.broadcast(ClaveEventos.CLICK_BOTON_LOGIN,
"DetallesUserComponent: CLICK_BOTON_LOGIN");
}
salir(): void {
this.nombreUser = "";
this.estaDentro = false;
}
}En esta ocasion, las modificaciones principales las haremos en el constructor donde agregamos una variable para iniciar un objeto del tipo del servicio de broadcast. Tambien modificamos al boton encargado del login donde mediante el metodo broadcast pasaremos la constante indicando que este es el boton de login y un mensaje de texto. Lo siguiente que haremos sera agregar el componente encargado del login. Para ello debemos ejecutar el siguiente comando:
$ ng generate component loginCon nuestro componente generado iremos al directorio y modificaremos a login.component.html de la siguiente manera:
<div class="login-contenedor">
<div *ngIf="loginForm">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<mat-form-field appearence="fill">
<mat-label>Usuario</mat-label>
<input matInput formControlName="usuario">
</mat-form-field>
<mat-form-field appearence="fill">
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password">
</mat-form-field>
<br>
<button id="boton_ingreso" mat-button color="primary" type="submit"
[disabled]="!esValido">Ingreso</button>
</form>
</div>
</div>Este va a ser el formulario o form que usaremos para ingresar el usuario y password para poder acceder a la aplicacion. Tenemos un div para contener todo y luego otro que sera para el formulario. En este segundo tenemos nuevamentet al condicional ngIf, y este basicamente sera para mostrarlo si loginForm tiene un valor o es valido. Dentro tenemos el form donde aplicaremos varios elementos de material pertenecientes a los form. Asi como otros elementos de material para dar un mejor estilo al form. Como indicamos tendra dos campos para poder ingresar el usuario y su contraseña. Tambien tenemos un boton para el ingreso que permanecera desactivado mientras esValido no sea true. Nuestro siguiente paso sera ir a login.component.ts y lo modificaremos de la siguiente manera:
import { Component, OnInit } from '@angular/core';
import { FormBuilder,FormControl,FormGroup,Validators } from '@angular/forms';
import { BroadcastService,ClaveEventos } from '../servicios/broadcast.service';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
@Component({
selector: 'app-login',
standalone: true,
imports: [ReactiveFormsModule, MatFormFieldModule,
CommonModule, MatInputModule,MatButtonModule],
templateUrl: './login.component.html',
styleUrl: './login.component.scss'
})
export class LoginComponent implements OnInit {
loginForm: FormGroup | null = null;
constructor(
private formBuilder: FormBuilder,
private broadCast: BroadcastService) {}
ngOnInit(): void {
this.buildForm();
}
buildForm() {
let form = {
usuario: new FormControl({}, Validators.required),
password: new FormControl({}, Validators.required)
}
let formEstado = {
usuario: {
value: "",
disabled: false
},
password: {
value: "",
disabled: false
}
}
this.loginForm = this.formBuilder.group(form);
this.loginForm.reset(formEstado);
}
esValido() {
return this.loginForm?.valid;
}
onSubmit() {
console.log(`onSubmit: usuario : ${this.loginForm?.value.usuario}`);
console.log(`onSubmit: password : ${this.loginForm?.value.password}`);
this.broadCast.broadcast(
ClaveEventos.EVENTO_USER_LOGIN,
this.loginForm?.value.usuario);
}
}Primero importaremos todos los modulos y clases necesarios para nuestra pagina de login. Al principio tendremos todos los necesarios para los eventos de inicio asi como tambien de broadcast que aplicaremos en un momento. Asi como tambien algunos elementos de formulario propios de angular. Y luego tendremos los distintos elementos dentro del form que seran de material. La siguiente modificacion es en imports donde agregaremos los modulos que deseamos importar a nuestra pagina.
Nuestra ultima modificacion sera en la clase donde primero implementaremos a OnInit para poder utilizarlo. La primera definicion sera del objeto loginForm que sera del tipo FormGroup o null. En el constructor tendremos dos elementos, el primero para el formulario y el segundo para nuestro servicio de broadcast. ngInit lo volvemos a usar para lo mismo que comentamos anteriorrmente pero esta vez para llamar a un metodo. Lo siguiente es definir a ese metodo, este se encarga de crear nuestro form. El primero se llamara form y poseera dos propiedaades. Estas propiedades seran para el usuario y la contraseña. Seran de tipo FormControl y se iniciaran vacios pero necesitan ser validados. Luego tenemos otro para el estado del form. En este manejaremos los valores del usuario y la password asi como tambien una propiedad para indicar si estan desactivados. La siguiente linea se encargara de crear nuestro form de Reactive mediante el llamado a la funcion group y la siguiente linea es para poder resetear los valores del estado. La ventaja de trabajar con el form por un lado y los estados por el otro, es la creacion del form una sola vez y poder resetear los valores unicamente por otro medio como otro boton.
Los siguientes dos metodos se encargan de manejar otros aspectos del form. El primero es para indicar que el form es valido, por esta razon a loginForm les pasa el valor valid. El segundo es para cuando realicemos el submit, donde mostrara en consola los valores enviados pero a su vez tambien haremos un broadcast sobre la realizacion de este evento. Para nuestra siguiente modificacion, debemos ir a app.component.html y modificarlo de la siguiente manera:
<app-header></app-header>
<mat-sidenav-container class="full-alto-contenedor">
<mat-sidenav #sidenav mode="over"
class="content-padding"
[fixedInViewport] = "true"
[fixedTopGap] = "60"
[fixedBottomGap] = "0"
[opened] = "false">
<app-login></app-login>
</mat-sidenav>
<mat-sidenav-content>
<div class="content-padding"> </div>
</mat-sidenav-content>
</mat-sidenav-container>
<router-outlet></router-outlet>Seguimos manteniendo el componente header pero ahora agregamos dos nuevos. El primero es un elemento de material que es utilizado para la navegacion en la pagina. Primero estableceremos un contenedor para todos los sidenav que usaremos. A este le aplicamos una clase que definiremos en breve, luego agregamos uno que sera solamente sidenav y luego varias propiedades para ubicar correctamente a nuestro elemento. Y aqui agregaremos al componente login definido anteriormente. Despues tenemos otro sidenav para contenido donde en algun momento agregaremos el resto del contenido pero por ahora lo dejaremos en blanco. Por ultimo tenemos otro componente mas pero es solamente para el ruteo correcto. Pasemos a modificar a app.component.scss de la siguiente manera:
.full-alto-contenedor {
position: absolute;
top: 60px;
bottom: 0;
left: 0;
right: 0;
background: #eee;
color: black;
}
.content-padding {
padding: 20px;
}
mat-sidenav {
width: 60%;
}Este es simplemente para aplicar algunas propiedades sobre los elementos de la pagina html de app. Nuestro siguiente paso sera volver a app.component.ts y modificaremos el codigo de la siguiente manera:
import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { BroadcastService, ClaveEventos } from './servicios/broadcast.service';
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav'
import * as _ from 'underscore';
import { LoginComponent } from './login/login.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, HeaderComponent, MatSidenav,
MatSidenavModule, LoginComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
title = 'libros';
@ViewChild("sidenav") sidenav: MatSidenav | null = null;
constructor(broadCast: BroadcastService) {
_.bindAll(this, "onLoginClicked", "onLoginEvento");
broadCast.on(ClaveEventos.CLICK_BOTON_LOGIN)
.subscribe(this.onLoginClicked);
broadCast.on(ClaveEventos.EVENTO_USER_LOGIN)
.subscribe(this.onLoginEvento);
}
onLoginClicked(ev: string) {
console.log(`AppComponent recibio: ${ev}`);
this.sidenav?.open();
}
onLoginEvento() {
this.sidenav?.close();
}
}La primera modificacion la hicimos en la importacion de los modulos. Primero agregamos los elementos para realizar el broadcast, asi como los elementos de navegacion de material (MatSidenav), un modulo que nos servira para unir a otros en la clase (underscore) y finalmente el componente de login que creamos anteriormente. En la propiedad imports agregamos algunos de los elementos de los modulos y el ultimo cambio lo haremos en la clase.
Lo primero que haremos sera definir una variable llamada sidenav del tipo MatSidenav y a este le aplicamos el decorador @ViewChild con el valor del atributo #sidenav. Esto lo establecera como null mientras no este cargado. Una vez cargado pasara a verse como un MatSidenav. En el constructor iniciaremos al objeto de broadcast. En este lo primero que haremos sera utilizar a bindAll de underscore para vincular los dos metodos pasados como argumentos a this y asegurar que siempre utilicemos el objeto creado. Luego tenemos dos llamados al metodo on del objeto de broadcast y le pasaremos los dos eventos posibles, y en cada caso nos suscribiremos para enviar el metodo correspondiente. En el metodo onLoginClicked recibiremos un dato, lo mostraremos en la consola y luego abriremos el sidenav. En el segundo metodo, solo lo cerraremos. Nuestro siguiente paso sera volver a broadcast.service.ts y modificaremos el codigo de la siguiente forma:
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
export interface IEventoBroadcast {
clave: ClaveEventos;
datos?: any;
}
export enum ClaveEventos {
TODOS = "Todos los eventos",
CLICK_BOTON_LOGIN = "click_boton_login",
EVENTO_USER_LOGIN = "evento_user_login"
}
@Injectable({
providedIn: 'root'
})
export class BroadcastService {
private busEvento = new Subject<IEventoBroadcast>();
broadcast(clave: ClaveEventos, datos: string) {
this.busEvento.next({clave, datos});
}
on(clave: ClaveEventos): Observable<string> {
return this.busEvento.asObservable().pipe(
filter(ev => ev.clave === clave ||
ev.clave === ClaveEventos.TODOS),
map(ev => ev.datos));
}
}Son pocas las modificaciones pero la primera es la importacion del modulo de los operadores de rxjs para poder enviar informacion mediante la suscripcion, sobre esto hablamos en este post, y la siguiente modificacion la hicimos en la clase. En este caso, agregamos el metodo on para que manipule los eventos que trabajamos. Para ello, tiene un argumento de tipo ClaveEventos. Este metodo sera de tipo Observable y devolvera un objeto de este tipo. El intercambio lo haremos mediante pipe pero el valor a enviar se obtendra mediante filter donde en base al evento informado pasaremos sus datos mediante el map. Ya tenemos el metodo encargado de enviar los datos a las suscripciones y si lo probamos funcionara perfectamente pero todavia nos falta un detalle. Para ello, debemos ir detalles-user.component.ts y modificaremos el codigo de la siguiente manera:
import { Component, OnInit, EventEmitter } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { BroadcastService, ClaveEventos } from '../servicios/broadcast.service';
import * as _ from 'underscore';
@Component({
selector: 'app-detalles-user',
standalone: true,
imports: [MatIconModule, CommonModule],
templateUrl: './detalles-user.component.html',
styleUrl: './detalles-user.component.scss'
})
export class DetallesUserComponent implements OnInit {
nombreUser: string = "";
estaDentro: boolean = false;
constructor(private broadCast: BroadcastService) {
_.bindAll(this,"loginExitoso");
this.broadCast.on(ClaveEventos.EVENTO_USER_LOGIN)
.subscribe(this.loginExitoso);
}
ngOnInit(): void {}
entrar(){
console.log(`DetallesUserComponent : entrar()`);
this.broadCast.broadcast(ClaveEventos.CLICK_BOTON_LOGIN,
"DetallesUserComponent: CLICK_BOTON_LOGIN");
}
loginExitoso(ev: any): void {
console.log(`DetallesUserComponent.loginExitoso: ${ev}`);
this.nombreUser = ev;
this.estaDentro = true;
}
salir(): void {
this.nombreUser = "";
this.estaDentro = false;
}
}En este caso, las modificaciones no son pocas. La primera es importar a CommonModule, la cual tambien utilizamos anteriormente pero no comentamos para que sirve. Esta entre otras cosas es la encargada de manejar el condicional ngIf que usamos en algunas paginas y este debemos agregarlo a la propiedad imports del componente. La siguiente es importar al modulo de underscore, para volver a utilizar a bindAll. Este lo volvemos a usar en el constructor y para unir al objeto que se crea de esta clase, this, con el metodo loginExitoso. Lo siguiente sera definir el metodo que usamos con bindAll. Este recibira un argumento que representara el evento. Este lo mostraremos en la consola pero tambien estableceremos el valor de nombreUser, asi como tambien estaDentro. Basicamente para indicar que estamos logueados correctamente. Con esto ya tenemos nuestra aplicacion completa y podemos pasar a probarla:
En el video podemos ver como solo tenemos la opcion de login. Al apretar el boton de login, nos aparece la opcion para ingresar nuestro usuario y password. Una vez ingresado, este nos aparece arriba junto a los botones de carrito y logout o salir. El de carrito por el momento no hara nada pero el de logout nos elimina los datos, los botones anteriores y vuelve el de login. Veamos como quedo la consola:
Observen como nos aparecen los distintos movimientos, asi como tambien los datos de ingreso. Con esto tenemos una aplicacion basica de ingreso pero que en los proximos posts la iremos complementando con otras. Antes de finalizar les dejo un link con todos los codigos y archivos del proyecto:
En resumen, hoy hemos creado otra aplicacion en Angular, volvimos a aplicar mucho de lo visto anteriorrmente, y si bien ya hemos creado una, esta se centro en mas en la autenticacion del usuario para hacer compras, ya que la usaremos para otras aplicaciones, y por el momento solamente fue un repaso de lo visto previamente. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donatión
It’s for site maintenance, thanks!
$1.50
El blog de Tinchicus 