title: How to create single page application in Angular?
body: <p>I am beginner in angular, now working on single page application. i want to inject four pages into index.html.</p>
  
  <p>Its working fine here, but css not supporting that four pages. Also my header and footer part not showing same pages.</p>
  
  <p>injecting pages i am creating only section part there is no header and footer.</p>
  
  <p>Please advice me, if have any demo links with downloadable options please let me know.</p>
  
  <p>'var app = angular.module("app", []);</p>
  
  <pre><code>app.config(function($routeProvider) {
      $routeProvider
  
          .when('/main', {
              templateUrl : 'index.html',
              controller  : 'mainController'
          })
          .when('/products', {
              templateUrl : 'fareproducts.html',                              
              controller  : 'fareproductsController'
          })
          .when('/activation', {
              templateUrl : 'keycardactivation.html',
              controller  : 'keycardactivationController'
          })
          .when('/learnmore', {
              templateUrl : 'learnmore.html',
              controller  : 'learnmoreController'
          });
  });
  
  app.controller('fareproductsController', function($scope) {
  
      //$scope.message = 'Everyone come and see how good I look!';
  });
  
  app.controller('keycardactivationController', function($scope) {
      //$scope.message = 'Look! I am an about page.';
  });
  
  app.controller('learnmoreController', function($scope) {
      //$scope.message = 'Contact us! JK. This is just a demo.';
  });'
  
  
  &lt;!DOCTYPE HTML&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="keywords" content="Smartphone Compatible web design" /&gt;
      &lt;link href="css/bootstrap.css" rel='stylesheet' type='text/css' /&gt;
      &lt;link href="css/style.css" rel='stylesheet' type='text/css' /&gt;
      &lt;!-- Custom Theme files --&gt;
      &lt;script src="js/jquery-1.12.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- banner --&gt;
      &lt;div class="wrapper"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="header"&gt;
                  &lt;div class="logo"&gt;
                      &lt;h1 class="text-center"&gt;Welcome&lt;/h1&gt;
                      &lt;!-- &lt;h1&gt;{{message}}&lt;/h1&gt; --&gt;
                  &lt;/div&gt;
                  &lt;div class="navigation"&gt;
                      &lt;nav class="navbar navbar-default"&gt;
                          &lt;div class="navbar-header"&gt;
                              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
  
                          &lt;div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1"&gt;
                              &lt;ul class="nav navbar-nav"&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="index.html" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/1.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="fareproducts.html" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/2.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;Fare Products&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="parking.html" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/3.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;Parking&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="keycardactivation.html" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/4.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;Master Card® Debit&lt;/span&gt;&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="#contact" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/5.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;FAQs&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="hvr-bounce-to-bottom button"&gt;&lt;a href="#contact" class="scroll"&gt;&lt;div class="menuImg"&gt;&lt;img src="images/6.png" class="iv"/&gt;&lt;/div&gt;&lt;span&gt;Search&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;div class="clearfix"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="content"&gt;
                      &lt;div ng-view=""&gt;
                          &lt;div class="logbtn"&gt;
                              &lt;button class="btn btn-default btn-lg btn-block btn1" name="" value="Learn More"&gt;&lt;a href="#learnmore"&gt;Learn More&lt;/a&gt;&lt;/button&gt;
                              &lt;button class="btn btn-default btn-lg btn-block btn2" name="" value="Login To Travel"&gt;Login To Travel&lt;/button&gt;
                              &lt;button class="btn btn-default btn-lg btn-block btn3" name="" value="Go to Master Card® Debit"&gt;Go to Master Card® Debit&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/spa.js"&gt;&lt;/script&gt;
      &lt;!--- footer ----&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>