✅
Introducción a Angular y Fundamentos
Desarrollo de Aplicaciones Modernas con Angular
Creando tu primer proyecto en Angular
Creación de componentes y rutas en Angular para gestión de tareas
String Interpolation en Angular: Transmisión de Datos a Templates
Modificación de Propiedades HTML con Angular: Property Binding
Eventos en Angular: click, doble click y cambio de input
Eventos de Teclado en JavaScript: Uso de KeyDown y Change
Reactividad Granular con Signals en Angular
Reactividad en HTML: Implementación de Signals en JavaScript
Estructuras de control en Angular
Estructuras de Control y Renderizado Dinámico en Angular
Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
Actualización de tareas con Angular y programación inmutable
Uso de ngIf y ngFor para control de flujos en Angular
Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
Manejo Avanzado de Formularios Reactivos en Angular
Validaciones de Inputs en Formularios Reactivos con Angular
Alistando tu aplicación para producción
Validación de formularios y estilos dinámicos en Angular
Activación dinámica de clases en Angular con validaciones
Edición de Tareas Dinámicas en Aplicaciones Web
Estados Computados en Programación Reactiva con Signals
Persistencia de Tareas con LocalStorage en Angular
Compilación y Optimización de Aplicaciones Angular para Producción
Lanzamiento de Aplicaciones con Fiverr Hosting y Angular
Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
Sintaxis y rendimiento de for y switch en JavaScript moderno
Migración Automática a Nueva Sintaxis de Angular
Componentes Reutilizables y Comunicación
Creación de Tienda en Línea con Angular y Tailwind CSS
Creación y Organización de Componentes en Angular
Componentes Reutilizables en Angular: Creación y Maquetado de Productos
Uso de Angular DevTools para Debugging en Angular
Inputs en Angular: Comunicación de Datos entre Componentes
Outputs en Angular: Comunicación del Hijo al Padre
Maquetación de Galería de Productos con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes en Angular
Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
Ciclo de Vida de Componentes en Angular: Eventos Clave
Detección de Cambios en Inputs con ngOnChange en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular
Creación de un Reproductor de Audio con WaveSurfer.js en Angular
Mejoras de la página About en e-commerce: audio y contador dinámico
Mejorando la interfaz del producto
Componentización y Manejo de Datos en Angular
Creación de Headers en Páginas Web con Angular
Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
Implementación de Reactividad en Carrito de Compras con Angular
Gestión de Carrito de Compras en Angular con ngOnChanges
Gestión de Estado en Angular: Solución al InputDrilling
Gestión de Estado Global en Angular con Servicios y Señales
Inyección de Dependencias en Angular: Conceptos y Prácticas
Integración y Datos
Conexión de Angular a REST API usando Fake Store API de Platzi
Creación de Alias para Imports Cortos en Proyectos JavaScript
Transformación de Datos con Pipes en Angular
Creación y uso de pipes personalizados en Angular
Manipulación de Fechas en Angular con Date Functions
Manipulación del DOM con Directivas en Angular
Deployment de Aplicaciones Angular en Vercel
Enrutamiento y Navegación
Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
Implementación de Router Link en Angular para SPA eficiente
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
Uso de RouterLinkActive en Angular para Navegación Activa
Routing en Angular: Creación de Páginas de Detalle de Producto
Consulta dinámica de detalles de producto con Angular y REST API
Galería de Productos Dinámica con Angular y TypeScript
Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en E-commerce
Filtros de Productos con Query Params en Angular
Optimización de Aplicaciones con Lazy Loading y Code Splitting
Optimización de JavaScript en Angular con Lazy Loading
Optimización de Carga de Chunks con Preloading en Angular
Migración de Angular a Nueva Sintaxis con ng generate
Despliegue de Aplicaciones con Verzal en Entornos Productivos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
59/71Recursos
¿Cómo estructurar sitios web con Angular utilizando layouts compartidos?
Cuando construimos un sitio web, especialmente uno grande como un e-commerce, la organización y mantenimiento del código es fundamental. Angular ofrece una solución eficiente a este desafío: los layouts compartidos. Esta técnica ofrece una manera estructurada de gestionar el contenido y la disposición de las páginas de manera eficiente.
¿Qué problema resuelve el uso de layouts compartidos?
La repetición de código es un problema común cuando el sitio crece y se necesitan más páginas. Imagina tener una estructura básica que se repite en cada página: un container, header y contenido. Realizar un cambio en esta estructura puede volverse tedioso si se debe modificar manualmente cada página. Aquí es donde entran en juego los layouts compartidos.
Angular permite crear una estructura común que las páginas pueden compartir, manteniendo solo el contenido específico a nivel individual. Así, podemos ajustar el layout base en un solo lugar y aplicar los cambios globalmente a todas las páginas que lo usan.
¿Cómo crear un layout compartido en Angular?
Para implementar layouts compartidos, comenzaremos por crear un componente llamado layout. Aquí pondremos la estructura básica que se repite. Este componente actuará como un contenedor de otras páginas.
ng generate component shared/components/layout
Una vez creado, añadiremos la parte repetitiva del layout como el header y, opcionalmente, un footer. Colocaremos un router-outlet para determinar dónde se inyectará el contenido específico de cada página.
<app-header></app-header>
<router-outlet></router-outlet>
<footer></footer>
¿Cómo configurar el routing para usar el layout?
Para que funcione correctamente, debemos configurar los routes y especificar que ciertas rutas usan este layout. El siguiente paso sería agregar un nuevo path base en la configuración de routing e incluir un array de rutas hijas (children) que adoptan este layout.
const routes: Routes = [
{
path: '',
component: LayoutComponent,
children: [
{ path: 'home', component: HomeComponent },
{ path: 'about', component: AboutComponent }
]
}
];
Así, conseguimos una estructura anidada donde el layout actúa como contenedor de estas rutas hijas. Las páginas solo manejan su contenido exclusivo, haciendo que los cambios en el layout se propaguen automáticamente.
¿Cómo optimizar el código eliminando redundancias?
A menudo, con layouts compartidos, es común olvidar limpiar las páginas individuales de códigos redundantes. Por ejemplo, ya no es necesario mantener un header en cada página de home o about, ya que estos componentes se manejan en el layout compartido.
// Antes de usar layout compartido
<app-header></app-header>
<div>Contenido específico de la página</div>
// Después de usar layout compartido
<div>Contenido específico de la página</div>
¿Qué ventajas ofrece la organización del código mediante layouts?
La implementación de layouts compartidos brinda una serie de ventajas importantes:
- Mantenimiento Simplificado: Un cambio en el diseño o estilo se aplica globalmente.
- Eficiencia: Las páginas mantienen solo el contenido específico, reduciendo redundancias.
- Escalabilidad: A medida que la aplicación crece, se mantiene organizada y se simplifica la extensión.
Si estás desarrollando con Angular, la adopción de layouts compartidos no solo te ahorrará tiempo, sino que también mejorará la arquitectura de tu aplicación. Al enfocar cambios en un solo punto de control, tu sitio no solo es más fácil de gestionar, sino que también es más resistente a errores y más rápido de desarrollar. ¡Anímate a integrar esta técnica en tus proyectos y experimenta la mejora en la eficiencia!
Aportes 6
Preguntas 1
Ordenar por:
Si estas usando Angular 18 o superior, ten esto en cuenta
¿Por qué importar `RouterOutlet` y no `RouterModule`?
En las versiones más recientes de Angular, al usar **standalone components**, Angular te permite importar solo las **partes específicas** del módulo que realmente necesitas. Dado que solo estás utilizando el `router-outlet`, no es necesario importar todo el `RouterModule`. Esto mejora la modularidad y el rendimiento de tu aplicación, importando solo lo que usas.
¿Y si mi header tiene diferentes comportamientos dependiendo del path aun se podría aplicar esto de vistas anidadas?
Es decir por ej. en el path "/" mi header puede tener un input de búsqueda pero si voy al path "/busqueda" en mi header ese input ya no debería aparecer.
Excelente feature, esta parte de las vistas anidadas las había escuchado pero no las había aplicado antes, muy interesante y sencillo de aplicar, además de la facilidad para hacer mantenimiento de la app.
¿Puedo también colocar otro \<router-outlet /> dentro de un componente interno?, ¿Estaría correcto hacerlo?, estaría colocando otra sección children dentro de un componente que ya está en un children.
```js
ng g c domains/shared/components/layout
```
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?