{"id":21908915,"url":"https://github.com/notyel/pokedex-exercise-angular","last_synced_at":"2025-04-16T01:54:02.325Z","repository":{"id":195688433,"uuid":"693411615","full_name":"notyel/pokedex-exercise-angular","owner":"notyel","description":"Una aplicación Pokédex desarrollada en Angular con fines educativos. Explore el mundo de los Pokémon, obtenga detalles sobre sus habilidades y características","archived":false,"fork":false,"pushed_at":"2024-08-17T04:37:24.000Z","size":931,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T03:51:12.544Z","etag":null,"topics":["angular","learn","learning","learning-exercise","pokeapi","pokedex","pokemon","pokemon-api"],"latest_commit_sha":null,"homepage":"https://pokedex-exercise-angular.vercel.app","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/notyel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-09-19T01:32:30.000Z","updated_at":"2025-03-26T22:38:39.000Z","dependencies_parsed_at":"2024-06-03T05:39:55.084Z","dependency_job_id":"0c898cc6-bac5-42ff-ad28-986fc703a947","html_url":"https://github.com/notyel/pokedex-exercise-angular","commit_stats":null,"previous_names":["notyel/pokedex-exercise-angular"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notyel%2Fpokedex-exercise-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notyel%2Fpokedex-exercise-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notyel%2Fpokedex-exercise-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notyel%2Fpokedex-exercise-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notyel","download_url":"https://codeload.github.com/notyel/pokedex-exercise-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249183099,"owners_count":21226140,"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","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","learn","learning","learning-exercise","pokeapi","pokedex","pokemon","pokemon-api"],"created_at":"2024-11-28T17:14:23.054Z","updated_at":"2025-04-16T01:54:02.308Z","avatar_url":"https://github.com/notyel.png","language":"HTML","readme":"# pokedex-exercise-angular\n\n![Pokedex Logo](design-html/img/logo.png)\n\n**Pokedex Exercise Angular** es una aplicación **Pokédex** desarrollada en Angular con el objetivo de proporcionar una experiencia educativa y entretenida para los amantes de los **Pokémon**. Con esta aplicación, puedes explorar el fascinante mundo de los Pokémon y obtener información detallada sobre sus habilidades y características únicas.\n\n\u003cp align=\"center\"\u003e \u003cimg src=\"screenshots/screenshots-001.png\" /\u003e \u003c/p\u003e\n\n## Estado de Desarrollo\n\n⚠️ **Este proyecto está en fase de desarrollo y estoy trabajando en mejoras constantes.** Si encuentras algún error o tienes sugerencias, no dudes en informarme abriendo un [issue](https://github.com/notyel/pokedex-exercise-angular/issues).\n\nTambién estoy emocionado por las nuevas características que planeo agregar en el futuro, así que ¡mantente atento a las actualizaciones!\n\n## Estructura del Proyecto\n\nEl repositorio tiene la siguiente estructura de carpetas:\n- `design-html`: Contiene el diseño HTML del proyecto.\n- `pokedex-app`: La aplicación Angular.\n\n## Características Principales\n\n- **Exploración de Pokémon**: Navega por una amplia variedad de Pokémon y descubre sus detalles esenciales, como su nombre, tipo, altura y peso.\n\n- **Carga Dinámica**: Implementamos una carga dinámica desde la API pública [pokeapi.co](https://pokeapi.co/api/v2), lo que significa que puedes explorar una gran cantidad de Pokémon sin cargar todos los datos de una vez.\n\n- **Scroll Infinito**: ¡No te preocupes por cargar más Pokémon manualmente! Hemos incluido una función de scroll infinito que te permite cargar automáticamente más Pokémon a medida que desplazas la página hacia abajo.\n\n- **Carga Perezosa**: Mejoramos la eficiencia de la aplicación con la carga perezosa, lo que significa que los recursos se cargan según sea necesario, proporcionando una experiencia de usuario fluida.\n\n- **Pikachu como Loader**: Hemos añadido un toque de diversión con un simpático Pikachu corriendo como loader mientras se cargan los datos. ¡Te encantará!\n\n- **Detección de Imágenes SVG**: Detectamos automáticamente si una imagen es un archivo SVG y aplicamos estilos personalizados para garantizar una presentación adecuada.\n\n- **Estructura Modularizada**: La aplicación sigue una estructura modularizada en componentes y servicios para facilitar el desarrollo y el mantenimiento.\n\n## Uso\n\nPara ejecutar la aplicación, sigue estos pasos:\n\n1. Clona el repositorio:\n\n   ```shell\n   git clone https://github.com/tu-usuario/pokedex-exercise-angular.git\n   ```\n\n2. Navega al directorio de la aplicación:\n\n   ```shell\n   cd pokedex-exercise-angular/pokedex-app\n   ```\n\n3. Instala las dependencias:\n\n   ```shell\n   npm install\n   ```\n\n4. Inicia la aplicación:\n\n   ```shell\n   ng serve\n   ```\n\n5. Abre tu navegador y accede a [http://localhost:4200/](http://localhost:4200/) para explorar la Pokédex, [Demo](https://pokedex-exercise-angular.vercel.app/pokedex).\n\n## ¿Qué es Angular? (Información de interes)\n\n**Angular** es un popular framework de desarrollo de aplicaciones web y móviles. Fue creado por Google y es una de las herramientas más utilizadas para la creación de aplicaciones web de una sola página (*SPA*, por sus siglas en inglés) y aplicaciones web progresivas (*PWA*). Angular se basa en el lenguaje TypeScript y ofrece un conjunto de herramientas y bibliotecas que facilitan la creación de aplicaciones web complejas y dinámicas.\n\nAlgunas de las características clave de Angular incluyen:\n\n1. **Componentes**: Angular se basa en un sistema de componentes, lo que significa que la interfaz de usuario se descompone en piezas reutilizables llamadas componentes. Cada componente tiene su propio HTML, CSS y lógica de JavaScript/TypeScript.\n\n2. **Enlace de datos bidireccional**: Angular proporciona enlace de datos bidireccional, lo que permite la sincronización automática de datos entre el modelo y la vista. Cuando los datos cambian en el modelo, la vista se actualiza automáticamente y viceversa.\n\n3. **Inyección de dependencias**: Angular utiliza un sistema de inyección de dependencias que facilita la gestión de las dependencias y la creación de componentes y servicios de manera modular y mantenible.\n\n4. **Enrutamiento**: Angular incluye un módulo de enrutamiento que permite crear aplicaciones de una sola página con múltiples vistas y rutas. Esto es especialmente útil para aplicaciones web que tienen múltiples páginas o secciones.\n\n5. **Directivas**: Angular ofrece directivas personalizadas que permiten extender el HTML con funcionalidades personalizadas. Por ejemplo, la directiva `ngFor` se utiliza para iterar sobre una lista de elementos en la vista.\n\n6. **Compatibilidad con TypeScript**: Angular se desarrolla con TypeScript, un superconjunto de JavaScript que agrega tipos estáticos y otras características que facilitan el desarrollo y la detección temprana de errores en el código.\n\n7. **Herramientas de desarrollo**: Angular proporciona herramientas de desarrollo robustas, como Angular CLI (Command Line Interface) para crear y gestionar proyectos, así como herramientas de depuración y pruebas.\n\nAngular es ampliamente utilizado en la industria para crear aplicaciones web complejas y de alto rendimiento. Su arquitectura modular y su énfasis en las mejores prácticas de desarrollo hacen que sea una elección popular para desarrolladores y equipos de desarrollo que trabajan en proyectos web exigentes.\n\n## Contribución\n\nSi deseas contribuir a este proyecto, por favor sigue estos pasos:\n\n1. Haz un fork del repositorio.\n2. Crea una rama para tu contribución: `git checkout -b mi-contribucion`.\n3. Realiza tus cambios y realiza un commit: `git commit -m \"Añade nuevas características\"`.\n4. Sube tus cambios a tu repositorio: `git push origin mi-contribucion`.\n5. Abre una solicitud de extracción (Pull Request) en el repositorio original.\n\n## Licencia\n\nEste proyecto está bajo la Licencia MIT. Consulta el archivo [LICENSE](LICENSE) para obtener más detalles.\n\n---\n\nHecho con ❤️ por [Leyton Manuel Espitia Diaz](https://github.com/notyel) | [Github](https://github.com/notyel)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotyel%2Fpokedex-exercise-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotyel%2Fpokedex-exercise-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotyel%2Fpokedex-exercise-angular/lists"}