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

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>

你可能感兴趣的:(AngularJS,ui-router)