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中路由的運行機制。