使用angular 1.6，这是我需要具备的组件：
+-------------------+
|side| |
|bar | |
|... | view |
|... | |
|... | |
+-------------------+
侧栏：位于左侧。使用ng-repeat并动态更新。
查看：应用程序的其余部分。模板是静态的，但是单击侧栏时内容会更改。
当用户单击侧栏的每个列表
<li>时，它将更新视图。只有视图内容/模型会改变。不是html模板。重要说明：我只是不想在
<body>中编写代码。希望在一个html文件中具有边栏，并在与其控制器相关联的另一个HTML文件中进行查看，并通过ng-view中的<body>呈现整个应用程序。侧栏会动态更新，因此我无法在config（）中为每个状态指定状态。
任何其他标准架构都值得赞赏。
最佳答案
如评论中所述，可以通过多种体系结构和框架选择来实现所需的模板类型。我将基于ui-router和子/嵌套视图，基于我过去在angular中使用过的东西提供一个基本示例。
假设您有一个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>
索引页面仅具有最高级视图的布局，即页眉，内容和页脚。如果不需要页眉和页脚，则可以忽略/删除它。现在，您要查找的布局将在主视图中放置，左边的侧边栏和右边的内容。为此，让我们声明另一个将定义此结构的页面，将其命名为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将其内容添加到主ui-view中。现在，让我们看一下使所有这些工作都有效的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个主视图（页眉，主视图和页脚）的配置。网址路径为/ landing。然后，将content1，content2和content3定义为子代，方法是使用点表示法Landing.content1将它们嵌套在Landing中。然后，每个孩子的url路径将解析为/ landing / content1，/ landing / content2，landing / content3。因此，现在无论何时您导航到那些位置，只有该特定孩子的内容都将嵌套在登录页面“内容”用户界面中，并且页面的其余布局保持不变。
为了完整起见，这是着陆控制器的外观：
function LandingController($state) {
var vm = this;
vm.changePage = function(page){
$state.transitionTo('landing.'+page, null, null);
}
}