title: How to do multiple views with Angular to support header and sidebar?
body: <p>I'm using AngularJS for the first time. I've successfully implemented a single <code>ng-view</code> in my <code>index.html</code> page which contains a <code>header.html</code> template. So it looks like below</p>
  
  <p><img src="https://i.stack.imgur.com/f1NEy.png" alt="enter image description here"></p>
  
  <p>But now I'm creating a dashboard (<code>dashboard.html</code>). So, I have a left side menu in-addition to <code>header.html</code> so it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uRlVM.png" alt="enter image description here"></p>
  
  <p>My index.html is similar to this:</p>
  
  <pre><code>&lt;div  ng-include="'templates/header.html'"&gt;&lt;/div&gt;
  &lt;div class="main" id="main-no-space" &gt;
    &lt;div id="main-page"&gt;
      &lt;div id="wrapper" class="container"&gt;
        &lt;div class='container'&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;div  ng-include="'templates/footer.html'"&gt;
  </code></pre>
  
  <p></p>
  
  <p>My dashboard.html is similar to this:</p>
  
  <pre><code>  &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
      &lt;ul class="nav navbar-nav side-nav"&gt;
        &lt;li class="active"&gt;
          &lt;a ng-href="#/link1"&gt;Link 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a ng-href="#/link2"&gt;Link 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a ng-href="#/link3"&gt;Link 3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>