https://github.com/afperdomo2/todo-app-angular-17
App de gestión de tareas con Angular 17
https://github.com/afperdomo2/todo-app-angular-17
angular-reactive-forms angular-router angular-signals angular17 firebase-hosting
Last synced: 5 months ago
JSON representation
App de gestión de tareas con Angular 17
- Host: GitHub
- URL: https://github.com/afperdomo2/todo-app-angular-17
- Owner: afperdomo2
- Created: 2024-05-09T04:54:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-23T19:58:18.000Z (5 months ago)
- Last Synced: 2025-08-24T07:46:44.576Z (5 months ago)
- Topics: angular-reactive-forms, angular-router, angular-signals, angular17, firebase-hosting
- Language: HTML
- Homepage:
- Size: 240 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Todo App - Angular 17
Una aplicación de gestión de tareas desarrollada con Angular 17, que utiliza las nuevas funcionalidades de Angular como componentes standalone, signals y formularios reactivos. La aplicación permite crear, editar, marcar como completadas y eliminar tareas, con persistencia local mediante LocalStorage.
Este proyecto fue generado con [Angular CLI](https://github.com/angular/angular-cli) versión 17.3.7.
## 🚀 Características
- ✅ Crear nuevas tareas
- ✏️ Editar tareas existentes
- ☑️ Marcar tareas como completadas/pendientes
- 🗑️ Eliminar tareas
- 🔍 Filtrar tareas (todas, pendientes, completadas)
- 💾 Persistencia local con LocalStorage
- 🎨 Interfaz responsive y moderna
- 🔧 Componentes standalone de Angular 17
- ⚡ Uso de Angular Signals para manejo de estado
## 🛠️ Tecnologías Utilizadas
- **Angular 17** - Framework principal
- **TypeScript** - Lenguaje de programación
- **Angular Reactive Forms** - Manejo de formularios
- **Angular Signals** - Manejo de estado reactivo
- **Angular Router** - Navegación
- **CSS3** - Estilos
- **Firebase Hosting** - Despliegue
## 📂 Estructura del Proyecto
```
src/
├── app/
│ ├── models/
│ │ └── task.model.ts # Interfaz de la tarea
│ ├── pages/
│ │ ├── home/ # Página principal con la lista de tareas
│ │ │ ├── home.component.ts
│ │ │ ├── home.component.html
│ │ │ └── home.component.css
│ │ └── labs/ # Página de laboratorios/experimentos
│ │ ├── labs.component.ts
│ │ ├── labs.component.html
│ │ └── labs.component.css
│ ├── app.component.ts # Componente raíz
│ ├── app.config.ts # Configuración de la aplicación
│ └── app.routes.ts # Configuración de rutas
├── assets/ # Recursos estáticos
├── index.html # Página principal
├── main.ts # Punto de entrada
└── styles.css # Estilos globales
```
## 🏁 Instalación y Configuración
### Prerrequisitos
- Node.js (versión 18 o superior)
- npm o yarn
- Angular CLI 17
### Instalación
1. **Clonar el repositorio:**
```bash
git clone
cd todo-app-angular-17
```
2. **Instalar dependencias:**
```bash
npm install
```
3. **Ejecutar en modo desarrollo:**
```bash
npm start
# o
ng serve
```
Navega a `http://localhost:4200/`. La aplicación se recargará automáticamente si realizas cambios en el código fuente.
## 🔧 Scripts Disponibles
```bash
# Iniciar servidor de desarrollo
npm start
ng serve
# Construir para producción
npm run build
ng build
# Construir en modo de observación
npm run watch
ng build --watch --configuration development
# Ejecutar pruebas unitarias
npm test
ng test
# Generar nuevo componente
ng generate component component-name
ng g c component-name
# Generar nuevo servicio
ng generate service service-name
ng g s service-name
```
```bash
# Migra el código a las nuevas estructuras de control de flujo en Angular (@if, @for, y @switch)
ng g @angular/core:control-flow
```
## 🏗️ Construcción
Ejecuta `ng build` para construir el proyecto. Los artefactos de construcción se almacenarán en el directorio `dist/`.
```bash
ng build
```
Para construcción de producción:
```bash
ng build --configuration production
```
## 🧪 Pruebas
### Pruebas Unitarias
Ejecuta `ng test` para ejecutar las pruebas unitarias via [Karma](https://karma-runner.github.io).
```bash
ng test
```
### Pruebas End-to-End
Ejecuta `ng e2e` para ejecutar las pruebas de extremo a extremo. Primero necesitas agregar un paquete que implemente capacidades de pruebas e2e.
```bash
ng e2e
```
## 🔥 Configuración y Despliegue con Firebase
Este proyecto está configurado para desplegarse en Firebase Hosting. Sigue estos pasos para configurar y desplegar tu aplicación:
### 1. Instalación de Firebase Tools
```bash
# Instalar Firebase CLI globalmente
npm install -g firebase-tools
```
### 2. Autenticación con Firebase
```bash
# Iniciar sesión en Firebase
firebase login
```
### 3. Inicialización del Proyecto Firebase
Si es la primera vez configurando Firebase en el proyecto:
```bash
# Inicializar Firebase en el proyecto
firebase init
# Seleccionar las siguientes opciones:
# ✅ Hosting: Configure files for Firebase Hosting
# ✅ Seleccionar un proyecto existente o crear uno nuevo
# ✅ Public directory: dist/todo-app-angular-17/browser
# ✅ Configure as a single-page app: Yes
# ✅ Set up automatic builds and deploys with GitHub: No (opcional)
```
### 4. Configuración del archivo firebase.json
El proyecto ya incluye la configuración necesaria en `firebase.json`:
```json
{
"hosting": {
"public": "dist/todo-app-angular-17/browser",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
```
### 5. Proceso de Despliegue
```bash
# 1. Construir la aplicación para producción
ng build --configuration production
# 2. Desplegar a Firebase Hosting
firebase deploy
# O combinar ambos comandos
npm run build && firebase deploy
```
### 6. Scripts Útiles de Firebase
```bash
# Ver el proyecto actual de Firebase
firebase projects:list
# Cambiar de proyecto Firebase
firebase use
# Servir la aplicación localmente (simulando Firebase Hosting)
firebase serve
# Ver logs de despliegue
firebase hosting:channel:list
# Desplegar a un canal específico (preview)
firebase hosting:channel:deploy
```
### 7. Configuración de Dominios Personalizados
1. Ve a la consola de Firebase
2. Navega a **Hosting** en tu proyecto
3. Haz clic en **Add custom domain**
4. Sigue las instrucciones para verificar la propiedad del dominio
5. Configura los registros DNS según las indicaciones
### URLs de Ejemplo
- **Desarrollo local:** `http://localhost:4200`
- **Firebase Hosting:** `https://.web.app`
- **Dominio personalizado:** `https://tu-dominio.com`
## 📝 Modelo de Datos
### Interface ITask
```typescript
export interface ITask {
id: number;
title: string;
completed: boolean;
isEditing?: boolean;
}
```
## 🤝 Contribución
1. Fork el proyecto
2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
4. Push a la rama (`git push origin feature/AmazingFeature`)
5. Abre un Pull Request
## 📄 Licencia
Este proyecto está bajo la Licencia MIT - ver el archivo [LICENSE.md](LICENSE.md) para detalles.
## 🆘 Ayuda Adicional
Para obtener más ayuda sobre Angular CLI, usa `ng help` o visita la página [Angular CLI Overview and Command Reference](https://angular.io/cli).
### Recursos Útiles
- [Documentación de Angular](https://angular.io/docs)
- [Angular Signals](https://angular.io/guide/signals)
- [Firebase Hosting](https://firebase.google.com/docs/hosting)
- [Angular CLI](https://angular.io/cli)