{"id":44001947,"url":"https://github.com/nadirinab/angular_pokemonapi","last_synced_at":"2026-02-07T12:34:04.230Z","repository":{"id":210604671,"uuid":"726992393","full_name":"NadirInab/Angular_PokemonApi","owner":"NadirInab","description":"this repo provide a clear vision and a raodmap as a starter of angular, it cover many notions such as : CLI, Components, Services, Directives, Dependecy Injection .... ","archived":false,"fork":false,"pushed_at":"2023-12-04T08:13:08.000Z","size":236,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-01-27T03:41:25.927Z","etag":null,"topics":["angular","dependency-injection","directive","javascript","routing"],"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/NadirInab.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}},"created_at":"2023-12-04T00:25:03.000Z","updated_at":"2023-12-04T23:11:47.000Z","dependencies_parsed_at":"2023-12-10T20:48:35.924Z","dependency_job_id":null,"html_url":"https://github.com/NadirInab/Angular_PokemonApi","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"6ceaa26bb90a743479edb20323d51779d6aaaf9d"},"previous_names":["nadirinab/angular_pokemonapi"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NadirInab/Angular_PokemonApi","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NadirInab%2FAngular_PokemonApi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NadirInab%2FAngular_PokemonApi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NadirInab%2FAngular_PokemonApi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NadirInab%2FAngular_PokemonApi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NadirInab","download_url":"https://codeload.github.com/NadirInab/Angular_PokemonApi/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NadirInab%2FAngular_PokemonApi/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29194028,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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","dependency-injection","directive","javascript","routing"],"created_at":"2026-02-07T12:34:03.516Z","updated_at":"2026-02-07T12:34:04.225Z","avatar_url":"https://github.com/NadirInab.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n     \u003cimg src=\"https://miro.medium.com/v2/resize:fit:640/format:webp/1*bMgQ8MhbnQexpqHgIgBJPA.png\" alt=\"Image Alt Text\"\u003e\n  \n\u003c/div\u003e\n\n![Javascript](https://img.shields.io/badge/Angular-red.svg)\n![Javascript](https://img.shields.io/badge/JavaScript-gold.svg)\n![Javascript](https://img.shields.io/badge/component-bleusvg)\n![Javascript](https://img.shields.io/badge/SPA-red.svg)\n![Javascript](https://img.shields.io/badge/dataBinding-white.svg)\n![Javascript](https://img.shields.io/badge/services-yellow.svg)\n![Javascript](https://img.shields.io/badge/typescript-bley.svg)\n\n## Angular : \n- Angular is a platform for building web applications using TypeScript, HTML, and CSS. \n- It provides tools and structures to create interactive, dynamic, and single-page applications. Angular simplifies development by offering a framework that organizes code, manages data, handles user interactions, and helps create a seamless user experience on the web.\n\n### Few notions : \n\n## Components:\n-  Components are the individual parts of an Angular application that encapsulate specific features or sections.\n-  They consist of : TypeScript code, HTML templates, and styles.\n\n# Modules\n- Modules are containers that group related components, directives, pipes, and services in an Angular application. They help organize and manage the overall structure of the app.\n  \n# Services:\n- Services are reusable pieces of code that perform specific tasks or provide shared data and functionality across components. \n- They promote code reuse and maintain a separation of concerns.\n\n\n# Angular CLI :\nAngular CLI provides many commands for various tasks, such as generating services, pipes, modules, and more. Here some the most common used ones : \n\n- Create a new Angular application :\n  \n```md\n  ng new my-app\n\n```\n\n- Generate a new component::\n  \n```md\n  ng generate component my-component\n\n\n```\n- Serve the application locally: :\n  \n```md\n  ng serve\n\n```\n\n- Run unit tests: :\n  \n```md\n ng test\n\n\n```\n\n# Angular templates : \n Angular templates involves data binding and interpolation.\n\n ## interpolation {{ expression }} \n - Interpolation is a way to output the result of an expression in the HTML template. \n\n```md\n\u003cp\u003eWelcome, {{ username }}!\u003c/p\u003e\n\n```\n\n ## Property Binding [property]=\"expression\" \n - Property binding allows you to set the value of an HTML element's property to the result of an expression.\n  \n\n```md\n\u003cimg [src]=\"imageUrl\" alt=\"Image\"\u003e\n\n```\n\n ## Event Binding (event)=\"expression\"\n - Event binding allows you to respond to user events (e.g., clicks, mouseovers).\n  \n\n```md\n\u003cbutton (click)=\"onButtonClick()\"\u003eClick me\u003c/button\u003e\n\n\n```\n\n# Directives : \n- Directives play a crucial role in enhancing the declarative nature of Angular templates and making it easier to build dynamic and interactive web applications,  Angular has several built-in directives : \n- ngIf: Conditionally rendering elements.\n\n```md\n\u003cdiv *ngIf=\"isLoggedIn\"\u003eWelcome, {{ username }}!\u003c/div\u003e\n\n```\n\n- ngFor: Iterating over a collection to generate a list of elements.\n\n```md\n\u003cul\u003e\n  \u003cli *ngFor=\"let item of items\"\u003e{{ item }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n- ngSwitch : Switching between multiple cases based on a condition.\n\n```md\n\u003cdiv [ngSwitch]=\"color\"\u003e\n  \u003cdiv *ngSwitchCase=\"'red'\"\u003eRed\u003c/div\u003e\n  \u003cdiv *ngSwitchCase=\"'blue'\"\u003eBlue\u003c/div\u003e\n  \u003cdiv *ngSwitchDefault\u003eOther\u003c/div\u003e\n\u003c/div\u003e\n\n\n```\n- ngStyle : Dynamically applying styles to an element.\n\n```md\n\u003cdiv [ngStyle]=\"{ 'color': textColor, 'font-size': fontSize + 'px' }\"\u003eStyled Text\u003c/div\u003e\n\n\n\n```\n\n\n## OnInit :\n- The OnInit interface in Angular is used to define a lifecycle hook for a component. \n- Specifically, the OnInit interface has a single method called ngOnInit(), which is a lifecycle hook that is called after the component has been initialized.\n- this hook to perform any initialization logic needed for the component, such as fetching data, setting up subscriptions.\n  \n- The Component decorator is used to define the metadata for the component, including the selector, template, and style URLs.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadirinab%2Fangular_pokemonapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnadirinab%2Fangular_pokemonapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnadirinab%2Fangular_pokemonapi/lists"}