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>
