# AngularUI Router [![Build Status](https://travis-ci.org/angular-ui/ui-router.svg?branch=master)](https://travis-ci.org/angular-ui/ui-router) #### The de-facto solution to flexible routing with nested views --- **[Download 0.2.11](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)**) **|** **[Guide](https://github.com/angular-ui/ui-router/wiki) |** **[API](http://angular-ui.github.io/ui-router/site) |** **[Sample](http://angular-ui.github.com/ui-router/sample/) ([Src](https://github.com/angular-ui/ui-router/tree/gh-pages/sample)) |** **[FAQ](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions) |** **[Resources](#resources) |** **[Report an Issue](https://github.com/angular-ui/ui-router/blob/master/CONTRIBUTING.md#report-an-issue) |** **[Contribute](https://github.com/angular-ui/ui-router/blob/master/CONTRIBUTING.md#contribute) |** **[Help!](http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router) |** **[Discuss](https://groups.google.com/forum/#!categories/angular-ui/router)** --- AngularUI Router is a routing framework for [AngularJS](http://angularjs.org), which allows you to organize the parts of your interface into a [*state machine*](https://en.wikipedia.org/wiki/Finite-state_machine). Unlike the [`$route` service](http://docs.angularjs.org/api/ngRoute.$route) in the Angular ngRoute module, which is organized around URL routes, UI-Router is organized around [*states*](https://github.com/angular-ui/ui-router/wiki), which may optionally have routes, as well as other behavior, attached. States are bound to *named*, *nested* and *parallel views*, allowing you to powerfully manage your application's interface. Check out the sample app: http://angular-ui.github.io/ui-router/sample/ - **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 the following ways: - clone & [build](CONTRIBUTING.md#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 **[npm](https://www.npmjs.org/)**: by running `$ npm 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: > ```html
... ... ``` ### [Nested States & Views](http://plnkr.co/edit/u18KQc?p=preview) 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 ` State 1 State 2 ``` **(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 `` 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