# AngularUI Router [](https://travis-ci.org/angular-ui/ui-router)
#### The de-facto solution to flexible routing with nested views
---
**[Download 0.2.10](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)**) **|**
**[Learn](#resources) |**
**[API](http://angular-ui.github.io/ui-router/site) |**
**[Discuss](https://groups.google.com/forum/#!categories/angular-ui/router) |**
**[Get Help](http://stackoverflow.com/questions/ask?tags=angularjs,angular-ui-router) |**
**[Report an Issue](#report-an-issue) |**
**[Contribute](#contribute)**
---
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 Angular core, which is organized around URL
routes, UI-Router is organized around [*states*](https://github.com/angular-ui/ui-router/blob/master/sample/states.js#L28-L269),
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.
-
**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:
>
```html
<!doctype html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script>
var myApp = angular.module('myApp', ['ui.router']);
// For Component users, it should look like this:
// var myApp = angular.module('myApp', [require('angular-ui-router')]);
</script>
...
</head>
<body>
...
</body>
</html>
```
### Nested States & Views
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>
<div ui-view></div>
<!-- We'll also add some navigation: -->
<a ui-sref="state1">State 1</a>
<a ui-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/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
```
```html
<!-- partials/state2.html -->
<h1>State 2</h1>
<hr/>
<a ui-sref="state2.list">Show List</a>
<div ui-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>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
```
>
```html
<!-- partials/state2.list.html -->
<h3>List of State 2 Things</h3>
<ul>
<li ng-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:
>
```javascript
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
});
```
**(6)** See this quick start example in action.
>**[Go to Quick Start Plunker for Nested States & Views](http://plnkr.co/edit/u18KQc?p=preview)**
**(7)** This only scratches the surface
>**[Dive Deeper!](https://github.com/angular-ui/ui-router/wiki)**
### Multiple & Named Views
Another great feature is the ability to have multiple `ui-view`s view per template.
**Pro Tip:** *While multiple parallel views are a powerful feature, you'll often be able to manage your
interfaces more effectively by nesting your views, and pairing those views with nested states.*
**(1)** Follow the [setup](#get-started) instructions detailed above.
**(2)** Add one or more `ui-view` to your app, give them names.
>
```html
<!-- index.html -->
<body>
<div ui-view="viewA"></div>
<div ui-view="viewB"></div>
<!-- Also a way to navigate -->
<a ui-sref="route1">Route 1</a>
<a ui-sref="route2">Route 2</a>
</body>
```
**(3)** Set up your states in the module config:
>
```javascript
myApp.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
views: {
"viewA": { template: "index.viewA" },
"viewB": { template: "index.viewB" }
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": { template: "route1.viewA" },
"viewB": { template: "route1.viewB" }
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": { template: "route2.viewA" },
"viewB": { template: "route2.viewB" }
}
})
});
```
**(4)** See this quick start example in action.
>**[Go to Quick Start Plunker for Multiple & Named Views](http://plnkr.co/edit/SDOcGS?p=preview)**
## Resources
* [In-Depth Guide](https://github.com/angular-ui/ui-router/wiki)
* [API Reference](http://angular-ui.github.io/ui-router/site)
* [Sample App](http://angular-ui.github.com/ui-router/sample/) ([Source](https://github.com/angular-ui/ui-router/tree/gh-pages/sample))
* [FAQ](https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions)
* [Introduction Video](https://egghead.io/lessons/angularjs-introduction-ui-router)
* [Slides comparing ngRoute to ui-router](http://slid.es/timkindberg/ui-router#/)
## Report an Issue
Help us make UI-Router better! If you think you might have found a bug, or
ionic angularjs mobile ui （158个子文件） 
.classpath 519B org.eclipse.wst.common.component 467B org.eclipse.wst.jsdt.ui.superType.container 49B ionic.css 228KB ionic.min.css 178KB angular-csp.css 535B style.css 384B ionicons.eot 100KB .gitignore 610B angular.min.js.gzip 39KB
test.html 4KB index.html 3KB comments.html 1KB home.html 1KB reservation.html 1KB beaches.html 957B food.html 944B about.html 863B sights.html 855B food.html 791B preview.html 775B tour.html 657B weather.html 528B local.html 518B events.html 355B
logo.jpg 75KB ionic.bundle.js 1.46MB angular.js 764KB mockfirebase.js 320KB firebase-debug.js 316KB ionic-angular.js 308KB ionic.bundle.min.js 305KB ionic.js 229KB angular-ui-router.js 114KB angular.min.js 105KB firebase-simple-login-debug.js 100KB ionic-angular.min.js 88KB firebase.js 80KB ionic.min.js 78KB angular-animate.js 76KB angularfire.js 71KB firebase-simple-login.js 64KB state.js 48KB collide.js 29KB angular-sanitize.js 21KB angular-ui-router.min.js 20KB angularfire.min.js 20KB urlMatcherFactory.js 12KB angular-animate.min.js 11KB urlRouter.js 9KB resolve.js 9KB viewDirective.js 8KB stateDirectives.js 7KB animator.spec.js 7KB common.js 7KB compat.js 5KB angular-sanitize.min.js 4KB templateFactory.js 4KB app.js 3KB simple-emitter.spec.js 2KB view.js 2KB timeline.spec.js 2KB viewScroll.js 1KB food.js 1KB home.js 1KB stateFilters.js 862B reservation.js 596B events.js 436B weather.js 396B tour.js 385B .jsdtscope 503B data.json 7KB .bower.json 1KB .bower.json 1KB .bower.json 1KB bower.json 923B bower.json 814B .bower.json 811B .bower.json 717B .bower.json 710B bower.json 545B package.json 509B .bower.json 489B .bower.json 484B .bower.json 457B bower.json 444B .bower.json 417B bower.json 389B bower.json 140B bower.json 138B bower.json 128B bower.json 98B LICENSE 1KB LICENSE 1KB LICENSE 1KB angular.min.js.map 282KB angular-animate.min.js.map 32KB angular-sanitize.min.js.map 10KB README.md 11KB README.md 6KB共 158 条
- 1
- 2
资源评论
zhenhousoft2015-09-23资源不错，不过不是我想要的。- snow_sakura2018-01-03资源不错。
清风徐来……
- 粉丝: 1
- 资源: 4
最新资源
- 修改LATEX.pdf
- IMG_20241125_120800.jpg
- AI助手Copilot辅助Go+Flutter打造全栈式在线教育系统课程17章
- 2024下半年，CISSP官方10道练习题
- JD-Core是一个用JAVA编写的JAVA反编译器 .zip
- 时间复杂度与数据结构：算法效率的双重奏
- QT 简易项目 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现
- YOLOv3网络架构深度解析：关键特性与代码实现
- ACOUSTICECHO CANCELLATION WITH THE DUAL-SIGNAL TRANSFORMATION LSTM NETWORK
- 深入解析：动态数据结构与静态数据结构的差异
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
