title: how to add multiple html pages into one single html page using angularJs
body: <p>I created header.html, footer.html, leftpanel.html and content.html, i want to create a single html page for displaying all the header, footer, leftpanel and content pages into one page using angularjs. Is it possible?</p>
  
  <p>Here is my code:</p>
  
  <p>main.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" href="bootstrap.css"&gt;
  &lt;link rel="stylesheet" href="fullcalendar.css"&gt;
  &lt;link rel="stylesheet" href="prettyPhoto.css.css"&gt;
  &lt;link rel="stylesheet" href="rateit.css"&gt;
  &lt;link rel="stylesheet" href="bootstrap-datetimepicker.min.css"&gt;
  &lt;link rel="stylesheet" href="jquery.cleditor.css"&gt;
  &lt;link rel="stylesheet" href="daterangepicker-bs3.css"&gt;
  &lt;link rel="stylesheet" href="bootstrap-switch.css"&gt;
  &lt;link rel="stylesheet" href="widgets.css"&gt;
  &lt;link rel="stylesheet" href="dropzone.css"&gt;
  &lt;link rel="stylesheet" href="validationEngine.jquery.css"&gt;
  &lt;link rel="stylesheet" href="jquery.gritter.css"&gt;
  &lt;link rel="stylesheet" href="jquery.easy-pie-chart.css"&gt;
  &lt;link rel="stylesheet" href="rating_style.css"&gt;
  &lt;link rel="stylesheet" href="jquery.tablesorter.style.css"&gt;
  &lt;link rel="stylesheet" href="jquery-ui-1.9.2.custom.min.css"&gt;
  &lt;link href="form.css" type="text/css" rel="stylesheet"/&gt;
  &lt;link href="style.css" type="text/css" rel="stylesheet"/&gt;
  &lt;link href="all.css" type="text/css" rel="stylesheet"/&gt;
  &lt;link href="font-awesome.css" type="text/css" rel="stylesheet"/&gt;
  &lt;link href="font-awesome.min.css" type="text/css" rel="stylesheet"/&gt;
  
  &lt;script src="default.js"&gt;&lt;/script&gt;
  &lt;script src="bottom.js"&gt;&lt;/script&gt;
  &lt;script src="topRight.js"&gt;&lt;/script&gt;
  &lt;script src="top.js"&gt;&lt;/script&gt;
  &lt;script src="filter.js"&gt;&lt;/script&gt;
  &lt;script src="custom.js"&gt;&lt;/script&gt;
  &lt;script src="charts.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.validationEngine.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.maskedinput.min.js"&gt;&lt;/script&gt;
  &lt;script src="common.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body ng-app="myApp" ng-view=""&gt;
  
    &lt;div class="container" ng-controller="RouteCtrl"&gt;
  
      &lt;div id="header" ng-view=""&gt;
      &lt;div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/header.html"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="sidebar" &gt;
      &lt;div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/leftpanel.html"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
      &lt;div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/content.html"&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="footer"&gt;
      &lt;div ng-include="C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/footer.html"&gt;
      &lt;/div&gt;
      &lt;/div&gt;      
  
  &lt;/body&gt;
  
  &lt;script&gt;
  var myApp = angular.module('myApp', ['ngRoute']);
  myApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
  
    .when('/main.html', {
      controller: 'RouteCtrl',
      templateUrl: 'C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/main.html'
    })
    // if not match with any route config then send to home page
    .otherwise({
      redirectTo: 'C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/login.html';
    });
  });
  
  myApp.controller('RouteCtrl', function($scope) {
  
    $scope.template = {
      "header": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/header.html",
      "leftpanel": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/leftpanel.html",
      "content": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/content.html";
      "footer": "C:/Users/testuser.SOFTTRENDS/Desktop/Angular/Login/footer.html"; 
    };
  });
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>