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

转自：http://blog.csdn.net/xiaofanku/article/details/50946145

版权声明：本文为博主原创文章，未经博主允许不得转载。
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>

 

posted @ 2016-08-12 10:00  五艺  阅读(288)  评论(0)    收藏  举报