How to create a boostrap nav-bar and reuse it on every page

Question

I need to reuse the boostrap navbar on all pages so I been trying to have a single file for the menu and render it using a ng-include angularJS tag

The menu is this file /partials/top_menu.html

<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">EXAMPLE</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="about.html">Quienes Somos</a>
            </li>
            <li>
                <a href="organizacion.html">Organizaci&oacute;n</a>
            </li>
            <li>
                <a href="servicios.html">Servicios</a>
            </li>
            <li>
                <a href="clientes.html">Clientes</a>
            </li>
            <li>
                <a href="portfolio-3-col.html">Galeria</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>

And here is the index.html that tries to include that partial as the navigation menu of the page

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>TITLE</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/modern-business.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div ng-include="'partials/top_menu.html'"></div>
    </nav>
<body>

The problem is that the menu bar is not being render at all and the WebDeveloper console does not show any error or file missing

What am I doing wrong or if this is the wrong aproach to do it let me know can I achieve it

also you can make a custom directive to achieve it, but its better to use ng include — 1Mayur, Aug 05 '15 at 20:54
@Tomislav as you probably saw my index.html points to other html files that need to include that menu as well. — Mauricio Gracia Gutierrez, Aug 05 '15 at 20:55
Well I thought that you want to develop SPA (single page app) using partials and routing. If not then your approach is ok. — Tomislav, Aug 05 '15 at 20:57
@Tomislav and Mayur I have updated my last part of the question to clarify what the problem is — Mauricio Gracia Gutierrez, Aug 05 '15 at 21:02
Also you are missing ng-app directive in your index.html. Try with — Tomislav, Aug 05 '15 at 21:10
@Tomislav please post that and the $scope as an answer since is now working — Mauricio Gracia Gutierrez, Aug 05 '15 at 21:13
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/85245/discussion-between-mauricio-gracia-and-tomislav). — Mauricio Gracia Gutierrez, Aug 05 '15 at 21:21

score 1 · Accepted Answer · edited Aug 05 '15 at 21:31

1

You need to add the ng-app to the body tag of your index.html

<body ng-app>

This is AngularJS bootstraping directive. Without this, the AngularJS process does not start.

And you need to do that for any html file that needs to use angularJS directives

edited Aug 05 '15 at 21:31

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Aug 05 '15 at 21:16

Tomislav

3,181
17
20

That means that you are not using SPA approach. In about.html you have to include all the header scripts as in index.html, include all css files and also set . – Tomislav Aug 05 '15 at 21:21
1

You really heva to consider using routing and partial views. That's the core of the AngularJS – Tomislav Aug 05 '15 at 21:21

score -1 · Answer 2 · edited Aug 06 '15 at 02:09

-1

Use this script may be it help you :

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Must include Jquery file.

edited Aug 06 '15 at 02:09

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Aug 05 '15 at 21:13

MHK

320
1
14

How to create a boostrap nav-bar and reuse it on every page

2 Answers2