Proyecto de Demostración de Angular

Este proyecto sirve como un laboratorio de pruebas para diversas características y funcionalidades de Angular, basándose en la documentación oficial. El objetivo es demostrar y experimentar con conceptos clave del framework en un entorno práctico.

Características Implementadas

Este proyecto incluye ejemplos de:

• Componentes y Plantillas: Uso de componentes para construir la interfaz de usuario, con plantillas HTML y estilos CSS encapsulados.
• Enrutamiento:
  • Rutas Básicas: Navegación entre diferentes vistas de la aplicación (Home, Coches, etc.).
  • Rutas con Parámetros: Paso de datos a través de la URL, como en la vista de detalles de personajes (/character-details/:id).
  • Rutas Anidadas: Componentes con rutas hijas, como en la sección de configuración (/settings/profile, /settings/security).
  • Rutas Protegidas (Route Guards): Restricción del acceso a ciertas rutas basándose en la lógica de autenticación (/protected).
  • Redirecciones: Redirección de rutas no encontradas o alias de rutas.
• Services e Inyección de Dependencias: Uso de servicios para compartir lógica y datos entre componentes (ej. AuthService, CocheService).
• Comunicación con APIs (HTTP Client): Obtención de datos de una API externa para mostrar información dinámica, como la lista de personajes de Dragon Ball.
• Pipes: Transformación de datos en las plantillas para mejorar la presentación (ej. ExamplePipes).
• Signals: Uso de la nueva primitiva de reactividad de Angular para gestionar el estado de forma eficiente (SignalDemo).
• Manejo de Formularios: (Inferido por la presencia de login) Captura y validación de la entrada del usuario.

Estructura del Proyecto

El código fuente se encuentra principalmente en el directorio src/app, organizado de la siguiente manera:

• components/: Contiene todos los componentes reutilizables de la aplicación, cada uno en su propio directorio.
• services/: Contiene los servicios que proporcionan lógica de negocio, acceso a datos, etc.
• pipes/: Contiene los pipes personalizados.
• interceptors/: Contiene interceptores HTTP para modificar las peticiones y respuestas.
• app.routes.ts: Define las rutas de la aplicación.

Cómo Empezar

A continuación se detallan los pasos para poner en marcha el proyecto en un entorno de desarrollo local.

Prerrequisitos

Asegúrate de tener instalado Node.js y Angular CLI.

Instalación

1. Clona el repositorio:

   git clone <URL_DEL_REPOSITORIO>

2. Navega al directorio del proyecto:

   cd angular-project

3. Instala las dependencias:

   npm install

Servidor de Desarrollo

Ejecuta el siguiente comando para iniciar el servidor de desarrollo:

ng serve

Abre tu navegador y visita http://localhost:4200/. La aplicación se recargará automáticamente si realizas cambios en los archivos fuente.

Comandos Útiles de Angular CLI

• Generar Componentes:

  ng generate component nombre-del-componente

• Compilar para Producción:

  ng build

  Los artefactos de la compilación se guardarán en el directorio dist/.

• Ejecutar Pruebas Unitarias:

  ng test

• Ejecutar Pruebas End-to-End:

  ng e2e

Recursos Adicionales

Para más información sobre Angular CLI, visita la documentación oficial.