V2AS问路
angularjs中的路由介绍详解 ui-route(转)
阅读原文时间：2021年04月21日阅读：3

http://www.cnblogs.com/littlemonk/p/5500801.html

这篇文章主要介绍了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友参考下吧

首先给大家介绍angular-ui-router的基本用法。

如何引用依赖angular-ui-router

angular.module('app',["ui.router"])
.config(function($stateProvider){
$stateProvider.state(stateName, stateCofig);
})

$stateProvider.state(stateName, stateConfig)

stateName是string类型
stateConfig是object类型
//statConfig可以为空对象
$stateProvider.state("home",{});
//state可以有子父级
$stateProvider.state("home",{});
$stateProvider.state("home.child",{})
//state可以是链式的
$stateProvider.state("home",{}).state("about",{}).state("photos",{});

stateConfig包含的字段：template, templateUrl, templateProvider, controller, controllerProvider, resolve, url, params, views, abstract, onEnter, onExit, reloadOnSearch, data

$urlRouteProvider

$urlRouteProvider.when(whenPath, toPath)
$urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)

$state.go

$state.go(to, [,toParams],[,options])
形参to是string类型，必须，使用"^"或"."表示相对路径；
形参toParams可空，类型是对象；
形参options可空，类型是对象，字段包括：location为bool类型默认true,inherit为bool类型默认true, relative为对象默认$state.$current,notify为bool类型默认为true, reload为bool类型默认为false

$state.go('photos.detail')
$state.go('^')到上一级,比如从photo.detail到photo
$state.go('^.list')到相邻state,比如从photo.detail到photo.list
$state.go('^.detail.comment')到孙子级state，比如从photo.detail到photo.detial.comment

ui-sref

ui-sref='stateName'
ui-sref='stateName({param:value, param:value})'

ui-view

==没有名称的ui-view

<div ui-view></div>
$stateProvider.state("home",{
template: "<h1>hi</h1>"
})

　或者这样配置：　

$stateProvider.state("home"{
views: { "": {
template: "

hi

" }
}
})

==有名称的ui-view

$stateProvider.state("home",{
views: { "main" : {
template: "

hi

" }
}
})

==多个ui-view

$stateProvider.state("home",{
views: { "":{template: "

hi

"}, "data": {template: "
data
"}
}
})

项目文件结构

node_modules/
partials/
…..about.html
…..home.html
…..photos.html
app.js
index.html

创建state和view

app.js

var photoGallery = angular.module('photoGallery',["ui.router"]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'partials/home.html'
})
.state('photos',{
url: '/photos',
templateUrl: 'partials/photos.html'
})
.state('about',{
url: '/about',
templateUrl: 'partials/about.html'
})
})

index.html

<!DOCTYPE html>
<html lang="en" ng-app="photoGallery">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"/>
</head>
<body>
<h1>Welcome</h1>
<div ui-view></div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
</body>
</html>

state之间的跳转

index.html

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a ui-sref="home" class="navbar-brand">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a ui-sref="photos">Photos</a>
</li>
<li>
<a ui-sref="about">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div ui-view></div>

　以上通过ui-sref属性完成state之间的跳转。　

多个view以及state嵌套

有时候，一个页面上可能有多个ui-view，比如：

假设，以上页面属于一个名称为parent的state中。

我们知道在ui-router中，一个state大致是这样设置的：

所有state下views下的所有键值对(类似 "body@content":{templateUrl: 'partials/photos.html'})都被放到一个键值集合中。而ui-view的工作原理就是根据自己的属性值，到这个键值集合中去找匹配 的键，找到就把对应的页面显示出来。

点击header对应的页面链接，可能会跳转到另外的子页面出现在

这个位置。这时候页面出现了子父关系，而每个页面都属于某个state,这样state间 就出现了子父关系。这些跳转的子页面，在路由设置中，可能被称为parent.son1, parent.son2…这就是state的嵌套。

在现有的文件结构上增加content.html, header.html,文件结构变为：

node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
app.js
index.html

content.html 包含了多各ui-view, 一个ui-view和页头相关，保持不变；令一个ui-view和会根据页头上的点击呈现不同的内容

header.html 把原先indext.html中nav部分放到这里来

index.html 这时变成了这样

app.js 路由现在这样设置

var photoGallery = angular.module('photoGallery',["ui.router"]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state('content',{
url: '/',
views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{templateUrl: 'partials/header.html'},
}
})
.state('content.home',{
url: 'home',
views:{ "body@content":{templateUrl: 'partials/home.html'}
}
})
.state('content.photos',{
url: 'photos',
views:{ "body@content":{templateUrl: 'partials/photos.html'}
}
})
.state('content.about',{
url:'about',
views:{ "body@content":{templateUrl: 'partials/about.html'}
}
})
})

这时候，页面是这样呈现出来的：

→ 来到home这个路由

.state('content.home',{
url: 'home',
views:{ "body@content":{templateUrl: 'partials/home.html'}
}
})

以上，告诉我们partials/home.html将会被加载到与"body@content"匹配的ui-view中。暂时对应的ui-view还没有出现，于是等待。

→ 路由看到index.html上的

.state('content',{
url: '/',
views:{ "":{templateUrl: 'partials/content.html'}, "header@content":{templateUrl: 'partials/header.html'},
}
})

于是，就找到了content这个state下views下的 "":{templateUrl: 'partials/content.html'}这个键值对，把partials/content.html显示出来。

→ 分别加载partials/content.html页面上的各个部分

看到

，就加载如下：

"header@content":{templateUrl: 'partials/header.html'},

看到

，先加载 "body@content":{templateUrl: 'partials/home.html'}

→ 点击header上的链接

点击Photos，来到：

.state('content.photos',{
url: 'photos',
views:{ "body@content":{templateUrl: 'partials/photos.html'}
}
})

把partials/photos.html显示到

中去。

点击

，来到：

.state('content.about',{
url:'about',
views:{ "body@content":{templateUrl: 'partials/about.html'}
}
})

把partials/about.html显示到

中去。

state多级嵌套

以上，在路由设置中，state名称有content, content.photos有了这样的一层嵌套。接下来，要实现state的多级嵌套。

在photos.html页面准备加载一个子页面，叫做photos-list.html；
与photo-list.html页面相邻的还有一个页面，叫做photo-detail.html；
在photo-detail.html页面上加载一个子页面，叫做photos-detail-comment.html;

这样，页面有了嵌套关系，state也相应的会有嵌套关系。

现在，文件结构变成：

node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
…..photos-list.html
…..photo-detail.html
…..photos-detail-comment.html
app.js
index.html

photos.html 加一个容纳子页面的ui-view

photos

如何到达这个子页面呢？修改header中的相关部分如下：