0

this is quite simple i think, i have a navbar with my tabs that need to be displayed on all my html pages, i have a .html page for each tab. How can i make it so that i dont have to copy the navbar code into every html page (trying to avoid copying the code since this is messy and a lot of work if i gotta change something).

Im trying to avoid PHP in my project, id prefer Java or AngularJS

Heres the relevant part of the 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>
Christian Paul
  • 55
  • 10

3 Answers3

1

Angularjs provide you two different solutions for achieving this.

1) Make a directive for you nav-bar https://docs.angularjs.org/guide/directive

You can place your nav-bar's code into the directive html file, en call your nav-bar everywhere you need id with the directive's balise. Something like this : <my-nav-bar></my-nav-bar>

2) Using angular ui-rooter I think that is the better choice here. You will have a main html file with a <ui-view></ui-view>. When you change of page, only the content of the ui-view is changed. So you have to place your nav-bar outside the ui-view.

You have an example of what you can do here : https://angular-ui.github.io/ui-router/sample/#/about

PS : don't forget to had the angular-ui-rooter js file to your project if you want to try this solution.

Hope this help.

A+

Oreste Viron
  • 3,592
  • 3
  • 22
  • 34
0

You can use php or another backend language to make a header file and include that in your other pages.

Alternatively, you can use something like Jade and use their includes.

See here: http://jade-lang.com/reference/includes/

ExohJosh
  • 1,832
  • 16
  • 22
0

I also think using angular-ui-router for this will be the best.

You can create one <div ui-view></div> for your app and then create an abstract state that will load your base template with your header in it. Something like this could be your base template:

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

Then in every child state of base you can add your content to the named view 'content'.

With ui-sref-active="active" it's easy to highlight the currently active link.

Please have a look at the demo below or this fiddle.

angular.module('demoApp', ['ui.router'])
 .config(routeConfig);
    
function routeConfig($urlRouterProvider, $stateProvider) {

 $urlRouterProvider.otherwise('/');
 $stateProvider.state('base', {
     url: '/',
        abstract: true,
        templateUrl: 'partials/base.html'
    })
    .state('base.home', {
     url: '',
        views: {
         'content': {
             templateUrl: 'pages/home.html',
                controller: function()  {
                 console.log('home controller');
                }
            }
        }
    })
    .state('base.machines', {
     url: '/machines',
        views: {
         'content': {
             templateUrl: 'pages/machines.html',
                controller: function()  {
                 console.log('machines controller');
                }
            }
        }
    })
    .state('base.persons', {
     url: '/persons',
        views: {
         'content': {
             templateUrl: 'pages/persons.html',
                controller: function()  {
                 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">
 <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">
 home
</script>
<script type="text/ng-template" id="pages/machines.html">
 machines
</script>
<script type="text/ng-template" id="pages/persons.html">
 persons
</script>
</div>
AWolf
  • 8,770
  • 5
  • 33
  • 39