Wie ich meine Navbar auf jeder HTML-Seite halten kann (ohne den gleichen Code zu kopieren)

Question

das ist ganz einfach ich denke, ich habe eine navbar mit meinen tabs, die auf allen meinen html-seiten angezeigt werden müssen, ich habe eine. HTML-Seite für jeden Tab. Wie kann ich es so machen, dass ich den Navbar-Code nicht in jede HTML-Seite kopieren muss (versuche zu vermeiden, den Code zu kopieren, da das unordentlich ist und viel Arbeit, wenn ich etwas ändern muss).

Im Versuch, PHP in meinem Projekt zu vermeiden, bevorzugen id Java oder AngularJS

Heres der relevante Teil der 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> 

Answer 1

Sie können PHP oder andere Backend-Sprache verwenden, um einen Header zu machen Datei und fügen Sie das in Ihren anderen Seiten hinzu.

Alternativ können Sie etwas wie Jade verwenden und deren Includes verwenden.

Siehe hier: http://jade-lang.com/reference/includes/

Answer 2

AngularJS bieten Ihnen zwei verschiedene Lösungen zur Erreichung dieses Ziels.

1) Erstellen Sie eine Richtlinie für Sie nav-Bar https://docs.angularjs.org/guide/directive

Sie können Ihre nav-Bar des Code in der Richtlinie HTML-Datei platzieren, en rufen Sie Ihre nav-Bar überall Sie ID mit der Richtlinie der balise müssen. So etwas wie das: <my-nav-bar></my-nav-bar>

2) Mit eckigen ui-rooter Ich denke, das ist die bessere Wahl hier. Sie werden eine Haupt-HTML-Datei mit einer <ui-view></ui-view> haben. Wenn Sie die Seite wechseln, wird nur der Inhalt der ui-view geändert. Sie müssen also Ihre Navigationsleiste außerhalb der UI-Ansicht platzieren.

Sie haben ein Beispiel von dem, was Sie hier tun können: https://angular-ui.github.io/ui-router/sample/#/about

PS: vergessen Sie nicht, den Winkel-ui-Rooter js Datei zu einem Projekt hatte, wenn Sie diese Lösung versuchen.

Hoffe diese Hilfe.

A +

Answer 3

Ich denke auch angular-ui-router dafür verwendet, wird das Beste sein.

Sie können eine <div ui-view></div> für Ihre App erstellen und dann einen abstrakten Status erstellen, der Ihre Basisvorlage mit Ihrem Header darin lädt. So etwas könnte dies Ihre Basis-Vorlage sein:

<ul><li>...</li>...</ul> 
<div ui-view="content"></div> 

Dann in jedem Kind Zustand der Basis Sie können Ihre Inhalte an die benannte Ansicht ‚Inhalt‘ hinzuzufügen.

Mit ui-sref-active="active" ist es einfach, den gerade aktiven Link zu markieren.

Bitte werfen Sie einen Blick auf die folgende Demo oder diese 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>