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 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>
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('/sidebar', {
templateUrl: 'sidebar.html',
controller: DashboardCtrl
})
.otherwise({
redirectTo: '/sidebar'
});
}]);
function DashboardCtrl() {
}