Navbar not showing up when using ng-include (AngularJS, not using bootstrap)

Question

I'm trying to create a navbar that will appear on every page, by using ng-include to reference it. The navbar works by itself, but for some reason it isn't showing up on the page(s) that I am trying to ng-include it on (for example, the dashboard). I am not using bootstrap because I'm trying to do it from scratch, for learning purposes. I feel like I'm possibly not understanding how AngularJS works?

Here is the code I have so far:

dashboard.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel='stylesheet' href='dashboard.css'>
    <title>Dashboard</title>
  </head>
<body ng-app='MyApp'>

    <nav class="navbar"><div ng-include src="'navbar.html'"></div><p>Hi!</p></nav>

<div class='dashboard'>
  Here be contents
</div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

navbar.html:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="utf-8">
    <link rel='stylesheet' href="navbar.css">
  </head>
<body ng-app='MyApp'>

<nav class='navbar'>
  <ul>
    <li><a href="../app/dashboard/dashboard.html">Home</a></li>  
    <li><a href="app/other.html">Temp</a></li>


  </ul>    




</nav>


  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
</body>
</html>

navbar.css:

.navbar {
    font-family: Arial, sans-serif;
    font-size: .9em;
}
.navbar ul {
    list-style-type: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: lightslategray;
    position: fixed;
    top: 0;
    width: 100%;
}
.navbar li {
    float: left;    
}
.navbar a {
    display: block;
    text-decoration: none;
    cursor: pointer;
    padding: 14px 16px;
    text-align: center;
    background-color:lightslategray;
    color: white;
}
.navbar a:hover {
    background-color: darkslategrey;
}
.active {

}

I tried removing the single quotes but it still didn't work, unfortunately. — Left
– Left, Commented Mar 9, 2016 at 21:48
You are trying to include something that has a body tag inside an existing body element. There can only be one body in an HTML document. — georgeawg
– georgeawg, Commented Mar 9, 2016 at 21:49

Peter Finn · Accepted Answer · 2016-03-09 21:55:50Z

1

Your navbar template shouldn't be an entirely new HTML page. You are just injecting markup, so that file should include code as it would be written.

navbar.html should ONLY consist of

<nav class='navbar'>
  <ul>
    <li><a href="../app/dashboard/dashboard.html">Home</a></li>  
    <li><a href="app/other.html">Temp</a></li>    
  </ul>
</nav>

answered Mar 9, 2016 at 21:55

Peter Finn

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Left Over a year ago

Hmm...I tried that, however the navbar is still not showing up on the dashboard.html? I put the navbar.css contents into dashboard's css file.

Peter Finn Over a year ago

Your navbar should be showing up, it just isn't visible because you never gave it a background color. Add something like "background-color: #eee" to the .navbar class in your css and it should show up

Left Over a year ago

That fixed it! Thanks a ton! Just curious though, why does the navbar show up inside navbar.html even without a background color, but it doesn't show up without the background color in dashboard.html?

amaceing · Accepted Answer · 2016-03-09 21:37:50Z

0

Try removing the single quotes around navbar.html and also make sure that navbar.html exists in the same directory as dashboard.html. If it's in a different directory, you must specify.

answered Mar 9, 2016 at 21:37

amaceing

563 bronze badges

5 Comments

Left Over a year ago

I've read that the single quotes are necessary apparently? And navbar.html is in the same directory as dashboard.html.

amaceing Over a year ago

I'm not 100% positive but I wouldn't think the single quotes are necessary. AngularJS documentation doesn't show any single quotes. Worth a try to take them out.

Left Over a year ago

I saw that AngularJS documentation as well, so I did try taking them out already but that didn't fix the problem, unfortunately.

amaceing Over a year ago

Hmm. And you're 100% positive that navbar.html lives in the app/dashboard dir?

Left Over a year ago

Yep, it's there, along with navbar.css.

Mr Lister · Accepted Answer · 2016-10-09 12:46:11Z

0

First, ng-include must only have the code you need in that part, for example just <nav> </nav> tag.
Second, because you didn't add navbar.css on dashboard.html that is the reason why the navbar doesn't show.

edited Oct 9, 2016 at 12:46

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Oct 3, 2016 at 5:16

George Luis Pagarigan

11 bronze badge

Collectives™ on Stack Overflow

Navbar not showing up when using ng-include (AngularJS, not using bootstrap)

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related