第3篇：angularJS使用ui-router的嵌套路由配置

引入js文件：

<script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script>
    <script type="text/javascript" src="lib/angular/angular-ui-router.js"></script>

路由配置：
1）ui-serf配置

<a ui-sref="a">
    <span>页面A</span>
</a>
<a ui-sref="b">
    <span>页面A</span>
</a>

2）state配置

var app = angular.module('app',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('a', {
            url: "/a",
            templateUrl: "./view/a.html",
            controller:"aCtrl"
        })
        .state('b', {
            url: "/b",
            templateUrl: "./b.html",
            controller : "bCtrl"
        })
});

嵌套路由：

1）在a.html中

<a ui-sref="a.page1">
    <span>page1</span>
</a>
<a ui-sref="a.page2">
    <span>page2</span>
</a>

2）state配置

var app = angular.module('app',['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/dashboard");
    $stateProvider
        .state('a', {
            url: "/a",
            templateUrl: "./view/a.html",
            controller:"aCtrl"
        })
        .state('a.page1', {
            url: "/a/page1",
            templateUrl: "./view/page1.html",
            controller:"page1Ctrl"
        })
        .state('a.page2', {
            url: "/a/page2",
            templateUrl: "./view/page2.html",
            controller:"page2trl"
        })
});