I am attempting to develop a navigation bar that will be displayed on every page by using ng-include as a reference. While the navbar functions properly on its own, it is not appearing on the pages where I am trying to include it (example: the dashboard). I have opted not to use Bootstrap in order to build it from scratch for educational purposes. I suspect there may be a misunderstanding of how AngularJS operates?
Here is the current code snippet:
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 {
}