{"id":19483853,"url":"https://github.com/jpiedramacas/angular-proyect","last_synced_at":"2026-05-13T08:32:30.386Z","repository":{"id":239625429,"uuid":"800073946","full_name":"jpiedramacas/Angular-Proyect","owner":"jpiedramacas","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-14T13:19:40.000Z","size":52230,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T17:47:19.599Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/jpiedramacas.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}},"created_at":"2024-05-13T16:46:36.000Z","updated_at":"2024-07-22T15:37:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"939b6336-fe45-432e-b57d-b67b20937a67","html_url":"https://github.com/jpiedramacas/Angular-Proyect","commit_stats":null,"previous_names":["jpiedramacas/angular-proyect"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jpiedramacas/Angular-Proyect","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpiedramacas%2FAngular-Proyect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpiedramacas%2FAngular-Proyect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpiedramacas%2FAngular-Proyect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpiedramacas%2FAngular-Proyect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jpiedramacas","download_url":"https://codeload.github.com/jpiedramacas/Angular-Proyect/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jpiedramacas%2FAngular-Proyect/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32974612,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T06:31:55.726Z","status":"ssl_error","status_checked_at":"2026-05-13T06:31:51.336Z","response_time":115,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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"],"created_at":"2024-11-10T20:17:52.146Z","updated_at":"2026-05-13T08:32:30.368Z","avatar_url":"https://github.com/jpiedramacas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prototipo con desarrollo basado en componentes con Angular\n\nEste es un proyecto de práctica que utiliza Angular para crear un prototipo con un enfoque en el desarrollo basado en componentes. El prototipo consiste en una aplicación simple para la administración de tareas, donde se pueden agregar, ver y eliminar tareas.\n\n## Instrucciones de Configuración y Ejecución\n\n### Paso 1: Crear una nueva aplicación Angular\n\nPrimero, necesitas instalar Angular en tu entorno de desarrollo. Ejecuta el siguiente comando en tu terminal:\n\n```\nnpm install -g @angular/cli\n```\n\n### Paso 2: Desplegar el entorno de desarrollo\n\nDespliega tu entorno de desarrollo con el siguiente comando:\n\n```\nng serve --host 0.0.0.0 --port 8080\n```\nExplicación detallada de los componentes principales y el código necesario para cada uno de ellos en el proyecto.\n\n### 1. Componente `AddTask`\n\nEste componente se encarga de permitir al usuario agregar nuevas tareas a la lista. Consiste en un formulario donde el usuario puede ingresar el nombre de la tarea y luego enviarla para su almacenamiento.\n\n#### Archivos Relevantes:\n- **add-task.component.html**: Contiene la estructura HTML del formulario para agregar tareas.\n```html\n\u003cdiv class=\"container\"\u003e \n  \u003ch2 class=\"heading\"\u003eTask Administration\u003c/h2\u003e \n  \u003cform #userForm=\"ngForm\" (ngSubmit)=\"submitForm(userForm)\" class=\"form\"\u003e \n    \u003cdiv class=\"form-group\"\u003e \n      \u003clabel for=\"name\"\u003eName\u003c/label\u003e \n      \u003cinput type=\"text\" class=\"form-control\" id=\"name\" name=\"name\" [(ngModel)]=\"userDetails.name\" required\u003e \n      \u003cdiv *ngIf=\"userForm.controls['name']?.touched \u0026\u0026 userForm.controls['name']?.invalid\" class=\"text-danger\"\u003e \n        Name is required. \n      \u003c/div\u003e \n    \u003c/div\u003e \n    \u003cbutton type=\"submit\" class=\"btn btn-primary\"\u003eSubmit\u003c/button\u003e \n  \u003c/form\u003e \n\u003c/div\u003e \n```\n- **add-task.component.ts**: Contiene la lógica TypeScript para manejar la presentación y la lógica del formulario.\n```typescript\nimport { Component } from '@angular/core'; \n\n@Component({ \n  selector: 'app-add-task', \n  templateUrl: './add-task.component.html', \n  styleUrls: ['./add-task.component.css'] \n}) \nexport class AddTaskComponent { \n  userDetails = { \n    name: '' \n  }; \n\n  constructor() { \n    // Verificar si ya hay datos en localStorage y cargarlos si es así \n    const storedData = localStorage.getItem('datas'); \n    if (storedData) { \n      this.userDetails = JSON.parse(storedData); \n    } \n  } \n\n  submitForm(form: any): void { \n    if (form.valid) { \n      console.log('Form data:', this.userDetails); \n\n      // Obtener los datos previos del localStorage \n      let storedData: any[] = JSON.parse(localStorage.getItem('datas') || '[]'); \n\n      // Agregar los nuevos detalles del usuario \n      storedData.push(this.userDetails); \n\n      // Guardar el array actualizado en localStorage \n      localStorage.setItem('datas', JSON.stringify(storedData)); \n\n      console.log('Data saved:', storedData); \n    } \n  } \n} \n```\n\n### 2. Componente `LocalStorageData`\n\nEste componente muestra todas las tareas almacenadas en el LocalStorage. Cada tarea se muestra en una lista junto con un botón para eliminarla si es necesario.\n\n#### Archivos Relevantes:\n- **local-storage-data.component.html**: Contiene la estructura HTML para mostrar las tareas almacenadas.\n```html\n\u003cdiv class=\"container\"\u003e \n  \u003ch2 class=\"heading\"\u003eStored Tasks\u003c/h2\u003e \n  \u003cdiv *ngFor=\"let data of storedData\" class=\"data-item\"\u003e \n    \u003cp class=\"data-name\"\u003eName: {{ data.name }}\u003c/p\u003e \n    \u003capp-delete-item [item]=\"data\" (delete)=\"deleteItem($event)\" class=\"delete-item\"\u003e\u003c/app-delete-item\u003e \n  \u003c/div\u003e \n\u003c/div\u003e\n```\n- **local-storage-data.component.ts**: Contiene la lógica TypeScript para manejar la recuperación y eliminación de las tareas almacenadas.\n```typescript\nimport { Component, OnInit } from '@angular/core'; \n\n@Component({ \n  selector: 'app-local-storage-data', \n  templateUrl: './local-storage-data.component.html', \n  styleUrls: ['./local-storage-data.component.css'] \n}) \nexport class LocalStorageDataComponent implements OnInit { \n  storedData: any[] = []; \n\n  constructor() { } \n\n  ngOnInit(): void { \n    const storedData = localStorage.getItem('datas'); \n    if (storedData) { \n      this.storedData = JSON.parse(storedData); \n      if (!Array.isArray(this.storedData)) { \n        this.storedData = [this.storedData]; \n      } \n    } \n  } \n\n  deleteItem(item: any): void { \n    const index = this.storedData.indexOf(item); \n    if (index !== -1) { \n      this.storedData.splice(index, 1); \n      localStorage.setItem('datas', JSON.stringify(this.storedData)); \n    } \n\n    // Limpiar localStorage si no quedan datos \n    if (this.storedData.length === 0) { \n      localStorage.removeItem('datas'); \n    } \n  } \n} \n```\n\n### 3. Componente `DeleteItem`\n\nEste componente proporciona un botón para eliminar una tarea específica de la lista. Es utilizado por el componente `LocalStorageData`.\n\n#### Archivos Relevantes:\n- **delete-item.component.html**: Contiene la estructura HTML para el botón de eliminación.\n```html\n\u003cbutton (click)=\"deleteItem()\"\u003eEliminar\u003c/button\u003e \n```\n- **delete-item.component.ts**: Contiene la lógica TypeScript para manejar la eliminación de la tarea.\n```typescript\nimport { Component, Input, Output, EventEmitter } from '@angular/core'; \n\n@Component({ \n  selector: 'app-delete-item', \n  templateUrl: './\n\ndelete-item.component.html', \n  styleUrls: ['./delete-item.component.css'] \n}) \nexport class DeleteItemComponent { \n  @Input() item: any; \n  @Output() delete = new EventEmitter\u003cany\u003e(); \n\n  deleteItem(): void { \n    this.delete.emit(this.item); \n  } \n} \n```\n\nGIO\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpiedramacas%2Fangular-proyect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjpiedramacas%2Fangular-proyect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjpiedramacas%2Fangular-proyect/lists"}