**Note:** *UI-Router is under active development. As such, while this library is well-tested, the API may change. Consider using it in production applications only if you're comfortable following a changelog and updating your usage accordingly.*
## Get Started
**(1)** Get UI-Router in one of 4 ways:
- clone & [build](#developing) this repository
- [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))
- via **[Bower](http://bower.io/)**: by running `$ bower install angular-ui-router` from your console
- or via **[Component](https://github.com/component/component)**: by running `$ component install angular-ui/ui-router` from your console
**(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)
**(3)** Add `'ui.router'` to your main module's list of dependencies (For Component users: replace `'ui.router'` with `require('angular-ui-router')`)
When you're done, your setup should look similar to the following:
The majority of UI-Router's power is in its ability to nest states & views.
**(1)** First, follow the [setup](#get-started) instructions detailed above.
**(2)** Then, add a [`ui-view` directive](https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-view) to the `<body />` of your app.
>
```html
<!-- index.html -->
<body>
<divui-view></div>
<!-- We'll also add some navigation: -->
<aui-sref="state1">State 1</a>
<aui-sref="state2">State 2</a>
</body>
```
**(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 `<a />` 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.
>
```html
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<aui-sref="state1.list">Show List</a>
<divui-view></div>
```
```html
<!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<aui-sref="state2.list">Show List</a>
<divui-view></div>
```
**(4)** Next, we'll add some child templates. *These* will get plugged into the `ui-view` of their parent state templates.
>
```html
<!-- partials/state1.list.html -->
<h3>List of State 1 Items</h3>
<ul>
<ling-repeat="item in items">{{ item }}</li>
</ul>
```
>
```html
<!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<ling-repeat="thing in things">{{ thing }}</li>
</ul>
```
**(5)** Finally, we'll wire it all up with `$stateProvider`. Set up your states in the module config, as in the following:
Help us make UI-Router better! If you think you might have found a bug, or some other weirdness, start by making sure
it hasn't already been reported. You can [search through existing issues](https://github.com/angular-ui/ui-router/search?q=wat%3F&type=Issues)
to see if someone's reported one similar to yours.
If not, then [create a plunkr](http://plnkr.co/edit/u18KQc?p=preview) that demonstrates the problem (try to use as little code
as possible: the more minimalist, the faster we can debug it).
Next, [create a new issue](https://github.com/angular-ui/ui-router/issues/new) that briefly explains the problem,
and provides a bit of background as to the circumstances that triggered it. Don't forget to include the link to
that plunkr you created!
**Note**: If you're unsure how a feature is used, or are encountering some unexpected behavior that you aren't sure
is a bug, it's best to talk it out in the
[Google Group](https://groups.google.com/forum/#!categories/angular-ui/router) or on
[StackOverflow](http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router) before reporting it. This
keeps development streamlined, and helps us focus on building great software.
Please 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).
## Contribute
**(1)** See the **[Developing](#developing)** section below, to get the development version of UI-Router up and running on your local machine.
**(2)** Check out the [roadmap](https://github.com/angular-ui/ui-router/milestones) to see where the project is headed, and if your feature idea fits with where we're headed.
**(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.
**(4)** Finally, commit some code and open a pull request. Code & commits should abide by the following rules:
- *Always* have test coverage for new features (or regression tests for bug fixes), and *never* break existing tests
- Commits should represent one logical change each; if a feature goes through multiple iterations, squash your commits down to one
- 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.
- Changes should always respect the coding style of the project
## Developing
UI-Router uses <code>grunt >= 0.4.x</code>. Make sure to upgrade your environment and read the
