How to do multiple views with Angular to support header and sidebar?

Question

I'm using AngularJS for the first time. I've successfully implemented a single ng-view in my index.html page which contains a header.html template. So it looks like below

But now I'm creating a dashboard (dashboard.html). So, I have a left side menu in-addition to header.html so it looks like this:

My index.html is similar to this:

<div  ng-include="'templates/header.html'"></div>
<div class="main" id="main-no-space" >
  <div id="main-page">
    <div id="wrapper" class="container">
      <div class='container'>
        <div ng-view></div>
      </div>
    </div>
  </div>
<div  ng-include="'templates/footer.html'">

My dashboard.html is similar to this:

  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav side-nav">
      <li class="active">
        <a ng-href="#/link1">Link 1</a>
      </li>
      <li>
        <a ng-href="#/link2">Link 2</a>
      </li>
      <li>
        <a ng-href="#/link3">Link 3</a>
      </li>
    </ul>
  </div>

Answer 1

Try this:

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/dashboard', {
        templateUrl: 'dashboard.html',
        controller: DashboardCtrl
    })
        .otherwise({
        redirectTo: '/dashboard'
    });
}]);

function DashboardCtrl() {

}

* {
    box-sizing: border-box;
}
#main:after {
    content: "";
    display: block;
    clear: both;
}
#header {
    padding: 20px;
    border: 1px solid #000;
}
#main {
    padding: 20px;
    border: 1px solid #000;
}
#sidebar {
    padding: 20px;
    border: 1px solid #000;
    float: left;
    width: 20%;
}
#content {
    padding: 20px;
    border: 1px solid #000;
    float: right;
    width: 78%;
}
#footer {
    padding: 20px;
    border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular-route.js"></script>
<div ng-app="app">
    <div ng-include="'header.html'" id="header"></div>
    <div class="main" id="main-no-space">
        <div id="main-page">
            <div id="wrapper" class="container">
                <div class="container">
                    <div ng-view id="main">loading...</div>
                </div>
            </div>
        </div>
        <div ng-include="'footer.html'" id="footer"></div>
    </div>
    <script type="text/ng-template" id="dashboard.html">
        <div ng-include="'sidebar.html'" id="sidebar"></div>
        <div id="content">dashboard</div>
    </script>
    <script type="text/ng-template" id="header.html">
        header
    </script>
     <script type="text/ng-template" id="sidebar.html">
        sidebar
    </script>
    <script type="text/ng-template" id="footer.html">
        footer
    </script>
</div>

JSFiddle http://jsfiddle.net/mcVfK/928/

Answer 2

One option would be to look at ui-router as it allows you to such customization easily.

The second option is to create a leftNav control separate from dashboard and then include it in the index.html. Show and hide it based on the active view.

See one of my old answers Slicing an SPA into several components and use AngularJS