Left Left - 2 months ago 23
CSS Question

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

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 {

}

Answer

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>