<div ng-app="planetApp">
<script type="text/ng-template" id="atmosphere.html">
<h2>Name of the Planet: {{planet.name}}</h2>
<p>Carbon Dioxide: {{planet.carbondioxide}}</p>
<p>Nitrogen: {{planet.nitrogen}}</p>
<p>Oxygen: {{planet.oxygen}}</p>
<p>Hydrogen: {{planet.hydrogen}}</p>
</script>
<h1>Atmospheric Composition of Terrestrial Planets</h1>
<ul>
<li><a href="#!/mercury">Mercury</a></li>
<li><a href="#!/venus">Venus</a></li>
<li><a href="#!/earth">Earth</a></li>
<li><a href="#!/mars">Mars</a></li>
</ul>
<div class="planet-container">
<div class="planet-view" ng-view></div>
</div>
</div>
body {
font-family: 'Lato';
margin: 10px auto;
max-width: 800px;
}
ul {
padding: 0;
margin-top: 40px;
text-align: center;
font-size: 1.1em;
}
ul li {
list-style: none;
display: inline-block;
padding: 5px 15px;
margin: 2px 0;
background: orange;
border-radius: 5px;
}
ul li a {
color: white;
text-decoration: none;
}
h1 {
margin: 10px;
text-align: center;
}
h2 {
margin: 10px;
}
p {
margin-left: 10px;
}
.planet-container {
position: relative;
margin: 10px 20px;
}
.planet-view {
padding: 10px;
}
.planet-view.ng-animate {
transition: all ease 0.4s;
position: absolute;
}
.planet-view.ng-enter {
top: 200px;
opacity: 0;
}
.planet-view.ng-leave,
.planet-view.ng-enter.ng-enter-active {
top: 0;
opacity: 1;
}
.planet-view.ng-leave.ng-leave-active {
top: -200px;
opacity: 0;
}
var app = angular.module('planetApp', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider
.when('/mercury', {
templateUrl: "atmosphere.html",
controller: "mercuryCtrl"
})
.when('/venus', {
templateUrl: "atmosphere.html",
controller: "venusCtrl"
})
.when('/earth', {
templateUrl: "atmosphere.html",
controller: "earthCtrl"
})
.when('/mars', {
templateUrl: "atmosphere.html",
controller: "marsCtrl"
})
});
app.controller("mercuryCtrl", function($scope, $route) {
$scope.planet = {
name: 'Mercury',
carbondioxide: 'Trace Amount',
nitrogen: 'Trace Amount',
oxygen: '42%',
hydrogen: '22%'
}
});
app.controller("venusCtrl", function($scope, $route) {
$scope.planet = {
name: 'Venus',
carbondioxide: '96.5%',
nitrogen: '3.5%',
oxygen: 'Almost None',
hydrogen: 'Almost None'
}
});
app.controller("earthCtrl", function($scope, $route) {
$scope.planet = {
name: 'Earth',
carbondioxide: '0.038%',
nitrogen: '78.1%',
oxygen: '21%',
hydrogen: 'Almost None'
}
});
app.controller("marsCtrl", function($scope, $route) {
$scope.planet = {
name: 'Mars',
carbondioxide: '95.7%',
nitrogen: '2.7%',
oxygen: '0.2%',
hydrogen: 'Almost None'
}
});