angularJS之ui-router

一、为什么要用ui-router

ng原生的路由不能支持嵌套视图，所以在项目中ui-router实用性更好。

二、ui-router的用法

1、主页页面结构：四个重要组成部分：①、一个导航ul；②、放置一级嵌套页面的标签div；③、angular和angular-ui-router的框架文件。④、ui-router的代码文件

<!--index.html-->
.
.
.
<ul>
<li><a ui-sref="one">导航一</a></li>
<li><a>导航二</a>
<ul>
<li><a ui-sref="two-one">导航二-1</a></li>
<li><a  ui-sref="two-two">导航二-2</a></li>
<li><a ui-sref="two-three">导航二-3</a></li>
<li><a ui-sref="two-four">导航二-4</a></li>
</ul>
</li>
<li><a  ui-sref="three">导航三</a></li>
</ul>

.
.
.
<div ui-view="left" class="h"></div>
.
.
.
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router.js"></script>
<script src="js/router.js"></script>

2、嵌套页页面结构：有两个重要组成部分：①、一个导航部分div；②、放置二级嵌套页面的标签div。

(代码片段为导航一的嵌套页，其他类似)

<!-- one_left.html -->
<div>
<div><a ui-sref="one.left1"></a></div>
<div><a ui-sref="one.left2"></a></div>
<div><a ui-sref="one.left3"></a></div>
</div>
<div ui-view="main"></div>

3、ui-router的代码文件：①、

$stateProvider

,

$urlRouterProvider

是ui-router的默认对象， ②、

$stateProvider.state（）

是路由的配置方法。

app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('one', {
//'one'是ui-sref属性的取值
url : '/one',
//自定义的路由链接，即#后面的锚点
views : {
//视图配置
'left' : {
//'left'为参数名为ui-view的属性值
templateUrl : 'one_left.html'
//一级嵌套对应页面
},
'main@one' : {
// 'main@one'是嵌套页中ui-view的属性值，@one为最顶层页面ui-sref属性值
templateUrl :  'one_main.html'
//N级嵌套对应页面
}
}
})
.state('',{})
.state('',{})
//state方法连续调用，配置多个路由
$urlRouterProvider.otherwise('/one');
//没有配置到的路由链接到/one
})

三、总结

这篇文章是我初学angularJS并且工作上接触ui-router后，不理解其中各个参数含义所写，ui-router是通过路由进行视图嵌套来完成页面跳转，由于找不到相关的参数文档，在通过几次调试后发现了各个参数的定义和用法，不太全面但是暂时够用了。并且通过调试也更深入的理解了angular中路由的运行机制。