<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'
  }
});