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

最新推荐文章于 2020-07-10 12:38:49 发布

街头小贩

最新推荐文章于 2020-07-10 12:38:49 发布

阅读量4k

点赞数 2

分类专栏： angularjs spa 文章标签： angularjs ui-router

本文链接：https://blog.csdn.net/xiaofanku/article/details/50946145

版权

angularjs 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

spa

3 篇文章 0 订阅

订阅专栏

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>