Temario del curso

1 - Introducción a Angular y preparación del entorno
Objetivo
Identificar los conceptos fundamentales de Angular y describir el proceso de preparación del entorno de desarrollo.
Duración de la unidad
2 Horas 45 Minutos
Contenido
Introducción a Angular y preparación del entorno
1.1. ¿Qué es Angular y qué resuelve?
1.2. Historia y evolución breve
1.3. Relevancia actual
1.4. Comparación rápida
1.5. Ejemplo práctico: arquitectura orientada a componentes
1.6. Beneficios para empresas y equipos
1.7. Angular: fundamentos clave
1.8. El corazón de Angular: los componentes
1.9. Inyección de dependencias (Dependency Injection – DI)
1.10. ¿Qué significa el scope de un servicio?
1.11. Tipado estricto con TypeScript
1.12. ¿Por qué es útil en Angular?
1.13. Novedades clave de Angular 20
1.14. Standalone components como estándar
1.15. Signals: gestión reactiva del estado
1.16. provideRouter: enrutamiento moderno
1.17. Formularios standalone
1.18. Mejoras en rendimiento y tooling
1.19. Angular vs otros frameworks
1.20. Arquitectura
1.21. Sintaxis
1.22. Enrutamiento
1.23. Herramientas
1.24. Escalabilidad
1.25. Comparativa con React/Vue
1.26. Preparar el entorno
1.27. Requisitos previos
1.28. Conocimientos técnicos previos
1.29. Instalar Node.js y npm
1.30. ¿Qué son Node.js y npm?
1.31. Instalación paso a paso
1.32. Verificar instalación
1.33. Visual Studio Code
1.34. Instalación de Visual Studio Code
1.35. Configuración básica para Angular 20
1.36. Angular CLI
1.37. ¿Qué es y por qué utilizar Angular CLI?
1.38. Instalación de Angular CLI
1.39. Principales comandos de la CLI
1.40. Crear un nuevo proyecto
1.41. Iniciar el servidor de desarrollo
1.42. Generar artefactos de Angular
1.43. Construir la aplicación para producción
1.44. Ejecutar pruebas
1.45. Añadir librerías oficiales
1.46. Flujo típico con Angular CLI
1.47. Buenas prácticas con la CLI
1.48. Crear el primer proyecto Angular
1.49. Creación de un nuevo proyecto con Angular CLI
1.50. Confirmar que tu proyecto es standalone
1.51. Estructura inicial del proyecto
1.52. Ejecutar la aplicación
1.53. Buenas prácticas iniciales
1.54. Resumen
2 - Componentes en profundidad
Objetivo
Aplicar la creación y gestión de componentes en una aplicación Angular.
Duración de la unidad
3 Horas
Contenido
2. Componentes en profundidad
2.1. Declaración de Componentes y Standalone Components
2.2. Declaración tradicional de componentes
2.3. Standalone Components: Nueva arquitectura
2.4. El decorador @Component explicado en detalle
2.5. CommonModule y sus directivas principales
2.6. ¿Por qué es fundamental importar CommonModule?
2.7. Directivas principales incluidas en CommonModule
2.8. Cómo importar CommonModule en un Standalone Component
2.9. Ejemplo paso a paso
2.10. Comunicación entre componentes con @Input y @Output
2.11. Comunicación de padre a hijo con @Input
2.12. Componente hijo
2.13. Componente padre
2.14. Comunicación de hijo a padre con @Output y EventEmitter
2.15. Componente hijo
2.16. Componente padre
2.17. Ciclo de vida del componente
2.18. Fases del ciclo de vida
2.19. Principales hooks de ciclo de vida
2.20. Ejemplo práctico de ciclo de vida
2.21. Componente hijo con hooks
2.22. Componente padre para probarlo
2.23. Qué observar en la consola
2.24. Estilos: encapsulados y globales
2.25. Estilos encapsulados en componentes
2.26. Estilos globales
2.27. Configuración de encapsulación
2.28. Buenas prácticas
2.29. Resumen
3 - Templates, directivas y pipes
Objetivo
Usar templates, directivas y pipes para estructurar y manipular la vista en Angular.
Duración de la unidad
2 Horas 45 Minutos
Contenido
3. Templates, directivas y pipes
3.1. Binding de datos en plantillas
3.2. Interpolación ({{ }})
3.3. Property binding ([ ])
3.4. Event binding (( ))
3.5. Two-way binding ([( )] con ngModel)
3.6. Ejemplo integrado: los cuatro bindings en acción
3.7. Directivas estructurales
3.8. *ngIf
3.9. *ngFor
3.10. *ngSwitch
3.11. Directivas estructurales personalizadas
3.12. Directivas de atributo
3.13. ngClass
3.14. ngStyle
3.15. ngModel
3.16. Directivas de atributo personalizadas
3.17. Pipes integrados
3.18. Categorías principales
3.19. Principales pipes integrados en Angular
3.20. DatePipe
3.21. CurrencyPipe
3.22. DecimalPipe y PercentPipe
3.23. UpperCasePipe y LowerCasePipe
3.24. JsonPipe
3.25. SlicePipe
3.26. Creación de pipes personalizados
3.27. Generar el pipe con Angular CLI
3.28. Implementar la lógica de transformación
3.29. Usar el pipe en un componente standalone
3.30. Resumen
4 - Enrutamiento con provideRouter
Objetivo
Configurar el enrutamiento en aplicaciones Angular utilizando provideRouter.
Duración de la unidad
3 Horas 50 Minutos
Contenido
4. Enrutamiento con provideRouter
4.1. Fundamentos del routing en Angular 20
4.2. ¿Por qué necesitamos un Router en Angular?
4.3. Configuración de rutas con provideRouter y Route
4.4. Rutas por defecto y redirecciones
4.5. Ruta comodín
4.6. Subrutas con children
4.7. Opciones globales en provideRouter
4.8. Navegación entre vistas
4.9. Navegación declarativa con routerLink
4.10. Resaltado de enlaces activos con routerLinkActive
4.11. Navegación imperativa con Router
4.12. Navegación relativa con ActivatedRoute
4.13. Navegación con parámetros adicionales
4.14. Parámetros de ruta y query params
4.15. Parámetros de ruta
4.16. Cómo leer un parámetro de ruta
4.17. Query params
4.18. Cómo leer query params
4.19. Fragmentos en la URL
4.20. Lazy loading moderno
4.21. Patrones básicos
4.22. loadComponent: ruta que carga un único componente bajo demanda
4.23. loadChildren: grupo de rutas hijo cargado bajo demanda
4.24. Estructura de archivos recomendada (standalone)
4.25. Registro del Router (con lazy loading)
4.26. Ejemplos rápidos de navegación hacia rutas lazy
4.27. Cuándo usar cada patrón
4.28. Buenas prácticas
4.29. Guards básicos
4.30. Guard más simple: permitir o denegar acceso
4.31. Guard con lógica asíncrona
4.32. Otros tipos de guards
4.33. Caso práctico: aplicación de un restaurante
4.34. Creación de los componentes de vista
4.35. Definición del array de rutas
4.36. Configuración de provideRouter en main.ts
4.37. Configurar el marcador de vista (router-outlet) y directivas de navegación (routerLink, routerLinkActive)
4.38. Navegación imperativa
4.39. Parámetros de ruta
4.40. Query params y fragmentos
4.41. Lazy loading de la sección Contacto
4.42. Guard básico en Contacto
4.43. Resumen
5 - Servicios e inyección de dependencias
Objetivo
Implementar servicios y aplicar inyección de dependencias para gestionar la lógica de negocio.
Duración de la unidad
3 Horas
Contenido
5. Servicios e inyección de dependencias
5.1. Introducción a los servicios
5.2. Creación e inyección de servicios
5.3. Registro manual con providers
5.4. Ámbito y ciclo de vida
5.5. Servicios globales y locales
5.6. Comunicación HTTP con HttpClient
5.7. Manejo de errores en peticiones HTTP
5.8. Interceptors HTTP
5.9. Lazy services y carga perezosa
5.10. Resumen
6 - Formularios template-driven
Objetivo
Crear formularios template-driven para capturar y validar datos de usuario.
Duración de la unidad
3 Horas 10 Minutos
Contenido
6. Formularios template-driven
6.1. Estructura básica
6.2. ngForm y [(ngModel)]
6.3. Estados básicos del formulario
6.4. Validaciones nativas
6.5. Mostrar mensajes de error
6.6. Formularios anidados
6.7. Buenas prácticas
6.8. Resumen
7 - Formularios reactivos
Objetivo
Construir formularios reactivos y gestionar su estado y validaciones.
Duración de la unidad
3 Horas 10 Minutos
Contenido
7. Formularios reactivos
7.1. Introducción y estructura
7.2. Validaciones reactivas
7.3. Manejo programático de errores
7.4. Validadores personalizados
7.5. Validadores síncronos y asíncronos
7.6. Ejemplo completo
7.7. Buenas prácticas
7.8. Resumen
8 - Signals y estado reactivo
Objetivo
Utilizar signals para gestionar el estado reactivo en aplicaciones Angular.
Duración de la unidad
3 Horas 45 Minutos
Contenido
8. Signals y estado reactivo
8.1. API básica de Signals
8.2. signal, computed y effect
8.3. Uso de Signals en plantillas
8.4. Diferencias entre Signals y RxJS
8.5. Integración y coexistencia con Observables
8.6. Zona opcional y detección de cambios
8.7. Resumen
9 - Comunicación avanzada y manejo de estado
Objetivo
Implementar técnicas avanzadas de comunicación entre componentes y manejo de estado.
Duración de la unidad
2 Horas 20 Minutos
Contenido
9. Comunicación avanzada y manejo de estado
9.1. Comunicación entre componentes hermanos
9.2. Servicios compartidos
9.3. BehaviorSubject y Signals compartidos
9.4. Estado compartido sin NgRx
9.5. Principios para escalar el estado
9.6. Resumen
10 - Testing de componentes y servicios
Objetivo
Desarrollar pruebas para componentes y servicios en Angular.
Duración de la unidad
2 Horas 15 Minutos
Contenido
10. Testing de componentes y servicios
10.1. Importancia del testing
10.2. Configuración del entorno
10.3. Pruebas de componentes
10.4. Pruebas de servicios
10.5. Pruebas de formularios
10.6. Pruebas E2E con Cypress o Playwright
10.7. Resumen
11 - Arquitectura escalable y buenas prácticas
Objetivo
Describir arquitecturas escalables y aplicar buenas prácticas en el desarrollo de aplicaciones Angular.
Duración de la unidad
2 Horas 45 Minutos
Contenido
11. Arquitectura escalable y buenas prácticas
11.1. Organización por features
11.2. Reutilización de componentes y servicios
11.3. Nomenclatura y estructura limpia
11.4. Introducción a NgModules
11.5. Migración a Standalone Components
11.6. Monorepos y Nx
11.7. Buenas prácticas de seguridad
11.8. Resumen
12 - Despliegue y optimización para producción
Objetivo
Optimizar y desplegar aplicaciones Angular para producción.
Duración de la unidad
2 Horas 15 Minutos
Contenido
12. Despliegue y optimización para producción
12.1. Variables de entorno
12.2. Comandos de build
12.3. Lazy loading y deferrable views
12.4. Opciones de despliegue (Firebase, Vercel, Nginx, Docker)
12.5. Análisis de bundles y optimización
12.6. Monitorización post-despliegue
12.7. Resumen

¿Necesitas más información sobre este curso?
Mándame el temario del curso por correo electrónico