這很簡單，我認爲，我有一個導航欄，需要顯示在我的所有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>