AngularJS Routes

<!DOCTYPE html>
<html lang="en">

<head>

  <title>AngularJS Routing example</title>

  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />


  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">


  <style>

  </style>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body ng-app="sampleApp">


  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
          <li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
          <li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>





  <div class="container">
    <h1>Web Frameworks</h1>
    <div class="row">
      <div class="col-md-3">
        <ul class="nav">
          <li><a href="#Rails"> Ruby on Rails </a></li>
          <li><a href="#Mean"> MEAN Stack </a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <div ng-view></div>
      </div>

    </div>

  </div>
  <!-- /.container -->


  <script type="text/ng-template" id="rails.html">

    <h2> Ruby on Rails </h2> {{message}}

  </script>

  <script type="text/ng-template" id="mean.html">

    <h2> MEAN Stack </h2> {{message}}

  </script>


  <!-- Footer -->

  <footer class="footer" id="footColor">
    <div class="container">

      <span style="float:left;">©2015 Bryant Tunbutr</span>

      <span style="float:right;">
        <a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
        <a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
      </div><!-- end Container-->
    </footer>



  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="app.js"></script>

</body>

</html>


var sampleApp = angular.module('sampleApp', []);

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/Rails', {
	templateUrl: 'rails.html',
	controller: 'RailsController'
      }).
      when('/Mean', {
	templateUrl: 'mean.html',
	controller: 'MeanController'
      }).
      otherwise({
	redirectTo: '/Rails'
      });
}]);


sampleApp.controller('RailsController', function($scope) {
	
	$scope.message = 'Great for beginning web developers. Learn for free at The Odin Project.';
	
});


sampleApp.controller('MeanController', function($scope) {

	$scope.message = 'Great speed and scalability. Learn for free at Free Code Camp.';

});


  
  .footer{
    height: 40px;
    background-color: transparent !important;
  }

  .plain-header {
    a{
      color:#428bca;
    }
    a:hover,
    a:focus {
      background-color: #FFF;
      color: #0085a1;
    }
    position: relative;
    padding: 30px 15px;
    text-align: center;
    font-size: 20px;
  }

  #home_link{
    font-size: 1.7em;
    color: white;
    text-transform: uppercase;
    letter-spacing: -1px;
    padding: 9px 15px;
    font-weight: bold;
  }


  #logo {
    color:#428bca;
    position: relative;
    text-align: center;
    font-size: 20px;
    padding: 30px 15px;
    text-align: left;
    :hover,:focus {
      background-color: #eeeeee;
      color: #0085a1;
    }
  }
  
  #logo:hover,
  #logo:focus {
    background-color: #eeeeee;
    color: #0085a1;
  }
  
  h1{
    text-align: center;
  }