这很简单，我认为，我有一个导航栏，需要显示在我的所有html页面上，我有一个。每个选项卡的html页面。我怎样才能让它不必复制到每个HTML页面的导航栏代码（试图避免复制代码，因为这是混乱和大量的工作，如果我必须改变一些东西）。如何让我的导航栏保持在每个HTML页面的顶部（避免复制相同的代码）
我试着去避免PHP在我的项目，ID喜欢Java或AngularJS
继承人的index.html的相关部分
<ul class="nav nav-pills nav-justified">
<li class="active"><a href="index.xhtml">Home</a></li>
<li><a href="maschine.xhtml">Maschinen/Tätigkeiten</a></li>
<li><a href="person.xhtml">Personen</a></li>
</ul>
您可以使用PHP或其他后端语言，使头文件并将其包含在其他页面中。
或者，您可以使用类似Jade的东西并使用它们的包含。
Angularjs为您提供了实现这一目标的两个不同的解决方案。
1）让你的资产净值酒吧指令 https://docs.angularjs.org/guide/directive
您可以将导航栏的代码放到指令的HTML文件，恩打电话给你的导航栏随处可见，你需要用指令的应答器的ID。这样的事情： <my-nav-bar></my-nav-bar>
2）使用角度ui-rooter 我认为这是更好的选择。您将有一个主要的html文件，其中包含<ui-view></ui-view>。当你改变页面时，只改变UI视图的内容。所以你必须把你的导航栏放在UI视图之外。
你的，你可以在这里做什么一个例子： https://angular-ui.github.io/ui-router/sample/#/about
PS：如果你想尝试这种解决方案不要忘了有角度的UI，拔根js文件到您的项目。
希望得到这个帮助。
A +
我也想用angular-ui-router这将是最好的。
您可以为您的应用程序创建一个<div ui-view></div>，然后创建一个抽象状态，该状态将加载您的基本模板以及其中的标题。像这样的东西可能是你的基本模板：
<ul><li>...</li>...</ul>
<div ui-view="content"></div>
然后在基地的每一个孩子的状态可以将内容添加到命名视图“内容”。
与ui-sref-active="active"很容易突出显示当前活动的链接。
请看看下面的演示或此fiddle。
angular.module('demoApp', ['ui.router'])
\t .config(routeConfig);
function routeConfig($urlRouterProvider, $stateProvider) {
\t $urlRouterProvider.otherwise('/');
\t $stateProvider.state('base', {
\t url: '/',
abstract: true,
templateUrl: 'partials/base.html'
})
.state('base.home', {
\t url: '',
views: {
\t 'content': {
\t templateUrl: 'pages/home.html',
controller: function() {
\t console.log('home controller');
}
}
}
})
.state('base.machines', {
\t url: '/machines',
views: {
\t 'content': {
\t templateUrl: 'pages/machines.html',
controller: function() {
\t console.log('machines controller');
}
}
}
})
.state('base.persons', {
\t url: '/persons',
views: {
\t 'content': {
\t templateUrl: 'pages/persons.html',
controller: function() {
\t console.log('persons controller');
}
}
}
})
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<div ng-app="demoApp">
<div ui-view></div>
<script type="text/ng-template" id="partials/base.html">
\t <ul class="nav nav-pills nav-justified">
<li ui-sref-active="active"><a ui-sref="base.home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="base.machines">Maschinen/Tätigkeiten</a></li>
<li ui-sref-active="active"><a ui-sref="base.persons">Personen</a></li>
</ul>
<div ui-view="content"></div>
<!-- here you could add a footer view -->
</script>
<script type="text/ng-template" id="pages/home.html">
\t home
</script>
<script type="text/ng-template" id="pages/machines.html">
\t machines
</script>
<script type="text/ng-template" id="pages/persons.html">
\t persons
</script>
</div>