AngularJS Example:

HTML

<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>
                        <div ng-if="hasSidebar" ng-include="'sidebar.html'" id="sidebar"></div>
                        <div ng-view id="main">loading...</div>
                    </div>

                </div>
            </div>
        </div>
        <div ng-include="'footer.html'" id="footer"></div>
    </div>
    <script type="text/ng-template" id="header1.html">
        header 1 content - no side bar
    </script>
    <script type="text/ng-template" id="header2.html">
        header 2 content - no side bar
    </script>
    <script type="text/ng-template" id="sidebarlink1.html">
        sidebar link 1 content - including sidebar
    </script>
    <script type="text/ng-template" id="sidebarlink2.html">
        sidebar link 2 content - including sidebar
    </script>
    <script type="text/ng-template" id="dashboard.html">
        <div id="content">dashboard</div>
    </script>
    <script type="text/ng-template" id="header.html">
        header 
        <a ng-href="#/header1">Header 1</a> 
        <a ng-href="#/header2">Header 2</a> 
        <a ng-href="#/dashboard">Dashboard</a> 
    </script>
     <script type="text/ng-template" id="sidebar.html">
         sidebar<br/>
         <a ng-href="#/sidebar1">Link 1</a><br/>  
        <a ng-href="#/sidebar2">Link 2</a>  
    </script>
    <script type="text/ng-template" id="footer.html">
        footer
    </script>
</div>

CSS

* {
    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;
}

JavaScript

angular.module('app', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/header1', {
        templateUrl: 'header1.html',
        controller: DashboardCtrl,
        resolve: {
          hasSidebar: function($rootScope) { 
              $rootScope.hasSidebar = false;
              return false; }
        }
    })
    .when('/header2', {
        templateUrl: 'header2.html',
        controller: DashboardCtrl,
resolve: {
          hasSidebar: function($rootScope) { 
              $rootScope.hasSidebar = false;
              return false; }
        }
    })
    .when('/dashboard',{
        templateUrl: 'dashboard.html',
        controller: DashboardCtrl,
        resolve: {
          hasSidebar: function($rootScope) { 
              $rootScope.hasSidebar = true;
              return true; }
        }
    })
    .when('/sidebar1',{
        templateUrl: 'sidebarlink1.html',
        controller: DashboardCtrl,
resolve: {
          hasSidebar: function($rootScope) { 
              $rootScope.hasSidebar = true;
              return true; }
        }
    })
    .when('/sidebar2',{
        templateUrl: 'sidebarlink2.html',
        controller: DashboardCtrl,
resolve: {
          hasSidebar: function($rootScope) { 
              $rootScope.hasSidebar = true;
              return true; }
        }
    })



        .otherwise({
        redirectTo: '/header1'
    });
}]);

function DashboardCtrl() {

}