🅰️ Curso completo de Angular

Curso progresivo de Angular desde fundamentos hasta aplicaciones completas

---

📚 Descripción

Este repositorio contiene un curso completo y progresivo de Angular que va desde los conceptos más básicos de TypeScript hasta la construcción de aplicaciones e-commerce completas con backend integrado.

Cada sección está diseñada para construir sobre conocimientos previos, permitiendo que cualquier desarrollador principiante con la tecnología pueda aprender Angular de forma estructurada y práctica.

🎯 Estructura del curso

Fundamentos (Secciones 1-5)

• Sección 1 & 2: Material introductorio y hoja de referencia
• Sección 3: Fundamentos de TypeScript (tipos, interfaces, clases, genéricos, decoradores)
• Sección 4: Bases de Angular (componentes, routing, señales, computed)
• Sección 5: Expansión de bases (servicios, comunicación entre componentes, FormArrays)

Aplicaciones Prácticas (Secciones 6-11)

• Sección 6-8: App de GIFs (progresión: estructura → funcionalidad → avanzado)
  • Integración con API de Giphy
  • Paginación infinita
  • Gestión de estado con señales
• Sección 9-10: App de Países (progresión: estructura → básico → avanzado)
  • Integración con REST Countries API
  • rxResource para datos asíncronos
  • Caché y optimizaciones

Características Avanzadas (Secciones 12-17)

• Sección 12-13: Pipes (básicos y personalizados)
• Sección 14-15: Formularios reactivos (básicos y avanzados)
• Sección 16: Lifecycle Hooks (tradicionales y modernos)
• Sección 17: App de mapas interactivos con Mapbox

Proyecto Final: Tesloshop (Secciones 18-21)

Aplicación e-commerce completa con progresión incremental:

• Sección 18: App administrativa base
• Sección 19: Paginación
• Sección 20: Autenticación con JWT
• Sección 21: Panel administrativo completo

Nuevas Funcionalidades (Sección 22)

• Control flow moderno (@if, @for, @switch)
• View Transitions
• Defer blocks
• Optimizaciones de change detection

🚀 Tecnologías y Conceptos Aprendidos

Core de Angular

• ✅ Componentes standalone
• ✅ Signals y computed signals
• ✅ rxResource para datos asíncronos
• ✅ Routing y lazy loading
• ✅ Lifecycle hooks (tradicionales y modernos)
• ✅ Change detection strategies

Formularios

• ✅ Formularios reactivos (FormGroup, FormArray, FormControl)
• ✅ Validadores personalizados
• ✅ Validación asíncrona
• ✅ Manejo de errores

Pipes y Transformaciones

• ✅ Pipes incluidos en Angular
• ✅ Pipes personalizados
• ✅ Filtrado y ordenamiento

Integración con APIs

• ✅ HTTP Client
• ✅ RxJS operators
• ✅ Manejo de errores
• ✅ Mappers pattern

Características Avanzadas

• ✅ Integración con librerías de terceros (Mapbox)
• ✅ Autenticación y autorización
• ✅ Guards e interceptors
• ✅ Optimizaciones de rendimiento

📁 Estructura del Repositorio

Codigo/
├── Sección 1 & 2 - Hoja introductoria/
├── Sección 3 - Fundamentos Typescript/
├── Sección 4 - Bases de Angular/
├── Sección 5 - Expansión bases Angular/
├── Sección 6 - App Gifs Inicio/
├── Sección 7 - Gif App Funcionalidad básica/
├── Sección 8 - Gif App Intermedio Avanzado/
├── Sección 9 - Angular App Países/
├── Sección 10 - Angular App Países Básico/
├── Sección 10 - Angular App Países Intermedio Avanzado/
├── Sección 12 - Pipes/
├── Sección 13 - Pipes avanzados/
├── Sección 14 - Formularios reactivos 1/
├── Sección 15 - Formularios reactivos 2/
├── Sección 16 - Lifecycle Hooks/
├── Sección 17 - App de mapas interactivos/
├── Sección 18 - Tesloshop (App administrativa)/
├── Sección 19 - Tesloshop (Paginaciones)/
├── Sección 20 - Tesloshop (Autenticación)/
├── Sección 21 - Tesloshop (Panel administrativo)/
└── Sección 22 - Angular nuevas funcionalidades/

Cada carpeta contiene su propio README.md con documentación detallada del contenido, conceptos aprendidos, y cómo ejecutar el proyecto.

🛠️ Requisitos Previos

• Node.js (versión 18 o superior)
• npm o yarn
• Conocimientos básicos de JavaScript
• Editor de código (VS Code recomendado)

📖 Cómo Usar Este Curso

1. Comienza por la Sección 1: Revisa el material introductorio
2. Sigue el orden: Las secciones están diseñadas para ser completadas secuencialmente
3. Lee los READMEs: Cada sección tiene documentación detallada
4. Practica: Ejecuta cada proyecto y experimenta con el código
5. Consulta la documentación: Usa la hoja de referencia cuando lo necesites

🎓 Progresión de Aprendizaje

Fundamentos TypeScript
    ↓
Bases de Angular
    ↓
Aplicaciones Básicas (GIFs, Países)
    ↓
Características Avanzadas (Pipes, Formularios, Hooks)
    ↓
Integración con Librerías (Mapas)
    ↓
Proyecto Completo (Tesloshop)
    ↓
Nuevas Funcionalidades de Angular

📝 Notas Importantes

• Versión de Angular: Este curso utiliza Angular 20.10
• Standalone Components: Todos los proyectos usan la arquitectura moderna de componentes standalone
• Signals: Se enfatiza el uso de signals sobre propiedades tradicionales
• TypeScript: Se requiere conocimiento básico de TypeScript (cubierto en Sección 3)

🔗 Recursos Adicionales

• Documentación Oficial de Angular
• Angular CLI
• TypeScript Handbook

📄 Licencia

Este material es parte de un curso educativo. Consulta los términos de uso específicos del curso.

---

¡Comienza tu viaje aprendiendo Angular! 🚀

Última actualización: 2024