<!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;
}