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

发布时间：2020-12-17 10:15:34 所属栏目：安全来源：网络整理

导读：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 c

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!