{"id":30842034,"url":"https://github.com/afperdomo2/todo-app-angular-17","last_synced_at":"2026-02-13T16:11:23.203Z","repository":{"id":311331300,"uuid":"798096188","full_name":"afperdomo2/todo-app-angular-17","owner":"afperdomo2","description":"App de gestión de tareas con Angular 17","archived":false,"fork":false,"pushed_at":"2025-08-23T19:58:18.000Z","size":246,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-24T07:46:44.576Z","etag":null,"topics":["angular-reactive-forms","angular-router","angular-signals","angular17","firebase-hosting"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/afperdomo2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-05-09T04:54:31.000Z","updated_at":"2025-08-23T19:58:21.000Z","dependencies_parsed_at":"2025-08-24T08:32:36.799Z","dependency_job_id":"b417d627-50e4-4c3d-8219-fe29b7e57833","html_url":"https://github.com/afperdomo2/todo-app-angular-17","commit_stats":null,"previous_names":["afperdomo2/todo-app-angular-17"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/afperdomo2/todo-app-angular-17","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afperdomo2%2Ftodo-app-angular-17","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afperdomo2%2Ftodo-app-angular-17/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afperdomo2%2Ftodo-app-angular-17/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afperdomo2%2Ftodo-app-angular-17/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/afperdomo2","download_url":"https://codeload.github.com/afperdomo2/todo-app-angular-17/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/afperdomo2%2Ftodo-app-angular-17/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273961557,"owners_count":25198597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-reactive-forms","angular-router","angular-signals","angular17","firebase-hosting"],"created_at":"2025-09-06T20:43:34.635Z","updated_at":"2026-02-13T16:11:23.104Z","avatar_url":"https://github.com/afperdomo2.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Todo App - Angular 17\r\n\r\nUna 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.\r\n\r\nEste proyecto fue generado con [Angular CLI](https://github.com/angular/angular-cli) versión 17.3.7.\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n  \u003cimg src=\"assets/images/todolist.png\" alt=\"Ejemplo de reporte de estadísticas\" width=\"600\"\u003e\r\n\u003c/div\u003e\r\n\r\n## 🚀 Características\r\n\r\n- ✅ Crear nuevas tareas\r\n- ✏️ Editar tareas existentes\r\n- ☑️ Marcar tareas como completadas/pendientes\r\n- 🗑️ Eliminar tareas\r\n- 🔍 Filtrar tareas (todas, pendientes, completadas)\r\n- 💾 Persistencia local con LocalStorage\r\n- 🎨 Interfaz responsive y moderna\r\n- 🔧 Componentes standalone de Angular 17\r\n- ⚡ Uso de Angular Signals para manejo de estado\r\n\r\n## 🛠️ Tecnologías Utilizadas\r\n\r\n- **Angular 17** - Framework principal\r\n- **TypeScript** - Lenguaje de programación\r\n- **Angular Reactive Forms** - Manejo de formularios\r\n- **Angular Signals** - Manejo de estado reactivo\r\n- **Angular Router** - Navegación\r\n- **CSS3** - Estilos\r\n- **Firebase Hosting** - Despliegue\r\n\r\n## 📂 Estructura del Proyecto\r\n\r\n```\r\nsrc/\r\n├── app/\r\n│   ├── models/\r\n│   │   └── task.model.ts          # Interfaz de la tarea\r\n│   ├── pages/\r\n│   │   ├── home/                  # Página principal con la lista de tareas\r\n│   │   │   ├── home.component.ts\r\n│   │   │   ├── home.component.html\r\n│   │   │   └── home.component.css\r\n│   │   └── labs/                  # Página de laboratorios/experimentos\r\n│   │       ├── labs.component.ts\r\n│   │       ├── labs.component.html\r\n│   │       └── labs.component.css\r\n│   ├── app.component.ts           # Componente raíz\r\n│   ├── app.config.ts              # Configuración de la aplicación\r\n│   └── app.routes.ts              # Configuración de rutas\r\n├── assets/                        # Recursos estáticos\r\n├── index.html                     # Página principal\r\n├── main.ts                        # Punto de entrada\r\n└── styles.css                     # Estilos globales\r\n```\r\n\r\n## 🏁 Instalación y Configuración\r\n\r\n### Prerrequisitos\r\n\r\n- Node.js (versión 18 o superior)\r\n- npm o yarn\r\n- Angular CLI 17\r\n\r\n### Instalación\r\n\r\n1. **Clonar el repositorio:**\r\n\r\n```bash\r\ngit clone \u003curl-del-repositorio\u003e\r\ncd todo-app-angular-17\r\n```\r\n\r\n2. **Instalar dependencias:**\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\n3. **Ejecutar en modo desarrollo:**\r\n\r\n```bash\r\nnpm start\r\n# o\r\nng serve\r\n```\r\n\r\nNavega a `http://localhost:4200/`. La aplicación se recargará automáticamente si realizas cambios en el código fuente.\r\n\r\n## 🔧 Scripts Disponibles\r\n\r\n```bash\r\n# Iniciar servidor de desarrollo\r\nnpm start\r\nng serve\r\n\r\n# Construir para producción\r\nnpm run build\r\nng build\r\n\r\n# Construir en modo de observación\r\nnpm run watch\r\nng build --watch --configuration development\r\n\r\n# Ejecutar pruebas unitarias\r\nnpm test\r\nng test\r\n\r\n# Generar nuevo componente\r\nng generate component component-name\r\nng g c component-name\r\n\r\n# Generar nuevo servicio\r\nng generate service service-name\r\nng g s service-name\r\n```\r\n\r\n```bash\r\n# Migra el código a las nuevas estructuras de control de flujo en Angular (@if, @for, y @switch)\r\nng g @angular/core:control-flow\r\n```\r\n\r\n## 🏗️ Construcción\r\n\r\nEjecuta `ng build` para construir el proyecto. Los artefactos de construcción se almacenarán en el directorio `dist/`.\r\n\r\n```bash\r\nng build\r\n```\r\n\r\nPara construcción de producción:\r\n\r\n```bash\r\nng build --configuration production\r\n```\r\n\r\n## 🧪 Pruebas\r\n\r\n### Pruebas Unitarias\r\n\r\nEjecuta `ng test` para ejecutar las pruebas unitarias via [Karma](https://karma-runner.github.io).\r\n\r\n```bash\r\nng test\r\n```\r\n\r\n### Pruebas End-to-End\r\n\r\nEjecuta `ng e2e` para ejecutar las pruebas de extremo a extremo. Primero necesitas agregar un paquete que implemente capacidades de pruebas e2e.\r\n\r\n```bash\r\nng e2e\r\n```\r\n\r\n## 🔥 Configuración y Despliegue con Firebase\r\n\r\nEste proyecto está configurado para desplegarse en Firebase Hosting. Sigue estos pasos para configurar y desplegar tu aplicación:\r\n\r\n### 1. Instalación de Firebase Tools\r\n\r\n```bash\r\n# Instalar Firebase CLI globalmente\r\nnpm install -g firebase-tools\r\n```\r\n\r\n### 2. Autenticación con Firebase\r\n\r\n```bash\r\n# Iniciar sesión en Firebase\r\nfirebase login\r\n```\r\n\r\n### 3. Inicialización del Proyecto Firebase\r\n\r\nSi es la primera vez configurando Firebase en el proyecto:\r\n\r\n```bash\r\n# Inicializar Firebase en el proyecto\r\nfirebase init\r\n\r\n# Seleccionar las siguientes opciones:\r\n# ✅ Hosting: Configure files for Firebase Hosting\r\n# ✅ Seleccionar un proyecto existente o crear uno nuevo\r\n# ✅ Public directory: dist/todo-app-angular-17/browser\r\n# ✅ Configure as a single-page app: Yes\r\n# ✅ Set up automatic builds and deploys with GitHub: No (opcional)\r\n```\r\n\r\n### 4. Configuración del archivo firebase.json\r\n\r\nEl proyecto ya incluye la configuración necesaria en `firebase.json`:\r\n\r\n```json\r\n{\r\n  \"hosting\": {\r\n    \"public\": \"dist/todo-app-angular-17/browser\",\r\n    \"ignore\": [\"firebase.json\", \"**/.*\", \"**/node_modules/**\"],\r\n    \"rewrites\": [\r\n      {\r\n        \"source\": \"**\",\r\n        \"destination\": \"/index.html\"\r\n      }\r\n    ]\r\n  }\r\n}\r\n```\r\n\r\n### 5. Proceso de Despliegue\r\n\r\n```bash\r\n# 1. Construir la aplicación para producción\r\nng build --configuration production\r\n\r\n# 2. Desplegar a Firebase Hosting\r\nfirebase deploy\r\n\r\n# O combinar ambos comandos\r\nnpm run build \u0026\u0026 firebase deploy\r\n```\r\n\r\n### 6. Scripts Útiles de Firebase\r\n\r\n```bash\r\n# Ver el proyecto actual de Firebase\r\nfirebase projects:list\r\n\r\n# Cambiar de proyecto Firebase\r\nfirebase use \u003cproject-id\u003e\r\n\r\n# Servir la aplicación localmente (simulando Firebase Hosting)\r\nfirebase serve\r\n\r\n# Ver logs de despliegue\r\nfirebase hosting:channel:list\r\n\r\n# Desplegar a un canal específico (preview)\r\nfirebase hosting:channel:deploy \u003cchannel-name\u003e\r\n```\r\n\r\n### 7. Configuración de Dominios Personalizados\r\n\r\n1. Ve a la consola de Firebase\r\n2. Navega a **Hosting** en tu proyecto\r\n3. Haz clic en **Add custom domain**\r\n4. Sigue las instrucciones para verificar la propiedad del dominio\r\n5. Configura los registros DNS según las indicaciones\r\n\r\n### URLs de Ejemplo\r\n\r\n- **Desarrollo local:** `http://localhost:4200`\r\n- **Firebase Hosting:** `https://\u003cproject-id\u003e.web.app`\r\n- **Dominio personalizado:** `https://tu-dominio.com`\r\n\r\n## 📝 Modelo de Datos\r\n\r\n### Interface ITask\r\n\r\n```typescript\r\nexport interface ITask {\r\n  id: number;\r\n  title: string;\r\n  completed: boolean;\r\n  isEditing?: boolean;\r\n}\r\n```\r\n\r\n## 🤝 Contribución\r\n\r\n1. Fork el proyecto\r\n2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)\r\n3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push a la rama (`git push origin feature/AmazingFeature`)\r\n5. Abre un Pull Request\r\n\r\n## 📄 Licencia\r\n\r\nEste proyecto está bajo la Licencia MIT - ver el archivo [LICENSE.md](LICENSE.md) para detalles.\r\n\r\n## 🆘 Ayuda Adicional\r\n\r\nPara 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).\r\n\r\n### Recursos Útiles\r\n\r\n- [Documentación de Angular](https://angular.io/docs)\r\n- [Angular Signals](https://angular.io/guide/signals)\r\n- [Firebase Hosting](https://firebase.google.com/docs/hosting)\r\n- [Angular CLI](https://angular.io/cli)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafperdomo2%2Ftodo-app-angular-17","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fafperdomo2%2Ftodo-app-angular-17","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fafperdomo2%2Ftodo-app-angular-17/lists"}