{"id":31779054,"url":"https://github.com/shootermv/enchancing-heroes-tour-example","last_synced_at":"2026-05-19T14:04:13.790Z","repository":{"id":38626938,"uuid":"233551045","full_name":"shootermv/enchancing-heroes-tour-example","owner":"shootermv","description":"angular heroes-tour repo with additional features","archived":false,"fork":false,"pushed_at":"2023-03-03T11:43:39.000Z","size":1843,"stargazers_count":0,"open_issues_count":22,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-10T07:02:34.716Z","etag":null,"topics":["angular","angular8","animations","beginners","nested-routes","tests"],"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/shootermv.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":"2020-01-13T08:50:15.000Z","updated_at":"2022-01-14T05:53:45.000Z","dependencies_parsed_at":"2025-10-10T07:01:24.695Z","dependency_job_id":"c9a3801a-c216-4831-b08a-d48c2e921270","html_url":"https://github.com/shootermv/enchancing-heroes-tour-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shootermv/enchancing-heroes-tour-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shootermv%2Fenchancing-heroes-tour-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shootermv%2Fenchancing-heroes-tour-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shootermv%2Fenchancing-heroes-tour-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shootermv%2Fenchancing-heroes-tour-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shootermv","download_url":"https://codeload.github.com/shootermv/enchancing-heroes-tour-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shootermv%2Fenchancing-heroes-tour-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33219390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-19T07:54:09.561Z","status":"ssl_error","status_checked_at":"2026-05-19T07:54:08.508Z","response_time":58,"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","angular8","animations","beginners","nested-routes","tests"],"created_at":"2025-10-10T06:59:17.347Z","updated_at":"2026-05-19T14:04:13.760Z","avatar_url":"https://github.com/shootermv.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Motivation\nAngular guys did a great work by publishing the [hero-tours](https://stackblitz.com/angular/ybbdbroqogm) example app.  \nYet there are some angular features which (for my opinion) left uncovered  \nMotivation behind this repo is - to give some more examples for some addtional angular features by implementing them in this repo.  \n\n\n## Commits\nAlso i tried dedicate special commit for each feature - so you can look at commits and see what exactly i did to implement each functionality.\n\n\n## Errors or Mistakes\nSince im a human(or so i thought until now) - it can happen you may see some mistakes or places for improvements. In such a case - will be happy to have your PRs (pull requests) with fixes/improvents\n\n\n## Table of Content\n- [Demo](https://shootermv.github.io/enchancing-heroes-tour-example/)\n- [Nested Routes](#nested-routes)\n- [Route Guards](#route-guards)\n- [Tests](#tests)\n- [Anitmation](#transition-animations)\n- [Validation](#validation)\n- [ngContent](#ngcontent)\n- [Lazy Loaded Modules](#lazy-loaded-modules)\n- [Output](#output)\n\n## Nested Routes\nTo the original example hero`s data i have added \"deeds\" field, where i put records of deeds of this particular hero. some of them good and some - bad\n\n```json\n[\n  {\n    \"name\": \"Dr Nice\",\n    \"deeds\": [\n      {\n        \"id\": 1,\n        \"desc\": \"saved puppy\",\n        \"type\": \"good\"\n      },\n      {\n        \"id\": 2,\n        \"desc\": \"saved kitten\",\n        \"type\": \"good\"\n      }\n    ]\n  },\n  {\n    \"id\": 12,\n    \"name\": \"Narco\",\n    \"deeds\": [\n      {\n        \"id\": 3,\n        \"desc\": \"drived at 180kph\",\n        \"type\": \"bad\"\n      }\n    ]\n  }\n]\n```\nOn a 'hero-details' page you have a nested 'deeds' route where you can see the deeds of the hero (and decide whether this hero deserves present if you are Santa)\n\n\n## Route Guards\nSince some heroes are bad - their \"deeds\" may be bad too. We need to warn users that they may be exposed to some very very shocking stuff.  \nThat is why i decided to implement warning message before user can see hero dids\n\n\n## Tests\nIt is important that every piece of code has a test coverage. actually angular guys did [here](https://stackblitz.com/angular/qyvgpgnvmmr) very good stuff for demostration of tests,  \nyet, i will add a little bit more stuff of mine, who knows - may be this will help somebody too...  \nrun ```ng test``` and you should see some tests running...\n\n## Transition Animations\nSince we want our SPA(single page app) to look more modern and cool - animations is \"must-to-have\"  feature.  \nHere i added opacity transition - when navigating between pages the content appears/disappers gradually\n\n## Validation\nNo serious app cannot function without using forms and if so - validation is important feature.  \nHere i added simple 'required' validation of 'name' and 'email' inputs of hero at 'details' page. Until field is invalid - the 'save' button blocked from saving\n\n## ngContent\nWhen you need some custom markup to be contained inside your component - best way to handle this- by using 'ng-content' directive.  \nI have created a 'deed' component that conditionally displays 🍔 emoji(for unknown reason) if the hero deed is bad \n\n## Lazy Loaded Modules\nLazyness is usually a bad characteristics, unless you are Front End developer.\n\"about\" module is loaded lazily (only when user navigates there) and thus - the app is much more performant!\n\n## Output\n@ouput is a way for child to pass something to its parent. You can click on 'deed' and parent method of 'deeds' component will be triggered","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshootermv%2Fenchancing-heroes-tour-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshootermv%2Fenchancing-heroes-tour-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshootermv%2Fenchancing-heroes-tour-example/lists"}