🚀 Angular Bases: Modern Development Patterns

Este proyecto es una guía práctica y evolutiva sobre los fundamentos de Angular, desarrollada para explorar y dominar las características más recientes del framework. Se enfoca en la transición hacia aplicaciones más ligeras, reactivas y eficientes.

🛠️ Tecnologías y Conceptos Implementados

• Angular v17+ (Standalone Architecture): Implementación de componentes, directivas y pipes independientes (standalone: true) que eliminan la necesidad de NgModules, simplificando la estructura del proyecto.
• Reactividad con Signals: Gestión de estado de grano fino utilizando signal(), computed() y los métodos set() y update() para una detección de cambios optimizada.
• Servicios y Inyección de Dependencias: Uso de servicios para centralizar la lógica de negocio y el estado. Se utiliza la función inject() para una inyección de dependencias moderna y sin constructores.
• Arquitectura de Componentes (Smart/Dumb): Separación de responsabilidades entre componentes contenedores (inteligentes) que gestionan el estado y componentes de presentación (tontos) que solo muestran datos y emiten eventos.
• Comunicación entre Componentes:
  • Parent -> Child: Paso de datos mediante propiedades de entrada (@Input()).
  • Child -> Parent: Emisión de eventos con la nueva función output() basada en señales.
• Control Flow con @for: Uso del nuevo bloque de control de flujo para el renderizado eficiente de listas.
• Routing Modular: Configuración de rutas escalables mediante provideRouter y directivas como routerLink y routerLinkActive.
• Enlace de Clases Condicional: Aplicación de estilos dinámicos con la sintaxis [class.nombre-clase].
• UI/UX con Bootstrap 5: Integración de frameworks de CSS modernos para un diseño responsive y componentes estilizados.

---

📂 Estructura de Componentes Clave

1. Counter Module

Un ejemplo práctico de gestión de estado numérico.

• Lógica de Señales: Se demuestra el uso de update() para cálculos basados en el estado anterior y set() para reinicios forzados.
• Prioridad de Renderizado: Nota técnica sobre la precedencia de templateUrl sobre template en los metadatos del decorador @Component. Nota Técnica: En este componente se demuestra que, si coexisten template y templateUrl en el decorador, Angular prioriza el archivo externo (templateUrl).

2. Hero Management

Gestión de datos de strings y lógica de presentación.

• Propiedades Computadas (computed): Implementación de heroDescription para la descripción dinámica de héroes basada en el estado actual de sus señales.
• Estilos Encapsulados: Uso de selectores CSS específicos para transformaciones de texto (capitalización) sin afectar al resto de la aplicación.

3. Dragonball Page

Un componente para gestionar una lista de personajes, permitiendo agregar nuevos elementos y visualizar sus propiedades.

• Renderizado de Listas con @for: Uso del nuevo bloque de control de flujo para iterar y mostrar una lista de personajes de forma eficiente.
• Gestión de Estado con signal: La lista de personajes se gestiona como una señal (signal<Characters[]>).
• Formulario de Agregación: Incluye un formulario para capturar el nombre y poder de un nuevo personaje.
• Estilos Condicionales: Aplicación de clases CSS dinámicas ([class.text-danger]) basadas en el poder del personaje.

4. Dragonball Super Module

Este módulo ha sido refactorizado para seguir un patrón de diseño más robusto y escalable, separando responsabilidades en componentes y servicios.

• DragonballService (Servicio):

  • Single Source of Truth: Centraliza el estado de la aplicación (la lista de personajes) en una señal (signal<Characters[]>).
  • Lógica de Negocio: Contiene los métodos para manipular el estado, como onNewCharacter() y onDeleteCharacter(). Es el único responsable de modificar la lista de personajes.

• DragonballSuperPageComponent (Smart Component):

  • Orquestador: Actúa como el componente contenedor.
  • Inyección de Dependencias: Utiliza inject(DragonballService) para obtener la instancia del servicio.
  • Conector: Pasa los datos del servicio a los componentes de presentación y maneja los eventos emitidos por ellos, llamando a los métodos correspondientes del servicio.

• CharacterListComponent (Dumb Component):

  • Presentacional: Su única responsabilidad es mostrar la lista de personajes.
  • Entrada de Datos (@Input): Recibe la lista de personajes desde el componente padre.
  • Salida de Eventos (output): Emite un evento cuando se solicita eliminar un personaje.

• CharacterAddComponent (Dumb Component):

  • Formulario: Gestiona el formulario para agregar nuevos personajes.
  • Estado Local: Usa señales (signal) para manejar el estado interno del formulario (nombre y poder).
  • Salida de Eventos (output): Emite el nuevo personaje creado hacia el componente padre para que este lo procese.

---

🌐 Navegación y Rutas

La aplicación utiliza el provideRouter de Angular para gestionar la navegación entre componentes. Una vez que el servidor esté corriendo en http://localhost:4200/, puedes explorar las siguientes secciones:

• Vista Principal (Contador): Accesible directamente en la raíz de la aplicación (/).
• Sección de Héroes: Para visualizar este componente, navega a http://localhost:4200/hero.
• Sección de Dragonball (Antigua): La implementación original se encuentra en http://localhost:4200/dragonball.
• Sección de Dragonball Super (Refactorizada): La nueva versión con servicios y componentes anidados está en http://localhost:4200/dragonball-super.

---

🔧 Configuración y Ejecución

Requisitos Previos

• Node.js y npm instalados.
• Angular CLI instalado globalmente (npm install -g @angular/cli).

Instalación

1. Clonar el repositorio.

   git clone <https://github.com/ClaudiaTrigo/first-proj-angular.git>

2. Instalar dependencias:

   npm install

🚀 Flujo de Trabajo en Desarrollo

Para iniciar el servidor de desarrollo con recarga en tiempo real (HMR):

```bash
ng serve
``` 

✍️ Autoría y Contacto

Proyecto desarrollado por Claudia Trigo.

Si tienes alguna sugerencia o quieres charlar sobre Angular, ¡no dudes en contactarme!

---

Este proyecto es parte de mi proceso de aprendizaje continuo en el ecosistema de Angular.