Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Sistema de rutas en Angular
Pipes
Creación y validación de formularios reactivos
Guía de laboratorio
Página 1 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Sistema de rutas en Angular
Crearemos una aplicación angular con varios componentes, luego enlazaremos
estos componentes utilizando la herramienta de enrutamiento de Angular.
CREACIÓN Y EJECUCIÓN DEL PROYECTO
- En el explorador de Windows, crear una carpeta para el proyecto. Para nuestro ejemplo
será D:\proyectos2
- Abrir una terminal de Windows en la carpeta proyectos2.
- Ejecutar el siguiente comando para crear el proyecto llamado app-angular:
ng new app-angular
Seleccionar las siguientes opciones:
Formato de hoja de estilo : Sass
Activar renderizado en el lado del servidor : N (se renderizará en el cliente)
Se ha creado el proyecto con los archivos y paquetes necesarios para su
funcionamiento.
- Ingresar a la carpeta del proyecto app-angular
cd app-angular
Página 2 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
- Instalar las dependencias necesarias para ejecutar la aplicación.
npm install
- Abrir el proyecto en VS Code.
- Abrir una terminal en VS Code e ingresar a la carpeta app-angular
- Ejecutar la aplicación, a través del servidor de desarrollo instalado en la
computadora y proporcionado por Angular.
ng serve --open
Página 3 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
La aplicación se abrirá en el navegador, a través de una URL que es el puerto local
4200.
[Link]
CREACIÓN DE COMPONENTES
Crearemos las páginas a los cuáles se accederán desde un menú de enlaces.
- Crear 3 componentes: inicio, primero y segundo en la carpeta páginas.
ng g c paginas\inicio
ng g c paginas\primero
ng g c paginas\segundo
- Verifique los componentes creados.
Página 4 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
CREACIÓN DEL MENÚ
Para enlazar los componentes creados, construiremos el siguiente menú con tres
elementos en el componente principal de la aplicación:
Para iniciar, debe modificar el contenido de los componentes, editando los archivos html:
[Link]
<h2>Componente inicio</h2>
<p>Contenido del componente inicio ...</p>
[Link]
<h2>Componente primero</h2>
<p>Contenido del componente primero ...</p>
[Link]
<h2>Componente segundo</h2>
<p>Contenido del componente segundo ...</p>
ESTABLECIENDO LAS RUTAS
Al crear la aplicación, se realiza la configuración automática del enrutamiento, en los
archivos [Link] y [Link].
Sin embargo, es necesario establecer las rutas en [Link].
[Link]
En este archivo ya se importó automáticamente Routes y se ha definido el objeto
constante routes del tipo Routes, al cual se le asigna una matriz vacía.
A continuación, debe realizar las siguientes tareas:
- Importar los 3 componentes.
- Establecer las rutas (usar un path vacío para la raíz, donde se puede mostrar el
componente inicio).
Página 5 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
import { Routes } from '@angular/router';
import { InicioComponent } from './paginas/inicio/[Link]';
import { PrimeroComponent } from './paginas/primero/[Link]';
import { SegundoComponent } from './paginas/segundo/[Link]';
export const routes: Routes = [
{
path:'',
component: InicioComponent
}
,
{
path:'primero',
component: PrimeroComponent
}
,
{
path:'segundo',
component: SegundoComponent
}
];
[Link]
En este archivo se observa que, ya se importó automáticamente la función
provideRouter, que es un proveedor utilizado para configurar las rutas de la aplicación.
Se importó también el objeto routes (array de rutas), definido en [Link].
Además, hay una constante llamada appConfig del tipo ApplicationConfig, con la
configuración global de la aplicación, y con los proveedores de Angular. Se tiene también
el arreglo de proveedores providers, donde se pasa la matriz de enrutamiento routes a
la función provideRouter.
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './[Link]';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
};
Página 6 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
[Link]
En este archivo debemos incluir RouterLink, que permite realizar el enrutamiento
evitando el refresco de toda la página. No es conveniente el uso de <a href=""> porque
refrescará toda la página, es decir, recargará todos los componentes.
- Importar RouterLink
import { RouterOutlet, RouterLink } from '@angular/router';
….
@Component({
selector: 'app-root',
imports: [RouterOutlet,RouterLink],
….
[Link]
- En esta plantilla, crear el menú con los enlaces a los componentes.
<h1>Componente Principal</h1>
<nav>
<a routerLink="">Inicio</a> |
<a routerLink="primero">Primero</a> |
<a routerLink="segundo">Segundo</a>
</nav>
<router-outlet />
Ejecutar la aplicación:
ng serve --open
Note que, el componente inicio se carga en el path raíz (localhost:4200)
Página 7 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Al inspeccionar la aplicación, podemos observar que al hacer clic en un enlace se evita la
recarga toda la página. <router-outlet /> permite renderizar solo el contenido en esa
etiqueta.
EJERCICIO:
En [Link], utilice <a href=""> para realizar los enlaces, en lugar de
<a routerLink="">
Ejecute la aplicación.
Active la herramienta de inspección y haz clic en los enlaces, ¿Qué observa? Explique
y comente.
PÁGINA NO ENCONTRADA
Se utiliza en situaciones donde un usuario intenta acceder a una página que no existe,
ingresando directamente una ruta en el navegador, sin usar los enlaces.
- Crear un componente para la página.
ng g c paginas\pagnoencontrada
[Link]
- Aquí, debe editar el contenido del html.
<p>página no encontrada 404</p>
Página 8 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
[Link]
- En este archivo debe importar el componente de pagnoencontrada.
- Además, debe agregar en la parte final, la ruta a las páginas no encontradas. El orden
de las rutas es importante.
...
import { PagnoencontradaComponent } from './paginas/pagnoencontrada/[Link]';
export const routes: Routes = [
,
{
path:'**',
component: PagnoencontradaComponent
}
];
Ejecutar la aplicación e ingresar una ruta a una página que no existe.
ng serve --open
RUTAS ANIDADAS
Se utilizan en situaciones donde se desea desplegar una barra de navegación secundaria al
seleccionar un enlace de la barra de navegación principal. Los componentes se renderizan
en esta sección sin salirse del componente.
Como ejemplo, crearemos los enlaces Primero-A y Primero-B que se mostrarán al
seleccionar el enlace primero. Además, al seleccionar el enlace Primero-A, debe mostrar
su contenido.
Página 9 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
- Crear 2 componentes:
ng g c paginas\primero-a
ng g c paginas\primero-b
Editar los contenidos de los componentes creados
[Link]
<h3>Componente primero-a</h3>
<p>Contenido del componente primero-a</p>
[Link]
<h3>Componente primero-b</h3>
<p>Contenido del componente primero-b</p>
[Link]
Se debe usar <router-outlet> para que los componentes se rendericen sin salirse del
componente primero.
- En este archivo se debe importar RouterOutlet, además de RouterLink y
RouterLinkActive para los enlaces con estilos.
import { Component } from '@angular/core';
import { RouterOutlet,RouterLink, RouterLinkActive } from '@angular/router';
@Component({
selector: 'app-primero',
imports: [RouterOutlet,RouterLink, RouterLinkActive],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class PrimeroComponent {
}
[Link]
- Importar los componentes PrimeroAComponent y PrimeroBComponent
- Agregar las rutas en el componente Primero.
Página 10 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
-
import { Routes } from '@angular/router';
import { InicioComponent } from './paginas/inicio/[Link]';
import { PrimeroComponent } from './paginas/primero/[Link]';
import { SegundoComponent } from './paginas/segundo/[Link]';
import { PagnoencontradaComponent } from './paginas/pagnoencontrada/[Link]';
import { PrimeroAComponent } from './paginas/primero-a/[Link]';
import { PrimeroBComponent } from './paginas/primero-b/[Link]';
export const routes: Routes = [
{
path: '',
component: InicioComponent
}
,
{
path: 'primero',
component: PrimeroComponent,
children: [
{
path: 'primero-a',
component: PrimeroAComponent
},
{
path: 'primero-b',
component: PrimeroBComponent
}
]
}
,
{
path: 'segundo',
component: SegundoComponent
}
,
{
path: '**',
component: PagnoencontradaComponent
}
];
[Link]
- En esta plantilla agregar una base de navegación, incluyendo los estilos en cascada.
<nav>
<a routerLink="primero-a" routerLinkActive="activebutton" class="button">Primero-A</a>
<a routerLink="primero-b" routerLinkActive="activebutton" class="button">Primero-B</a>
</nav>
<router-outlet></router-outlet>
Página 11 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
[Link]
- En este scss crear las hojas de estilo para el componente.
.button {
background: #f5f3f3;
border-radius: 4px;
border: 1px solid #100888;
display: inline-block;
color: #666666;
font-size: 14px;
padding: 8px 20px;
text-decoration: none;
outline: 0;
margin: 0px 10px;
}
.activebutton {
background: #100888;
border: 1px solid #f5f3f3;
color: #ffffff;
}
Ejecutar el proyecto:
ng serve --open
Se observa base de navegación principal y una secundaria. Al seleccionar el enlace
Primero, se despliegan los dos botones hijos, en este caso, Primero-A y Primero-B.
Página 12 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Pipes en Angular
Recordemos que los pipes son funciones que aceptan valores de entrada, los
transforman y retornan dicho valor transformado.
En este ejemplo, utilizaremos los siguientes pipes:
UpperCasePipe
LowerCasePipe
TitleCasePipe
DatePipe
CurrencyPipe
PercentPipe
DecimalPipe
Para usar Pipes básicos integrados como DatePipe, UpperCasePipe,
LowerCasePipe, no es necesario importar nada manualmente, ya que estos
Pipes vienen incluidos en el módulo básico de Angular llamado
CommonModule.
Sin embargo, si se utiliza componentes standalone, se requiere importar
explícitamente el módulo CommonModule que contiene los Pipes básicos.
Trabajaremos en el componente inicio, creado en el proyecto anterior.
[Link]
- Importar el módulo CommonModule
- Definir dos propiedades, mensaje y miFecha.
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-inicio',
imports: [CommonModule],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class InicioComponent {
mensaje ="bUeNas tArdEs";
miFecha = new Date();
Página 13 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
[Link]
Al aplicar los pipes en el template, se renderizan en la aplicación con valores
transformados.
Para el caso de fechas, se renderizan en función del formato proporcionado.
- Aplicar los pipes para los siguientes casos:
o Mostrar el mensaje y las fechas en formatos distintos
o Transformar números a porcentajes
o Establecer número de enteros y decimales para números.
<p>{{mensaje | uppercase }}</p>
<p>{{mensaje | lowercase }}</p>
<p>{{mensaje | titlecase }}</p>
<p>{{miFecha | date}}</p>
<p>{{miFecha | date:"short"}}</p>
<p>{{miFecha | date:"MMMM d, y"}}</p>
<!-- Aplicando varios pipes a miFecha-->
<p>{{miFecha | date:"fullDate" | uppercase}}</p>
<!-- Aplicando PercentPipe-->
<p> {{0.5678 | percent}}</p>
<!-- Aplicando DecimalPipe con nro enteros y decimales-->
<p> {{256.9456 | number: "1.0-2"}}</p>
Ejecutar el proyecto:
ng serve --open
Página 14 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
EJERCICIO:
Crear el componente tercero en la aplicación.
Dar ejemplos de uso de Pipes, definiendo algunas propiedades en la clase de este
componente y renderizando los valores en el html (5 ejemplos como mínimo, distintos
a los presentados en la guía). Utilice la siguiente documentación:
• Tipos de Pipes: [Link]
• Formatos Pipes para fechas:
[Link]
Ejecutar la aplicación.
Página 15 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Formularios reactivos
Crearemos un formulario para recoger los siguientes datos personales de un usuario: nombre,
apellido, distrito y provincia. Se accederá al formulario a través de un enlace creado en el
componente principal.
- Crear el componente formreactivo en carpeta forms
ng g c forms\formreactivo
AGREGAR UNA RUTA
[Link]
- Importar el componente formreactivo
- Agregar una nueva ruta para este nuevo componente.
...
import { FormreactivoComponent } from
'./forms/formreactivo/[Link]';
export const routes: Routes = [
...
{
path: 'segundo',
component: SegundoComponent
}
,
{
path: 'formreactivo',
component: FormreactivoComponent
}
,
];
Página 16 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
CREAR EL ENLACE
[Link]
- En este archivo, agregar un enlace al formulario.
<a [routerLink]="['formreactivo']">Formulario</a>
Cuando el enlace se crea con corchetes, se interpreta el valor como un valor de TypeScript.
Esto se usa para construir rutas con arreglos o variables, de forma dinámica.
Cuando un enlace se crea sin corchetes, se interpreta el valor como una cadena de texto
literal. Se usa para enlaces fijos y estáticos:
<a routerLink="formreactivo">Formulario</a>
Ejecutar la aplicación:
ng serve --open
CREAR EL FORMULARIO (ANIDADO)
[Link]
Es la clase del componente donde se define el modelo del formulario reactivo (userForm).
- Importar ReactiveFormsModule, el módulo para formularios reactivos.
- Importar FormControl, un control que representa campo individual en un formulario,
como un input de texto o checkbox, etc. Rastrea el valor y estado de un campo del
formulario.
- Importar FormGroup, una colección de controles que permite gestionar múltiples
campos y sus validaciones (por ejemplo, un formulario).
- En la clase FormreactivoComponent crear el formulario reactivo con FormGroup y
FormControl.
• userForm: Es una instancia de FormGroup, que representa todo el formulario.
• new FormGroup({ ... }): Define un formulario que agrupa múltiples controles.
• nombre y apellido son campos individuales gestionados por FormControl.
• Cada FormControl se inicializa con un valor vacío ('').
• direccion: es otro FormGroup anidado dentro de userForm.
dirección contiene dos FormControl: distrito y provincia.
Página 17 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
- Crear el método guardar(), que se ejecutará como respuesta a un evento (clic).
Este método imprimirá en la consola el estado actual del formulario completo en
formato JSON (se puede ver el resultado con la herramienta de inspección).
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-formreactivo',
imports: [ReactiveFormsModule],
templateUrl: './[Link]',
styleUrl: './[Link]'
})
export class FormreactivoComponent {
userForm = new FormGroup({
nombre : new FormControl(''),
apellido: new FormControl(''),
direccion: new FormGroup({
distrito: new FormControl(''),
provincia: new FormControl(''),
})
});
guardar(){
[Link]([Link]);
}
}
[Link]
Aquí se realiza el enlace entre el modelo del formulario y la vista (vinculación bidireccional,
cualquier cambio en el control se reflejará automáticamente en la vista y viceversa).
• En la plantilla, se usa la directiva [formGroup] y formControlName para enlazar el
modelo con la vista.
• [formGroup]="userForm": asocia todo el formulario HTML con el FormGroup
definido en el componente.
• formControlName="nombre": enlaza el campo del formulario con el FormControl
correspondiente en el modelo.
• (ngSubmit)="guardar()": Asocia el evento de envío del formulario con el método
guardar() del componente.
Página 18 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
<h2>Datos del usuario</h2>
<form [formGroup]="userForm" (ngSubmit)="guardar()">
<p><label for="nombre">Nombre </label>
<input type="text" formControlName="nombre">
</p>
<p><label for="apellido">Apellido </label>
<input type="text" formControlName="apellido">
</p>
<div formGroupName="direccion">
<p><label for="distrito">Distrito </label>
<input type="text" formControlName="distrito">
</p>
<p><label for="provincia">Provincia </label>
<input type="text" formControlName="provincia">
</p>
</div>
<button type="submit">Guardar</button>
</form>
Sincronización entre Modelo y Vista (Data Binding):
• Entrada de Datos: cuando el usuario escribe en un campo input, el valor del
FormControl correspondiente en userForm se actualizará automáticamente.
• Lectura de Datos: al acceder a [Link], se obtiene un objeto JSON con los
valores actuales del formulario.
[Link]
- Agregar el método mostrarvalores(), que imprimirá los datos ingresados, en formato
JSON.
mostrarvalores(){
return [Link]([Link], null, 2);
}
[Link]
- Agregar las etiquetas (a continuación de </form>) para mostrar los valores ingresados.
<!-- Mostrando los valores del form -->
<pre>{{ mostrarvalores() }}</pre>
Ejecutar la aplicación:
ng serve --open
Página 19 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
CREACIÓN y VALIDACIÓN DE FORMULARIO CON FormBuilder
El servicio FormBuilder de Angular simplifica y optimiza la creación de formularios reactivos al
reducir la sintaxis repetitiva.
Este servicio elimina la necesidad de instanciar manualmente FormControl y FormGroup para
cada campo.
Además, facilita la adición de validaciones y campos.
Modificaremos la clase del componente.
[Link]
- Importar FormBuilder y Validators
- Modificar la clase FormreactivoComponent
- Definir como obligatorio el ingreso de nombre, apellido y distrito.
Página 20 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
import { FormBuilder, Validators } from '@angular/forms';
...
export class FormreactivoComponent {
//declara una propiedad llamada userForm de tipo FormGroup
userForm: FormGroup;
// inyección de dependencias (formBuilder en el constructor)
constructor(private fb: FormBuilder) {
[Link] = [Link]({
nombre: ['', [Link]],
apellido: ['', [Link]],
direccion: [Link]({
distrito: ['', [Link]],
provincia: ['']
})
});
}
guardar() {
[Link]([Link]);
}
...
}
[Link]
- Modificar el botón Guardar para que inicialmente esté deshabilitado. Se habilitará al
ingresar el nombre, apellido y distrito.
<button type="submit" [disabled]="![Link]">Guardar</button>
Ejecutar la aplicación:
ng serve --open
Inicialmente el botón Guardar está deshabilitado. Luego de ingresar los datos, se habilita.
Página 21 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
CREANDO MENSAJES DE ALERTA
Cuando los valores de entrada no cumplen los criterios de validación, los mensajes de error
se muestran a nivel de campo en el formulario adaptable.
En este ejemplo, modificaremos el html del formulario para incluir estos mensajes.
[Link]
- Agregar la siguiente expresión para el mensaje de alerta:
@if ([Link]('nombre')?.invalid && [Link]('nombre')?.touched) {
<div class="alert">
El nombre es obligatorio
</div>
}
• @If oculta el elemento del DOM cuando la condición es falsa.
• [Link]('nombre') se utiliza para acceder al control.
• (?.) es el operador de acceso seguro. Previene errores si el control no está definido
en algún momento.
• invalid: Comprueba si el control es inválido.
• touched: Solo muestra el error después de que el usuario haya interactuado con el
campo.
<form [formGroup]="userForm" (ngSubmit)="guardar()">
<p><label for="nombre">Nombre </label>
<input type="text" formControlName="nombre">
</p>
@if ([Link]('nombre')?.invalid && [Link]('nombre')?.touched) {
<div class="alert">
El nombre es obligatorio
</div>
}
...
<button type="submit" [disabled]="![Link]">Guardar</button>
</form>
[Link]
- Agregar los estilos para aplicar un formato al mensaje de alerta.
.alert{
font-size: 14px;
font-family: cursive;
color: red;
}
Página 22 de 23
Taller: Crea Apps Web como un Pro: Domina
[Link] y Angular
Ejecutar la aplicación:
ng serve --open
Al inicio, el mensaje de alerta está oculto. Luego se muestra, al hacer clic en el campo Nombre
y pasar al campo Apellido. Finalmente, al ingresar un nombre, el mensaje se oculta.
EJERCICIO:
Crear un formulario en Angular para recoger los siguientes datos:
o Nombre de usuario
o Password
o Email
o Teléfono
o Estado Civil (desde un select)
Realizar las validaciones, incluyendo mensaje de alerta para cada campo.
Ejecutar la aplicación
Página 23 de 23
