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(ui.router)嵌套视图(Nested Views)

猜你在找的Angularjs相关文章