AngularJS UI Router(ui.router)嵌套视图(Nested Views)

时间：2021-10-29 19:39:51

1.dom结构
index.html

    <body>
<!--左侧边栏 -->
<aside ui-view="aside"></aside>
<!--页面正文区-->
<div ui-view></div>
</body>

User的正文区视图(center.html):

<div class="full_page">
<div class="full_page_head">
<nav class="ctn_navigate navi_menus">
<a class="current" ui-sref=".home">个人主页</a>
<a ui-sref=".setting">设置中心</a>
<a ui-sref=".avatar">上传头像</a>
<a ui-sref=".address">通信地址</a>
</nav>
</div>
<div class="full_page_body" ui-view>
<!-- 导航栏的内容在此显示-->
</div>
</div>

2.$stateProvider的片段

        .state("user", {
url: '/user',
 views:{
'':{
 templateUrl: 'partials/center.html',
 controller: function($state){
 $state.go('user.home');
}
                }
            }
        })
.state("user.home", {
url: '/home',
 templateUrl: 'partials/user-center.html',
 controller: 'userHomeCtrl'
})          
.state("user.setting", {
url: '/setting',
 templateUrl: 'partials/user-setting.html',
 controller: 'userSettingCtrl'
})
.state("user.avatar", {
url: '/avatar',
 templateUrl: 'partials/user-avatar.html',
 controller: 'userAvatarCtrl'
})
.state("user.address", {
url: '/address',
 templateUrl: 'partials/user-address.html',
 controller: 'userAddressCtrl'
})

ui.router映射后的路径为

<div class="full_page">
<div class="full_page_head">
<nav class="ctn_navigate navi_menus">
<a class="current" href="#/user/home">个人主页</a>
<a href="#/user/setting">设置中心</a>
<a href="#/user/avatar">上传头像</a>
<a href="#/user/address">通信地址</a>
</nav>
</div>
<div class="full_page_body" ui-view>
<!-- 导航栏的内容在此显示-->
</div>
</div>
标签：

相关文章