70 lines
2.2 KiB
Markdown
70 lines
2.2 KiB
Markdown
# Documentación del Frontend
|
|
|
|
## **Tecnología Base**
|
|
|
|
- **Framework:** Angular 20
|
|
- **Lenguaje:** TypeScript
|
|
- **Estilos:** SCSS
|
|
- **Gestión de Estado:** RxJS (si aplica)
|
|
- **Rutas:** Angular Router
|
|
|
|
## **Estructura del Proyecto**
|
|
|
|
El proyecto estará organizado en módulos y componentes para maximizar la reutilización y la escalabilidad. La estructura inicial será:
|
|
|
|
```FileSystem
|
|
src/
|
|
app/
|
|
core/ # Servicios y lógica compartida
|
|
shared/ # Componentes y directivas reutilizables
|
|
features/ # Módulos específicos de características
|
|
home/ # Página principal
|
|
gallery/ # Página de galería
|
|
profile/ # Página de perfil
|
|
app-routing.module.ts
|
|
app.module.ts
|
|
assets/ # Recursos estáticos como imágenes
|
|
environments/ # Configuraciones de entorno
|
|
```
|
|
|
|
## **Componentes Principales**
|
|
|
|
### **Menú de Navegación (`MenuComponent`)**
|
|
|
|
- **Descripción:** Componente para la navegación entre las diferentes secciones de la aplicación.
|
|
- **Propiedades:**
|
|
- `links: Array<{ label: string, route: string }>`: Lista de enlaces.
|
|
- **Eventos:**
|
|
- `onLinkClick`: Evento emitido al hacer clic en un enlace.
|
|
|
|
### **Galería (`GalleryComponent`)**
|
|
|
|
- **Descripción:** Componente para mostrar una colección de imágenes.
|
|
- **Propiedades:**
|
|
- `images: Array<{ src: string, alt: string }>`: Lista de imágenes.
|
|
- **Eventos:**
|
|
- `onImageClick`: Evento emitido al seleccionar una imagen.
|
|
|
|
### **Imagen (`ImageComponent`)**
|
|
|
|
- **Descripción:** Componente para mostrar una imagen individual.
|
|
- **Propiedades:**
|
|
- `src: string`: URL de la imagen.
|
|
- `alt: string`: Texto alternativo.
|
|
- **Eventos:**
|
|
- `onClick`: Evento emitido al hacer clic en la imagen.
|
|
|
|
### **Pie de Página (`FooterComponent`)**
|
|
|
|
- **Descripción:** Componente para mostrar información adicional en la parte inferior de la página.
|
|
- **Propiedades:**
|
|
- `links: Array<{ label: string, url: string }>`: Enlaces a recursos externos.
|
|
|
|
### **Página Principal (`HomePageComponent`)**
|
|
|
|
- **Descripción:** Página que combina el menú, la galería y el pie de página.
|
|
- **Componentes Hijos:**
|
|
- `MenuComponent`
|
|
- `GalleryComponent`
|
|
- `FooterComponent`
|