AngularJS Templates

<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="scotchApp">

<head>
  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
  <link rel="stylesheet" href="style.css" />

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

</head>

<!-- define angular controller -->

<body ng-controller="mainController">

  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="#">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">About</a></li>
          <li><a href="#tutorial">Tutorial</a></li>
        </ul>
      </nav>
    </div>
  </header>


<h1>Angular Templates</h1>
<h3>Click on the links above to change this site</h3>


  <div id="main">

    <!-- angular templating -->
    <!-- this is where content will be injected -->
    <div ng-view></div>

  </div>


  <!-- Footer -->

  <footer class="footer">
    <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>


  <!-- SPELLS -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
  <script src="script.js"></script>


</body>

</html>

	// create the module and name it scotchApp
	var scotchApp = angular.module('scotchApp', ['ngRoute']);

	// configure our routes
	scotchApp.config(function($routeProvider) {
	  $routeProvider

	  // route for the home page
	    .when('/', {
	    templateUrl: 'pages/home.html',
	    controller: 'mainController'
	  })

	  // route for the about page
	  .when('/about', {
	    templateUrl: 'pages/about.html',
	    controller: 'aboutController'
	  })

	  // route for the contact page
	  .when('/tutorial', {
	    templateUrl: 'pages/tutorial.html',
	    controller: 'tutorialController'
	  });
	});

	// create the controller and inject Angular's $scope
	scotchApp.controller('mainController', function($scope) {
	  // create a message to display in our view
	  $scope.message = 'An Angular Controller injects this text by using $scope. ';
	});

	scotchApp.controller('aboutController', function($scope) {
	  $scope.message = 'This site uses templateUrl and controllers.';
	});

	scotchApp.controller('tutorialController', function($scope) {
	  $scope.message = 'To learn more check out this great ';
	});


  .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;
  }
  .footer{
    height: 40px;
    background-color: transparent;
  }

  h1, h3{
    text-align: center;
  }

<div class="jumbotron text-center">
	<h2>About</h2>
	
	<p>{{ message }}</p>
</div>

<div class="jumbotron text-center">
	<h2>Tutorial</h2>
	
	<p>{{ message }} <a href="https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating">tutorial</a>.</p>
</div>

<div class="jumbotron text-center">
	<h2>Home Page</h2>
	<p>{{ message }}</p>
</div>