{"id":20186117,"url":"https://github.com/leolanese/angular-signup-walkthrough","last_synced_at":"2026-04-14T10:31:22.286Z","repository":{"id":220362501,"uuid":"587265119","full_name":"leolanese/Angular-Signup-Walkthrough","owner":"leolanese","description":"Angular Sign-up","archived":false,"fork":false,"pushed_at":"2024-02-04T16:40:09.000Z","size":336,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-13T03:33:21.448Z","etag":null,"topics":["angular","css3","flex","javascript","moderangular","rxjs","typescript"],"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/leolanese.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-01-10T10:52:59.000Z","updated_at":"2024-02-01T16:18:40.000Z","dependencies_parsed_at":"2024-02-04T18:26:48.247Z","dependency_job_id":"968eebfa-fcc9-4d21-a005-7b8885a5c324","html_url":"https://github.com/leolanese/Angular-Signup-Walkthrough","commit_stats":null,"previous_names":["leolanese/angular-signup-walkthrough"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leolanese/Angular-Signup-Walkthrough","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signup-Walkthrough","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signup-Walkthrough/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signup-Walkthrough/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signup-Walkthrough/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leolanese","download_url":"https://codeload.github.com/leolanese/Angular-Signup-Walkthrough/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leolanese%2FAngular-Signup-Walkthrough/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31793212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"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","css3","flex","javascript","moderangular","rxjs","typescript"],"created_at":"2024-11-14T03:16:02.229Z","updated_at":"2026-04-14T10:31:22.268Z","avatar_url":"https://github.com/leolanese.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Signin/Signup Walkthrough Path body structure V1.0.1\n\nThis project was generated under [Angular CLI](https://github.com/angular/angular-cli) version 15.+ [Updated] Now using capacitator\n\n## Goal:\n\nThe goal is to develop a POC (proof-of-concept) that is disposable and allows for experimentation with signup processes, Observable Subscription pattern and Capacitator integration.\n\n\u003e The approach POC, utilises a modular design, where the navigation flow is built using Angular's routing functionality.\n \nThis allows for flexibility in making changes to the navigation structure more flexible, as modifying the route array of objects will be sufficient because changes to the navigation can be made without affecting other parts of the application. On top of that it is integrating Capacitator (Capacitor is an open source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS)\n\n## Link\nFurther information about `Angular` \u0026 `Capacitator`: https://capacitorjs.com/solution/angular\n\n---\n\n## State Adminstration \u0026 Observable Subscription pattern\n\n#### Avoid HTTP client observables in components\n\n• HTTP client observables are `cold observable`\u003cbr\u003e\n• Requires subscribe to be called to invoke\u003cbr\u003e\n• Each subscribe is a new HTTP request, which can `unintentionally be invoked multiple times`\u003cbr\u003e\n• Makes observables `more predictable`\u003cbr\u003e\n• Makes knowing when to call unsubscribe easier - Always unsubscribe when class is destroyed\u003cbr\u003e\n\n### Look out for:\n• Consuming HTTP client directly in components\u003cbr\u003e\n• Services exposing HTTP client observables to components / Breaks Reactive approach\u003cbr\u003e\n\n### Pattern\n\n• Encapsulating HTTP client methods and responses via service\u003cbr\u003e\n• Using HTTP client responses to update state observables / effects\u003cbr\u003e\n• (Optional): Creating 'controller' services that only facilitate the flow of data\u003cbr\u003e\n\n---\n\n## Run Development server\n\n```js\ncd \u003croot-project-folder\u003e\nng serve -o --poll=2000\n````\n\nNavigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n```js\n// cap add android\nnpx cap add android\n\n// cap add ios\nnpx cap add ios\n\n// XCode IOS / Android Studio Android Apps\nnpx cap open android\n```\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n\n---\n\n## Diagram Login/SignUp\n\n```js\n\n ../src/assets/mermaid/mermaid-*.json\n```\n\n## Run Mock Server on background: `json-server`\n\n```\n```js\ncd \u003croot-project-folder\u003e\njson-server --watch src/assets/db.json\n```\n\n## This will generate:\n```\n  \\{^_^}/ hi!\n\n  Loading src/assets/db.json\n  Done\n\n  Resources\n  http://localhost:3000/employees\n\n  Home\n  http://localhost:3000\n\n  Type s + enter at any time to create a snapshot of the database\n  Watching...\n\n```\n\n\u003e Note: Don’t close this terminal, otherwise it will kill the json-server. Below are the sample CRUD requests and responses.\n\n## JSON Server GET - Read All Employees\n```\n$ curl -X GET -H \"Content-Type: application/json\"  \"https://localhost:3000/employees\"\n[\n  {\n    \"id\": 1,\n    \"name\": \"Leo\",\n    \"salary\": \"10000\"\n  },\n  {\n    \"name\": \"Tom\",\n    \"salary\": \"5000\",\n    \"id\": 2\n  }\n]\n```\n\n##Get Employee based on ID from json-server\n```\ncurl -X GET -H \"Content-Type: application/json\"  \"https://localhost:3000/employees/1\"\n{\n  \"id\": 1,\n  \"name\": \"Leo\",\n  \"salary\": \"10000\"\n}\n```\n\n## JSON Server POST - Create an Employee\n```\ncurl -X POST -H \"Content-Type: application/json\" -d '{\"name\": \"Lisa\",\"salary\": \"2000\"}' \"https://localhost:3000/employees\"\n{\n\"name\": \"Tom\",\n\"salary\": 2000,\n\"id\": 3\n}\n```\n\n##JSON Server PUT - Update Employee Data\n```\ncurl -XPUT -H \"Content-Type: application/json\" -d '{\"name\": \"Lisa\", \"salary\": \"8000\"}' \"https://localhost:3000/employees/3\"\n{\n  \"name\": \"Lisa\",\n  \"salary\": 8000,\n  \"id\": 3\n}\n```\n\n## JSON Server DELETE - Delete an Employee\n```\n$ curl -X DELETE -H \"Content-Type: application/json\"  \"https://localhost:3000/employees/2\"\n{}\n$ curl -GET -H \"Content-Type: application/json\"  \"https://localhost:3000/employees\"\n[\n  {\n    \"id\": 1,\n    \"name\": \"Leo\",\n    \"salary\": \"10000\"\n  },\n  {\n    \"name\": \"Lisa\",\n    \"salary\": 8000,\n    \"id\": 3\n  }\n]\n```\n\n## Further information:\n[json-server](https://www.digitalocean.com/community/tutorials/json-server)\n\n\n---\n### :100: \u003ci\u003eThanks!\u003c/i\u003e\n#### Now, don't be an stranger. Let's stay in touch!\n\n\u003ca href=\"https://github.com/leolanese\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n  \u003cimg src=\"https://scastiel.dev/api/image/leolanese?dark\u0026removeLink\" alt=\"leolanese’s GitHub image\" width=\"600\" height=\"314\" /\u003e\n\u003c/a\u003e\n\n##### :radio_button: Linkedin: \u003ca href=\"https://www.linkedin.com/in/leolanese/\" target=\"_blank\"\u003eLeoLanese\u003c/a\u003e\n##### :radio_button: Twitter: \u003ca href=\"https://twitter.com/LeoLanese\" target=\"_blank\"\u003e@LeoLanese\u003c/a\u003e\n##### :radio_button: Portfolio: \u003ca href=\"https://www.leolanese.com\" target=\"_blank\"\u003ewww.leolanese.com\u003c/a\u003e\n##### :radio_button: DEV.to: \u003ca href=\"https://www.dev.to/leolanese\" target=\"_blank\"\u003edev.to/leolanese\u003c/a\u003e\n##### :radio_button: Blog: \u003ca href=\"https://www.leolanese.com/blog\" target=\"_blank\"\u003eleolanese.com/blog\u003c/a\u003e\n##### :radio_button: Questions / Suggestion / Recommendation: developer@leolanese.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-signup-walkthrough","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleolanese%2Fangular-signup-walkthrough","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleolanese%2Fangular-signup-walkthrough/lists"}