{"id":18255911,"url":"https://github.com/nothingnothings/angulardex","last_synced_at":"2026-05-07T00:40:06.239Z","repository":{"id":166601540,"uuid":"639233993","full_name":"nothingnothings/AngularDex","owner":"nothingnothings","description":"Basic Pokédex Built with Angular","archived":false,"fork":false,"pushed_at":"2024-09-26T14:03:35.000Z","size":1926,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-14T17:41:10.499Z","etag":null,"topics":["angular","angular-router","angular16","angularjs","axios","github-actions","github-pages","http-module","single-page-app","single-page-app-with-angularjs","state-management","typescript"],"latest_commit_sha":null,"homepage":"https://nothingnothings.github.io/AngularDex/","language":"TypeScript","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/nothingnothings.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-05-11T03:39:13.000Z","updated_at":"2024-09-26T14:03:39.000Z","dependencies_parsed_at":"2024-11-05T10:35:10.392Z","dependency_job_id":null,"html_url":"https://github.com/nothingnothings/AngularDex","commit_stats":null,"previous_names":["nothingnothings/angulardex"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FAngularDex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FAngularDex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FAngularDex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nothingnothings%2FAngularDex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nothingnothings","download_url":"https://codeload.github.com/nothingnothings/AngularDex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247936867,"owners_count":21021148,"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","angular-router","angular16","angularjs","axios","github-actions","github-pages","http-module","single-page-app","single-page-app-with-angularjs","state-management","typescript"],"created_at":"2024-11-05T10:19:03.660Z","updated_at":"2026-05-07T00:40:06.189Z","avatar_url":"https://github.com/nothingnothings.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eAngularDex - FireRed - A Pokédex Built with Angular\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/android-chrome-512x512.png\" alt=\"AngularDex-logo\" width=\"120px\" height=\"120px\"/\u003e\n  \u003cbr\u003e\n  \u003ci\u003eThis webApp is an example of an application that can be built with the \n    \u003cbr\u003eJavaScript framework Angular.\u003c/i\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://nothingnothings.github.io/AngularDex\" target=\"_blank\" rel=\"noreferrer noopener\"\u003e\u003cstrong\u003ehttps://nothingnothings.github.io/AngularDex\u003c/strong\u003e\u003c/a\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\n\n\n## Introduction\n\n![AngularDex](snapshots/AngularDex1.png)\n\n\n\n\n![AngularDex](snapshots/AngularDex2.png)\n\n\n\nSingle Page Application (SPA) built with the Angular library/framework (ng new project-name). The app's design was inspired by the site [https://pokeapi.co](https://pokeapi.co). Bootstrap, Flexbox, and media queries were used to create a responsive design (attempting to provide the best possible experience across multiple screen configurations/devices, both desktop and mobile, with different resolutions). Following the philosophy of the Angular Framework, the app was structured using features such as modules, components, services, and interceptors.\n\n\nThe app was initialized/bootstrapped with the command/environment `ng new project-name` and deployed with GitHub Pages, assisted by GitHub Actions.\n\n\n![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/nothingnothings/AngularDex/master)\n[![en](https://img.shields.io/badge/lang-en-red.svg?style=flat-square)](https://github.com/nothingnothings/AngularDex)\n[![pt-br](https://img.shields.io/badge/lang-pt--br-green.svg?style=flat-square)](https://github.com/nothingnothings/AngularDex/blob/master/README.pt-br.md)\n\n\n\n\n \n## Technologies\n \nSome of the languages and libraries that were used:\n\n- Node Package Manager (bootstrapping and managing the React application)\n- HTML5\n- SASS (for better organization of CSS rules, nested rules, etc.)\n- CSS3 (animations, Flexbox, media queries)\n- Angular version 16 (JavaScript framework that proposes the comprehensive structuring of the app in Angular modules, components, services, and interceptors)\n- TypeScript (for type safety of objects received from backend endpoints; Models and Interfaces, etc.)\n- Angular Router (for navigation between the different \"pages\" of the application)\n- State management (two main states: the central one provided by the \"pokedex.service.ts\" service, used in the \"Pokedex\" and \"Search for a Pokémon\" pages, and the \"local\" state used on the \"PokemonDetails\" page, accessed via the route \"/pokedex/:idDoPokemon\")\n- Bootstrap (used for the navigation bar and overall positioning of elements on the page, with \"container\", \"row\", and \"col\")\n- Axios (for communication, requests, and responses between this frontend application and the targeted backend, the API endpoints provided by the \"pokeapi.co\" domain. Used on the \"PokemonDetails\" page)\n- Http Module (used for communication between the Angular application and the targeted backend; seen on the \"Pokedex\" page)\n \n \n## Project Directory Structure\n\nThe development environment (created using the tool/environment/workflow `ng new project-name`):\n\n\n```\n\n.\\\n│\n├── .github\\\n│   │\n│   └── workflows\\\n│       └── publish.yml\n│\n│\n├── .vscode\\\n│   ├── extensions.json\n│   ├── launch.json\n│   └── tasks.json\n│\n├── snapshots\\\n│   ├── AngularDex1.png\n│   └── AngularDex2.png\n│\n├── src\\\n│   │\n│   ├── app\\\n│   │   │\n│   │   ├── components\\\n│   │   │   │\n│   │   │   ├── UI\\\n│   │   │   │   │\n│   │   │   │   ├── pokeBall\\\n│   │   │   │   │   ├── pokeBall.component.html\n│   │   │   │   │   ├── pokeBall.component.scss\n│   │   │   │   │   └── pokeBall.component.ts\n│   │   │   │   │\n│   │   │   │   ├── pokedexWrapper\\\n│   │   │   │   │   ├── pokedexWrapper.component.html\n│   │   │   │   │   ├── pokedexWrapper.component.scss\n│   │   │   │   │   └── pokedexWrapper.component.ts\n│   │   │   │   │\n│   │   │   │   ├── spinner\\\n│   │   │   │   │   ├── spinner.component.html\n│   │   │   │   │   └── spinner.component.ts\n│   │   │   │   │\n│   │   │   │   └── toolbar\\\n│   │   │   │       │\n│   │   │   │       ├── mainNavigation\\\n│   │   │   │       │   │\n│   │   │   │       │   ├── navigationItems\\\n│   │   │   │       │   │   ├── navigationItems.component.html\n│   │   │   │       │   │   ├── navigationItems.component.scss\n│   │   │   │       │   │   └── navigationItems.component.ts\n│   │   │   │       │   │\n│   │   │   │       │   ├── mainNavigation.component.html\n│   │   │   │       │   ├── mainNavigation.component.scss\n│   │   │   │       │   └── mainNavigation.component.ts\n│   │   │   │       │\n│   │   │   │       ├── toolbar.component.html\n│   │   │   │       ├── toolbar.component.scss\n│   │   │   │       └── toolbar.component.ts\n│   │   │   │\n│   │   │   │\n│   │   │   └── errorComponent\\\n│   │   │       ├── errorComponent.component.html\n│   │   │       ├── errorComponent.component.scss\n│   │   │       └── errorComponent.component.ts\n│   │   │\n│   │   │\n│   │   ├── interceptors\\\n│   │   │   └── interceptor.ts\n│   │   │\n│   │   ├── modules\\\n│   │   │   ├── pokedex.module.ts\n│   │   │   ├── pokemonDetails.module.ts\n│   │   │   └── shared.module.ts\n│   │   │\n│   │   ├── pages\\\n│   │   │   │\n│   │   │   ├── PokedexPage\\\n│   │   │   │   │\n│   │   │   │   ├── pokeSearch\\\n│   │   │   │   │   ├── pokeSearch.component.html\n│   │   │   │   │   └── pokeSearch.component.ts\n│   │   │   │   │\n│   │   │   │   └── pokedex\\\n│   │   │   │       │\n│   │   │   │       ├── card\\\n│   │   │   │       │   ├── card.component.html\n│   │   │   │       │   ├── card.component.scss\n│   │   │   │       │   └── card.component.ts\n│   │   │   │       │\n│   │   │   │       ├── pokedex.component.html\n│   │   │   │       └── pokedex.component.ts\n│   │   │   │\n│   │   │   │\n│   │   │   └── PokemonDetailsPage\\\n│   │   │       │\n│   │   │       ├── pokemonDetailsCard\\\n│   │   │       │   ├── pokemonDetailsCard.component.html\n│   │   │       │   ├── pokemonDetailsCard.component.scss\n│   │   │       │   └── pokemonDetailsCard.component.ts\n│   │   │       │\n│   │   │       ├── pokemonDetails.component.html\n│   │   │       └── pokemonDetails.component.ts\n│   │   │\n│   │   │\n│   │   ├── resolvers\\\n│   │   │   └── pokedex-resolver.service.ts\n│   │   │\n│   │   ├── services\\\n│   │   │   ├── loader.service.ts\n│   │   │   └── pokedex.service.ts\n│   │   │\n│   │   ├── types\\\n│   │   │   ├── navItem.model.ts\n│   │   │   ├── pokemon.model.ts\n│   │   │   └── simplePokemon.model.ts\n│   │   │\n│   │   ├── app-routing.module.ts\n│   │   ├── app.component.html\n│   │   ├── app.component.scss\n│   │   ├── app.component.spec.ts\n│   │   ├── app.component.ts\n│   │   └── app.module.ts\n│   │\n│   ├── assets\\\n│   │   │\n│   │   ├── fonts\\\n│   │   │   └── Pokemon Solid.ttf\n│   │   │\n│   │   ├── images\\\n│   │   │   ├── angular-logo.png\n│   │   │   └── github-logo.png\n│   │   │\n│   │   └── .gitkeep\n│   │\n│   ├── environments\\\n│   │   ├── environment.prod.ts\n│   │   └── environment.ts\n│   │\n│   ├── android-chrome-192x192.png\n│   ├── android-chrome-512x512.png\n│   ├── apple-touch-icon.png\n│   ├── browserconfig.xml\n│   ├── favicon-16x16.png\n│   ├── favicon-32x32.png\n│   ├── favicon.ico\n│   ├── index.html\n│   ├── main.ts\n│   ├── manifest.json\n│   ├── mstile-150x150.png\n│   ├── site.webmanifest\n│   └── styles.scss\n│\n├── .editorconfig\n├── .gitignore\n├── LICENSE\n├── README.md\n├── angular.json\n├── package-lock.json\n├── package.json\n├── tsconfig.app.json\n├── tsconfig.json\n└── tsconfig.spec.json\n```\n\n\nThe production output of `npm run build`, which can be viewed in the `gh-pages` branch (responsible for the app's deployment):\n\n\n\n```\n.\\\n│\n├── assets\\\n│   │\n│   ├── fonts\\\n│   │   └── Pokemon Solid.ttf\n│   │\n│   └── images\\\n│       ├── angular-logo.png\n│       └── github-logo.png\n│\n│\n├── .nojekyll\n├── 3rdpartylicenses.txt\n├── Pokemon Solid.c76e219434a39b20.ttf\n├── favicon.ico\n├── index.html\n├── main.b4397b76ab87e8f1.js\n├── polyfills.fca542ed0eca6182.js\n├── runtime.363954a89fca85d6.js\n└── styles.4522b103f35ddef3.css\n```\n\n\n\n\n## Project Configuration Files (package.json and tsconfig.json)\n\nThe package.json file used in the project:\n\n```\n{\n  \"name\": \"angular-dex\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build --configuration production --base-href https://nothingnothings.github.io/AngularDex/\",\n    \"watch\": \"ng build --watch --configuration development\",\n    \"test\": \"ng test\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"^16.0.0\",\n    \"@angular/common\": \"^16.0.0\",\n    \"@angular/compiler\": \"^16.0.0\",\n    \"@angular/core\": \"^16.0.0\",\n    \"@angular/forms\": \"^16.0.0\",\n    \"@angular/platform-browser\": \"^16.0.0\",\n    \"@angular/platform-browser-dynamic\": \"^16.0.0\",\n    \"@angular/router\": \"^16.0.0\",\n    \"@types/axios\": \"^0.14.0\",\n    \"axios\": \"^1.4.0\",\n    \"rxjs\": \"~7.8.0\",\n    \"tslib\": \"^2.3.0\",\n    \"zone.js\": \"~0.13.0\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"^16.0.1\",\n    \"@angular/cli\": \"~16.0.1\",\n    \"@angular/compiler-cli\": \"^16.0.0\",\n    \"@types/jasmine\": \"~4.3.0\",\n    \"jasmine-core\": \"~4.6.0\",\n    \"karma\": \"~6.4.0\",\n    \"karma-chrome-launcher\": \"~3.2.0\",\n    \"karma-coverage\": \"~2.2.0\",\n    \"karma-jasmine\": \"~5.1.0\",\n    \"karma-jasmine-html-reporter\": \"~2.0.0\",\n    \"typescript\": \"~5.0.2\"\n  }\n}\n\n\n```\n\n\nThe tsconfig.json file used in the project:\n\n```\n\n/* To learn more about this file see: https://angular.io/config/tsconfig. */\n{\n  \"compileOnSave\": false,\n  \"compilerOptions\": {\n    \"baseUrl\": \"./\",\n    \"outDir\": \"./dist/out-tsc\",\n    \"forceConsistentCasingInFileNames\": true,\n    \"strict\": true,\n    \"noImplicitOverride\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noImplicitReturns\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"sourceMap\": true,\n    \"declaration\": false,\n    \"downlevelIteration\": true,\n    \"experimentalDecorators\": true,\n    \"moduleResolution\": \"node\",\n    \"importHelpers\": true,\n    \"target\": \"ES2022\",\n    \"module\": \"ES2022\",\n    \"useDefineForClassFields\": false,\n    \"lib\": [\n      \"ES2022\",\n      \"dom\"\n    ]\n  },\n  \"angularCompilerOptions\": {\n    \"enableI18nLegacyMessageIdFormat\": false,\n    \"strictInjectionParameters\": true,\n    \"strictInputAccessModifiers\": true,\n    \"strictTemplates\": true\n  }\n}\n\n\n\n```\n\n## Installation/Usage\n\n\nTo use this project, clone it using Git:\n\n1. Run `git clone` to clone the project into your local Git repository.\n2. Run `npm install` to install all dependencies (`axios`, `angular`, etc.).\n3. Run `npm run build` to create the production/deployment version of the application (produced in the `/dist/angular-dex` directory).\n4. Serve the production/deployment files locally or on the web (with the help of a hosting service).\n5. On the \"Pokédex\" page, click/tap on the Pokémon whose characteristics you wish to view. On the \"Search for a Pokémon\" page, type the name of the Pokémon you want to search for.\n\n\n## Features\n\n- Single Page Application (SPA) with no page reloads, single HTML file (Angular).\n- The application is divided into various components, some of which are reused in different pages (design philosophy of the Angular library).\n- Design created with CSS (compiled from .scss files).\n- Responsive design (adaptive, supporting mobile and desktop devices) created with Bootstrap, Flexbox, and media queries.\n- Utilization of GitHub Actions and GitHub Pages with the tool `ng new project-name` to build a seamless workflow (transition from development to production/deployment phase). From the `git push` command, GitHub Actions transfers the contents of the `master` branch to the `gh-pages` branch, which then deploys the app at https://nothingnothings.github.io/AngularDex/.\n- Use of the Axios library for communication with the backend \"pokeapi.co\", providing Pokémon data (names, IDs, weight, height, types, abilities, etc.) to the Vue application.\n- Usage of Angular directives such as ``*ngIf``, ``*ngFor``, ``[ngClass]``, and ``[ngStyle]``.\n- Usage of Angular features like ``modules``, ``components``, ``services``, and ``interceptors``.\n- Custom loading spinner (Pokéball).\n- Custom error page with output of the error message/reason to the user.\n- Favicon compatible with various devices.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fangulardex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnothingnothings%2Fangulardex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnothingnothings%2Fangulardex/lists"}