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 {

}

`ng-include="string"` from [ng-include](https://docs.angularjs.org/api/ng/directive/ngInclude) — Adi Prasetyo, Mar 09 '16 at 21:46
I tried removing the single quotes but it still didn't work, unfortunately. — Left, Mar 09 '16 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, Mar 09 '16 at 21:49
read more about [body tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body) :) — Adi Prasetyo, Mar 09 '16 at 21:52
Hmm, I see. So I should remove the tag from the navbar.html? Can still be there or? — Left, Mar 09 '16 at 21:53
please see the example on angularjs documentation, you who put that tag on navbar.html, so please ask your self first why they are there? :) — Adi Prasetyo, Mar 09 '16 at 21:55

score 1 · Accepted Answer · answered Mar 09 '16 at 21:55

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 09 '16 at 21:55

Peter Finn

71
1
3

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. – Left Mar 09 '16 at 22:10
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 – Peter Finn Mar 09 '16 at 23:55
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? – Left Mar 11 '16 at 20:46

score 0 · Answer 2 · answered Mar 09 '16 at 21:37

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 09 '16 at 21:37

amaceing

56
3

1

[I've read that the single quotes are necessary apparently?](http://stackoverflow.com/a/25903124/6041760) And navbar.html is in the same directory as dashboard.html. – Left Mar 09 '16 at 21:41
I'm not 100% positive but I wouldn't think the single quotes are necessary. [AngularJS documentation doesn't show any single quotes](https://docs.angularjs.org/api/ng/directive/ngInclude). Worth a try to take them out. – amaceing Mar 09 '16 at 21:43
I saw that AngularJS documentation as well, so I did try taking them out already but that didn't fix the problem, unfortunately. – Left Mar 09 '16 at 21:45
Hmm. And you're 100% positive that navbar.html lives in the app/dashboard dir? – amaceing Mar 09 '16 at 21:47
Yep, it's there, along with navbar.css. – Left Mar 09 '16 at 21:49

score 0 · Answer 3 · edited Oct 09 '16 at 12:46

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 09 '16 at 12:46

Mr Lister

45,515
15
108
150

answered Oct 03 '16 at 05:16

George Luis Pagarigan

1
1

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

3 Answers3