{"id":19541367,"url":"https://github.com/wingify/ui-router","last_synced_at":"2026-06-09T22:31:32.875Z","repository":{"id":69982685,"uuid":"50024215","full_name":"wingify/ui-router","owner":"wingify","description":"angular ui router","archived":false,"fork":false,"pushed_at":"2016-01-20T17:18:25.000Z","size":1499,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-08-07T19:23:34.688Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wingify.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-20T10:56:58.000Z","updated_at":"2020-09-17T08:19:16.000Z","dependencies_parsed_at":"2023-02-23T11:01:02.864Z","dependency_job_id":null,"html_url":"https://github.com/wingify/ui-router","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/wingify/ui-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fui-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fui-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fui-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fui-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wingify","download_url":"https://codeload.github.com/wingify/ui-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wingify%2Fui-router/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34129072,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"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":[],"created_at":"2024-11-11T03:10:08.243Z","updated_at":"2026-06-09T22:31:32.856Z","avatar_url":"https://github.com/wingify.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AngularUI Router \u0026nbsp;[![Build Status](https://travis-ci.org/angular-ui/ui-router.png?branch=master)](https://travis-ci.org/angular-ui/ui-router)\n\n#### The de-facto solution to flexible routing with nested views\n---\n**[Download 0.2.7](http://angular-ui.github.io/ui-router/release/angular-ui-router.js)** (or **[Minified](http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js)**) **|**\n**[Learn](#resources) |**\n**[Discuss](https://groups.google.com/forum/#!categories/angular-ui/router) |**\n**[Get Help](http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router) |**\n**[Report an Issue](#report-an-issue) |**\n**[Contribute](#contribute)**\n\n---\n\nAngularUI Router is a routing framework for [AngularJS](http://angularjs.org), which allows you to organize the\nparts of your interface into a [*state machine*](https://en.wikipedia.org/wiki/Finite-state_machine). Unlike the\n[`$route` service](http://docs.angularjs.org/api/ngRoute.$route) in Angular core, which is organized around URL\nroutes, UI-Router is organized around [*states*](https://github.com/angular-ui/ui-router/blob/master/sample/states.js#L28-L269),\nwhich may optionally have routes, as well as other behavior, attached.\n\nStates are bound to *named*, *nested* and *parallel views*, allowing you to powerfully manage your application's interface.\n\n-\n**Warning:** *UI-Router is pre-beta and under active development. As such, while this library is well-tested, the API is subject\nto change. Using it in a project that requires guaranteed stability is not recommended.*\n\n\n## Get Started\n\n**(1)** Get UI-Router in one of 4 ways:\n - clone \u0026 [build](#developing) this repository\n - [download the release](http://angular-ui.github.io/ui-router/release/angular-ui-router.js) (or [minified](http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js))\n - via **[Bower](http://bower.io/)**: by running `$ bower install angular-ui-router` from your console\n - or via **[Component](https://github.com/component/component)**: by running `$ component install angular-ui/ui-router` from your console\n\n**(2)** Include `angular-ui-router.js` (or `angular-ui-router.min.js`) in your `index.html`, after including Angular itself (For Component users: ignore this step)\n\n**(3)** Add `'ui.router'` to your main module's list of dependencies (For Component users: replace `'ui.router'` with `require('angular-ui-router')`)\n\nWhen you're done, your setup should look similar to the following:\n\n\u003e\n```html\n\u003c!doctype html\u003e\n\u003chtml ng-app=\"myApp\"\u003e\n\u003chead\u003e\n    \u003cscript src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/angular-ui-router.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n        var myApp = angular.module('myApp', ['ui.router']);\n        // For Component users, it should look like this:\n        // var myApp = angular.module('myApp', [require('angular-ui-router')]);\n    \u003c/script\u003e\n    ...\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Nested States \u0026 Views\n\nThe majority of UI-Router's power is in its ability to nest states \u0026 views.\n\n**(1)** First, follow the [setup](#get-started) instructions detailed above.\n\n**(2)** Then, add a [`ui-view` directive](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view) to the `\u003cbody /\u003e` of your app.\n\n\u003e\n```html\n\u003c!-- index.html --\u003e\n\u003cbody\u003e\n    \u003cdiv ui-view\u003e\u003c/div\u003e\n    \u003c!-- We'll also add some navigation: --\u003e\n    \u003ca ui-sref=\"state1\"\u003eState 1\u003c/a\u003e\n    \u003ca ui-sref=\"state2\"\u003eState 2\u003c/a\u003e\n\u003c/body\u003e\n```\n\n**(3)** You'll notice we also added some links with [`ui-sref` directives](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref). In addition to managing state transitions, this directive auto-generates the `href` attribute of the `\u003ca /\u003e` element it's attached to, if the corresponding state has a URL. Next we'll add some templates. These will plug into the `ui-view` within `index.html`. Notice that they have their own `ui-view` as well! That is the key to nesting states and views.\n\n\u003e\n```html\n\u003c!-- partials/state1.html --\u003e\n\u003ch1\u003eState 1\u003c/h1\u003e\n\u003chr/\u003e\n\u003ca ui-sref=\"state1.list\"\u003eShow List\u003c/a\u003e\n\u003cdiv ui-view\u003e\u003c/div\u003e\n```\n```html\n\u003c!-- partials/state2.html --\u003e\n\u003ch1\u003eState 2\u003c/h1\u003e\n\u003chr/\u003e\n\u003ca ui-sref=\"state2.list\"\u003eShow List\u003c/a\u003e\n\u003cdiv ui-view\u003e\u003c/div\u003e\n```\n\n**(4)** Next, we'll add some child templates. *These* will get plugged into the `ui-view` of their parent state templates.\n\n\u003e\n```html\n\u003c!-- partials/state1.list.html --\u003e\n\u003ch3\u003eList of State 1 Items\u003c/h3\u003e\n\u003cul\u003e\n  \u003cli ng-repeat=\"item in items\"\u003e{{ item }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n\u003e\n```html\n\u003c!-- partials/state2.list.html --\u003e\n\u003ch3\u003eList of State 2 Things\u003c/h3\u003e\n\u003cul\u003e\n  \u003cli ng-repeat=\"thing in things\"\u003e{{ thing }}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**(5)** Finally, we'll wire it all up with `$stateProvider`. Set up your states in the module config, as in the following:\n\n\n\u003e\n```javascript\nmyApp.config(function($stateProvider, $urlRouterProvider) {\n  //\n  // For any unmatched url, redirect to /state1\n  $urlRouterProvider.otherwise(\"/state1\");\n  //\n  // Now set up the states\n  $stateProvider\n    .state('state1', {\n      url: \"/state1\",\n      templateUrl: \"partials/state1.html\"\n    })\n    .state('state1.list', {\n      url: \"/list\",\n      templateUrl: \"partials/state1.list.html\",\n      controller: function($scope) {\n        $scope.items = [\"A\", \"List\", \"Of\", \"Items\"];\n      }\n    })\n    .state('state2', {\n      url: \"/state2\",\n      templateUrl: \"partials/state2.html\"\n    })\n    .state('state2.list', {\n      url: \"/list\",\n        templateUrl: \"partials/state2.list.html\",\n        controller: function($scope) {\n          $scope.things = [\"A\", \"Set\", \"Of\", \"Things\"];\n        }\n      })\n    });\n```\n\n**(6)** See this quick start example in action.\n\u003e**[Go to Quick Start Plunker for Nested States \u0026 Views](http://plnkr.co/edit/u18KQc?p=preview)**\n\n**(7)** This only scratches the surface\n\u003e**[Dive Deeper!](https://github.com/angular-ui/ui-router/wiki)**\n\n\n### Multiple \u0026 Named Views\n\nAnother great feature is the ability to have multiple `ui-view`s view per template.\n\n**Pro Tip:** *While multiple parallel views are a powerful feature, you'll often be able to manage your\ninterfaces more effectively by nesting your views, and pairing those views with nested states.*\n\n**(1)** Follow the [setup](#get-started) instructions detailed above.\n\n**(2)** Add one or more `ui-view` to your app, give them names.\n\u003e\n```html\n\u003c!-- index.html --\u003e\n\u003cbody\u003e\n    \u003cdiv ui-view=\"viewA\"\u003e\u003c/div\u003e\n    \u003cdiv ui-view=\"viewB\"\u003e\u003c/div\u003e\n    \u003c!-- Also a way to navigate --\u003e\n    \u003ca ui-sref=\"route1\"\u003eRoute 1\u003c/a\u003e\n    \u003ca ui-sref=\"route2\"\u003eRoute 2\u003c/a\u003e\n\u003c/body\u003e\n```\n\n**(3)** Set up your states in the module config:\n\u003e\n```javascript\nmyApp.config(function($stateProvider) {\n  $stateProvider\n    .state('index', {\n      url: \"\",\n      views: {\n        \"viewA\": { template: \"index.viewA\" },\n        \"viewB\": { template: \"index.viewB\" }\n      }\n    })\n    .state('route1', {\n      url: \"/route1\",\n      views: {\n        \"viewA\": { template: \"route1.viewA\" },\n        \"viewB\": { template: \"route1.viewB\" }\n      }\n    })\n    .state('route2', {\n      url: \"/route2\",\n      views: {\n        \"viewA\": { template: \"route2.viewA\" },\n        \"viewB\": { template: \"route2.viewB\" }\n      }\n    })\n});\n```\n\n**(4)** See this quick start example in action.\n\u003e**[Go to Quick Start Plunker for Multiple \u0026 Named Views](http://plnkr.co/edit/SDOcGS?p=preview)**\n\n\n## Resources\n\n* [In-Depth Guide](https://github.com/angular-ui/ui-router/wiki)\n* [API Quick Reference](https://github.com/angular-ui/ui-router/wiki/Quick-Reference)\n* [Sample App](http://angular-ui.github.com/ui-router/sample/) ([Source](https://github.com/angular-ui/ui-router/tree/master/sample))\n* [FAQ](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions)\n* [Introduction Video](http://egghead.io/lessons/angularjs-introduction-ui-router)\n* [Slides from CincyNg Meetup](http://slid.es/timkindberg/ui-router#/)\n\n## Report an Issue\n\nHelp us make UI-Router better! If you think you might have found a bug, or some other weirdness, start by making sure\nit hasn't already been reported. You can [search through existing issues](https://github.com/angular-ui/ui-router/search?q=wat%3F\u0026type=Issues)\nto see if someone's reported one similar to yours.\n\nIf not, then [create a plunkr](http://plnkr.co/edit/u18KQc?p=preview) that demonstrates the problem (try to use as little code\nas possible: the more minimalist, the faster we can debug it).\n\nNext, [create a new issue](https://github.com/angular-ui/ui-router/issues/new) that briefly explains the problem,\nand provides a bit of background as to the circumstances that triggered it. Don't forget to include the link to\nthat plunkr you created!\n\n**Note**: If you're unsure how a feature is used, or are encountering some unexpected behavior that you aren't sure\nis a bug, it's best to talk it out in the\n[Google Group](https://groups.google.com/forum/#!categories/angular-ui/router) or on\n[StackOverflow](http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router) before reporting it. This\nkeeps development streamlined, and helps us focus on building great software.\n\nPlease keep in mind that the issue tracker is for *issues*. Please do *not* post an issue if you need help or support. Instead, see one of the above-mentioned forums or [IRC](irc://irc.freenode.net/#angularjs).\n\n\n## Contribute\n\n**(1)** See the **[Developing](#developing)** section below, to get the development version of UI-Router up and running on your local machine.\n\n**(2)** Check out the [roadmap](https://github.com/angular-ui/ui-router/issues/milestones) to see where the project is headed, and if your feature idea fits with where we're headed.\n\n**(3)** If you're not sure, [open an RFC](https://github.com/angular-ui/ui-router/issues/new?title=RFC:%20My%20idea) to get some feedback on your idea.\n\n**(4)** Finally, commit some code and open a pull request. Code \u0026 commits should abide by the following rules:\n\n- *Always* have test coverage for new features (or regression tests for bug fixes), and *never* break existing tests\n- Commits should represent one logical change each; if a feature goes through multiple iterations, squash your commits down to one\n- Make sure to follow the [Angular commit message format](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#commit-message-format) so your change will appear in the changelog of the next release.\n- Changes should always respect the coding style of the project\n\n\n\n## Developing\n\nUI-Router uses \u003ccode\u003egrunt \u003e= 0.4.x\u003c/code\u003e. Make sure to upgrade your environment and read the\n[Migration Guide](http://gruntjs.com/upgrading-from-0.3-to-0.4).\n\nDependencies for building from source and running tests:\n\n* [grunt-cli](https://github.com/gruntjs/grunt-cli) - run: `$ npm install -g grunt-cli`\n* Then, install the development dependencies by running `$ npm install` from the project directory\n\nThere are a number of targets in the gruntfile that are used to generating different builds:\n\n* `grunt`: Perform a normal build, runs jshint and karma tests\n* `grunt build`: Perform a normal build\n* `grunt dist`: Perform a clean build and generate documentation\n* `grunt dev`: Run dev server (sample app) and watch for changes, builds and runs karma tests on changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingify%2Fui-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwingify%2Fui-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwingify%2Fui-router/lists"}