页面一进来默认显示一级和一级下的二级页面
angular.module('myapp', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/a'); //一级默认
$stateProvider.state('a', {
url: '/a',
templateUrl: 'nav1.html',
// 二级导航下的默认页面显示
controller: function ($state) {
$state.go('a.a')
}
})
.state('b', {
url: '/b',
templateUrl: 'nav2.html'
})
.state('c', {
url: '/c',
templateUrl: 'nav3.html'
})
.state('a.a', {
url: '/a.a',
templateUrl: 'nav1_1.html'
})
.state('a.b', {
url: '/a.b',
templateUrl: 'nav1_2.html'
})
});
但是这样也有一个问题,那就是再次点击这个导航的时候,二级导航下的内容就不见了,对此,还应该在一级导航a标签上写一个东西
<a ui-sref="a" ui-sref-opts="{reload:true}">一级</a>
这里有完整ui-route做多级嵌套的例子:angularv-1.0和ui-route做多级嵌套