CODEWITHSUNDEEP
htmlcssangularjs
Left
Left

Reputation: 163

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 {

}

Upvotes: 0

Views: 1818

Answers (3)

George Luis Pagarigan
George Luis Pagarigan

Reputation: 1

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.

Upvotes: 0

Peter Finn
Peter Finn

Reputation: 71

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>

Upvotes: 1

amaceing
amaceing

Reputation: 56

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.

Upvotes: 0

Related Questions