{"id":14986860,"url":"https://github.com/ui-router/sample-app-angular","last_synced_at":"2025-04-05T04:13:46.141Z","repository":{"id":17031930,"uuid":"81029222","full_name":"ui-router/sample-app-angular","owner":"ui-router","description":"UI-Router for Angular - Sample Application (angular-cli)","archived":false,"fork":false,"pushed_at":"2025-01-16T11:12:23.000Z","size":10950,"stargazers_count":88,"open_issues_count":109,"forks_count":49,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T03:10:04.528Z","etag":null,"topics":["angular","angular-cli","router","sample","ui-router"],"latest_commit_sha":null,"homepage":"http://ui-router.github.io/sample-app-angular/#/mymessages/inbox/5648b50cc586cac4aed6836f","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/ui-router.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":"2017-02-05T23:14:07.000Z","updated_at":"2025-01-04T00:51:25.000Z","dependencies_parsed_at":"2025-01-04T20:11:59.414Z","dependency_job_id":"c1fc59b1-d175-429b-b06a-3586bc4d8a09","html_url":"https://github.com/ui-router/sample-app-angular","commit_stats":{"total_commits":505,"total_committers":16,"mean_commits":31.5625,"dds":0.6257425742574257,"last_synced_commit":"4a0b73f648d8023e771023a855c8d939f316f4ba"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsample-app-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsample-app-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsample-app-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Fsample-app-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-router","download_url":"https://codeload.github.com/ui-router/sample-app-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247284951,"owners_count":20913704,"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-cli","router","sample","ui-router"],"created_at":"2024-09-24T14:13:41.155Z","updated_at":"2025-04-05T04:13:46.119Z","avatar_url":"https://github.com/ui-router.png","language":"TypeScript","readme":"## UI-Router for Angular - Sample Application\n\n[![Travis badge](https://travis-ci.org/ui-router/sample-app-angular.svg?branch=master)](https://travis-ci.org/ui-router/sample-app-angular)\n[![Greenkeeper badge](https://badges.greenkeeper.io/ui-router/sample-app-angular.svg)](https://greenkeeper.io/)\n\nThis project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.30.\n\nLive demo: http://ui-router.github.io/sample-app-angular/#/mymessages/inbox/5648b50cc586cac4aed6836f\n\nEdit this project in your browser: https://stackblitz.com/github/ui-router/sample-app-angular\n\nThis sample app is intended to demonstrate a non-trivial ui-router application.\n\n- Multiple sub-modules\n- Managed state lifecycle\n- Application data lifecycle\n- Authentication (simulated)\n- Authenticated and unauthenticated states\n- REST data retrieval (simulated)\n- Lazy loaded Angular modules (contacts/mymessages/prefs submodules)\n\n---\n\n### Visualizer\n\nWe're using the [State and Transition Visualizer](http://github.com/ui-router/visualizer) to visually represent \nthe current state tree, as well as the transitions between states.\nExplore how transitions work by hovering over them, and clicking to expand details (params and resolves).\n\nNote how states are _entered_ when they were previously not active, _exited_ and re-_entered_ when parameters change,\n and how parent states whose parameters did not change are _retained_.\nEach of these (_exited, entered, retained_) correspond to a Transition Hook.\n\n### Structure\n\nThere are many ways to structure a ui-router app.\nWe aren't super opinionated on application structure.\nUse what works for you.\nWe organized ours in the following way:\n\n- Feature modules\n  - Each feature gets its own directory and Angular Module (`@NgModule`)\n  - Features contain states and components\n  - Specific types of helper code (directives, services, etc) _used only within a feature_ may live in a subdirectory\n  named after its type\n- Leveraging ES6 modules\n  - States for a module are defined in separate file\n  - Each component is defined in its own file\n  - Components are referenced in states where they are composed into the state definition\n  - States export themselves\n  - Each feature `@NgModule` imports and declares all the states for the feature\n\n### UI-Router Patterns\n  \n- Defining custom, app-specific global behaviors\n  - Add metadata to a state, or state tree (such as `authRequired`)\n  - Check for metadata in transition hooks\n  - Example: `routerhooks/authRequired.js`\n    - If a transition to a state with a truthy `data.authRequired: true` property is started and the user is not currently authenticated\n- Defining a default substate for a top-level state\n  - Example: declaring `redirectTo: 'welcome'` in `app.states.ts`\n- Defining a default parameter for a state\n  - Example: `folderId` parameter defaults to 'inbox' in `mymessages.states.ts` (folder state)\n- Application data lifecycle\n  - Data loading is managed by the state declaration, via the `resolve:` block\n  - Data is fetched before the state is _entered_\n  - Data is fetched according to state parameters\n  - The state is _entered_ when the data is ready\n  - The resolved data is injected into the components\n  - The resolve data remains loaded until the state is exited\n- Lazy Loaded states\n  - The main submodules (and all their states and components) are lazy loaded\n  - The future state includes a `loadChildren` property which is used to lazy load the module\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Fsample-app-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-router%2Fsample-app-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Fsample-app-angular/lists"}