如 cmets 中所述，可以选择多种架构和框架来实现您正在寻找的模板类型。我将提供一个基本示例，该示例基于我过去使用的角度，使用 ui-router 和子/嵌套视图。
假设您有一个 index.html，例如：
<body>
<div ui-view="header" class="header"></div>
<div ui-view="main" class="main"></div>
<div ui-view="footer" class="footer"></div>
</body>
索引页只有最高级视图的布局，即页眉、内容和页脚。如果您不需要页眉和页脚，您可以忽略/删除它。现在，您正在寻找的布局，左侧是侧栏，右侧是内容，将被放置在 main 视图中。为此，让我们声明另一个将定义此结构的页面，将其命名为landing.html（为简单起见使用引导程序）：
<div class="container-fluid">
<div class="row landingContainer">
<div class="col-md-2 col-sm-4 col-xs-3 sidebarSection">
<div class="row item" ng-click="landing.changePage('content1')">
<span>Show Content 1</span>
</div>
<div class="row item" ng-click="landing.changePage('content2')">
<span>Show Content 2</span>
</div>
<div class="row item" ng-click="landing.changePage('content3')">
<span>Show Content 3</span>
</div>
</div>
<div class="col-md-10 col-sm-8 col-xs-9 contentSection">
<div ui-view="content"></div>
</div>
</div>
</div>
您可以将此页面视为布局的根。该页面使用引导列分为左右部分。左侧包含所有内容视图的列表。你可以使用 li，我只是更喜欢 div。右侧将是页面的动态部分所在的位置，内容将根据在侧栏中选择的项目而变化。每个组件视图都是着陆页的子视图，它继承父视图的所有特性，然后将自己的内容添加到 ui-view 中，类似于landing.html 将其内容添加到 main用户界面视图。现在让我们看看使这一切工作的 ui-router 配置。
function routerConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/landing',
views: {
'header': {
templateUrl: 'app/components/header/headerPrivate.html',
controller: 'HeaderController',
controllerAs: 'header'
},
'main': {
templateUrl: 'app/landing/landing.html',
controller: 'LandingController',
controllerAs: 'dashboard'
},
'footer': {
templateUrl: 'app/components/footer/footer.html',
controller: 'FooterController',
controllerAs: 'footer'
}
}
})
.state('landing.content1', {
url: '/content1',
views: {
'content': {
templateUrl: 'app/content1/content1.html',
controller: 'Content1Controller',
controllerAs: 'content1'
}
}
})
.state('landing.content2', {
url: '/content2',
views: {
'content': {
templateUrl: 'app/content2/content2.html',
controller: 'Content2Controller',
controllerAs: 'content2'
}
}
})
.state('landing.content3', {
url: '/content3',
views: {
'content': {
templateUrl: 'app/content3/content3.html',
controller: 'Content3Controller',
controllerAs: 'content3'
}
}
})
$urlRouterProvider.otherwise('/');
}
您会注意到，着陆页路由定义了 3 个主要视图的配置，即页眉、主视图和页脚。 url 路径将是 /landing。然后 content1、content2 和 content3 被定义为子项，通过使用点符号将它们嵌套在landing 中：landing.content1。然后，每个孩子的 url 路径将解析为 /landing/content1、/landing/content2、landing/content3。因此，现在无论何时您导航到这些位置，只有该特定子项的内容将嵌套在登录页面“内容”ui-view 中，并且页面的其余布局保持不变。
为了完整起见，着陆控制器的外观如下：
function LandingController($state) {
var vm = this;
vm.changePage = function(page){
$state.transitionTo('landing.'+page, null, null);
}
}