title: Multiple ng-views for homepage in angularjs
body: <p>Okay i am new to angular, just started working with ngRoute and ngView directives, i have come across something that is an issue for me but i suspect is only an issue due to my lack of expereince in angluar.</p>
  
  <p>I have the following markup(simplified) on my index.html page:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Sample APP&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="header"&gt;
        &lt;nav class="pull-right"&gt;...&lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;div class="main" ng-view&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The above is the default layout structure that my page uses.  Now my issue is for the home page alone, a slider is shown within the div with the class "header".  Like this:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;nav class="pull-right"&gt;...&lt;/nav&gt;
    &lt;div class="slider"&gt;...&lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>Now this is for the homepage only so i'm totally confused about how to implement this.  Do i need <strong>two</strong> ng-view directives on my index page? eg:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Sample APP&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="header"&gt;
        &lt;nav class="pull-right"&gt;...&lt;/nav&gt;
        &lt;div class="slider" ng-view&gt;...&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="main" ng-view&gt;
      &lt;/div&gt;
  
      &lt;div class="footer"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Also if you need to know why i am doing it this way, it is simply because i bought an html template online, now i am trying to integrate angularjs into the template.</p>