angularJS之ui-router_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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>

1
2
3
4
5
6
7
8
9

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
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

三、总结

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