Construcción de la primera app Angular con componentes compartidos

La primera app de front end en Angular toma forma: inscripción de estudiantes con componentes y modelos compartidos, consumo de API Rest en Node.js y ejecución optimizada con Nx. Verás cómo todo se integra en un monorepo, desde el API service común hasta la UI con rutas, tarjetas, botones y tabla compartidos.

¿Cómo se integra la app con el backend y Nx?

La app uno consume el API service ubicado en utils common para obtener estudiantes. El endpoint base está hardcodeado como http://localhost:3000/students, y más adelante podría moverse a variables de entorno según el ambiente. El controller de Angular invoca este servicio para coordinar datos en la UI.

• El API service común expone get students para devolver un array de estudiantes.
• Se comparte entre proyectos dentro del monorepo.
• La app depende del server en Node.js para funcionar.

¿Cómo se ejecuta con Nx console?

Se levantan proyectos desde Nx Console usando la tarea serve. Primero el server y luego la app uno para evitar fallas por dependencia del backend.

• Server con serve en localhost 3000. Corre primero.
• App uno con serve en localhost 4200. Corre después.
• Compilación ágil gracias a Nx Cloud.

¿Qué endpoints y puertos se usan?

La comunicación se organiza de forma sencilla y explícita, facilitando pruebas locales.

• Backend: localhost 3000 para estudiantes.
• Frontend: localhost 4200 para la plataforma de estudiantes.
• Ruta consumida: /students del server en Node.js.

¿Qué componentes, modelos y rutas reutilizables hay en la UI?

La UI muestra dos rutas clave: “Cursos disponibles” y “Mis inscripciones”, ambas usando elementos compartidos. El patrón de reutilización reduce duplicidad y acelera nuevas apps.

• Tarjeta compartida para mostrar cursos.
• Botón compartido para acciones de inscripción o cancelación.
• Tabla compartida para listar inscripciones.

¿Cómo funciona el selector y la suscripción a cambios?

Hay un selector de estudiantes para elegir quién realiza modificaciones. El componente está suscrito a cambios y actualiza en tiempo real el estado de cursos.

• Cambio de estudiante impacta inmediatamente en la UI.
• El botón compartido responde aunque el estado se gestione en el componente.
• Visualización coherente: verde cuando un curso queda disponible tras cancelar.

¿Qué acciones de inscripción y cancelación hay?

Los flujos demuestran la coordinación entre UI y datos del backend.

• Inscribir a Alice Cooper en múltiples cursos desde “Cursos disponibles”.
• Ver inscripciones por estudiante: Alice Cooper con dos, Bob Dylan con una, y un tercero [inaudible].
• Cancelar “Fundamentos de Python” desde “Mis inscripciones” y ver el cambio reflejado al instante.

¿Qué prácticas de código, Angular 17 y linter se aplican?

Se utiliza la sintaxis de Angular 17 en plantillas y componentes. Además, se deja a propósito un patrón de inyección “no recomendado” en esta versión para que el linter de Nx marque el error y luego se corrija.

• Importaciones desde util common: API service y Student.
• Uso de modelos compartidos: interfaz de estudiante en utils common/models.
• Chequeo estático con linter integrado en el ecosistema de Nx.

¿Por qué se forza el error de inyección?

Es una estrategia didáctica: generar alertas del linter para aprender a ajustar la inyección según Angular 17 y dejar el código conforme a reglas modernas.

• El código funciona, pero el linter lo señala.
• Luego se ajusta la inyección para eliminar la advertencia.
• Mejora la calidad y consistencia del proyecto.

¿Qué ofrece Nx como ecosistema?

Nx agrega valor con herramientas transversales que facilitan la escala a más apps.

• Nx Console para tareas de serve y desarrollo.
• Nx Cloud para compilaciones más rápidas.
• Librerías comunes para services, models y componentes reutilizables.

¿Te gustaría comentar cómo organizarías las variables de entorno o qué otros recursos compartirías entre apps para mantener la coherencia del monorepo?