{"id":15898353,"url":"https://github.com/pppw/angular-vs-react-simple-example","last_synced_at":"2026-04-12T12:36:22.803Z","repository":{"id":93596623,"uuid":"128406355","full_name":"PPPW/Angular-vs-React-Simple-Example","owner":"PPPW","description":null,"archived":false,"fork":false,"pushed_at":"2018-10-30T15:15:22.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T19:12:27.103Z","etag":null,"topics":["angular","flask","react","webapp"],"latest_commit_sha":null,"homepage":null,"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/PPPW.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":"2018-04-06T14:35:35.000Z","updated_at":"2018-10-30T15:15:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"29b5651f-c265-4b58-a197-d986365398e7","html_url":"https://github.com/PPPW/Angular-vs-React-Simple-Example","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"2b9d976f8b4e28bd5046912067b73f88fdf3b276"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PPPW/Angular-vs-React-Simple-Example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PPPW%2FAngular-vs-React-Simple-Example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PPPW%2FAngular-vs-React-Simple-Example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PPPW%2FAngular-vs-React-Simple-Example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PPPW%2FAngular-vs-React-Simple-Example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PPPW","download_url":"https://codeload.github.com/PPPW/Angular-vs-React-Simple-Example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PPPW%2FAngular-vs-React-Simple-Example/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267098186,"owners_count":24035716,"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-07-25T02:00:09.625Z","response_time":70,"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","flask","react","webapp"],"created_at":"2024-10-06T10:02:29.036Z","updated_at":"2026-04-12T12:36:17.780Z","avatar_url":"https://github.com/PPPW.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular vs. React: A Simple Example\n\nTwo versions of a same simple web app are created by using: \n\n* Back-end: Flask\n* Front-end: Angular vs. React\n\nIt demonstrates and compares the basics of the two front-end frameworks/libraries, such as routing, HTTP requests, testing, etc. \n\n## Overview\n\nThe app looks like this:\n\n![On large screen](/images/large_screen.png)\n\nIt has a navigation sidebar, a dumb homepage and a data page. The data page loads data from the server. \nOn smaller screens, the navigation sidebar collapses into a dropdown button: \n\n![On small screen](/images/small_screen.png)\n\nThe navigation sidebar demonstrates how to do routing, the data page demonstrates how to perform ajax requests and show the results. \n\n## Introduction\n\nThe back-end used Flask, a light-weight web framework in Python. This [Flask template](https://github.com/PPPW/Flask-Web-App-Template) is used here. \n\nThe same app is built with Angular and React. The two versions are in the `Angular` folder and `React` folder respectively. Official CLI tools, [Angular CLI](https://github.com/angular/angular-cli) and [Create React App](https://github.com/facebook/create-react-app) are used to create and manage the front-end.  \n\nBootstrap is used in here for styling. Note that both Angular and React recommend to use their own Bootstrap library, because the original bootstrap.js requires jQuery. DOM manipulation should be totally handled by Angular and React, it's not recommended to include jQuery. \n\n## Usage\n\nSee the [Angular](https://github.com/PPPW/Angular-vs-React-Simple-Example/tree/master/Angular) folder and the [React](https://github.com/PPPW/Angular-vs-React-Simple-Example/tree/master/React) folder for more details. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpppw%2Fangular-vs-react-simple-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpppw%2Fangular-vs-react-simple-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpppw%2Fangular-vs-react-simple-example/lists"}