<!DOCTYPE html>
<html ng-app="test">

  <head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-animate.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <ul>
      <li><a href="#/">View 1</a></li>
      <li><a href="#/view2">View 2</a></li>
    </ul>
    
    <div>
      <div ng-view style="display:inline-block"></div>
    </div>
    
    <h2>Some text</h2>
    <hr>
    <h4>footer</h4>
  </body>

</html>

// Code goes here

var app = angular.module('test', ['ngRoute', 'ngAnimate'])
.config(function($routeProvider, $locationProvider) {
	$routeProvider
		.when('/', {
			templateUrl: 'view1.html',
		})
		.when('/view2', {
			templateUrl: 'view2.html',
		})
});
/* Styles go here */

.ng-enter, .ng-leave {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ng-enter {
    opacity: 0;
}

.ng-enter-active{
    opacity: 1;
}

.ng-leave {
    opacity: 1;
}

.ng-leave-active {
    opacity: 0;
}

.page>div.center{
    width: 500px; /* fixed width, this value will change in media queryes*/
    margin: 0 auto;
}

h2{
  margin-top: 100px;
}

h2, h4{
  text-align:center;
}
<div class="page">
  <div class="center">
    <h1>view 1</h1>
    <h1>view 1</h1>
    <h1>view 1</h1>
    <h1>view 1</h1>
    <h1>view 1</h1>
    <h1>view 1</h1>
    <h1>view 1</h1>
    
  </div>
</div>
<div class="page">
  <div class="center">
    <h1>view 2</h1>
    <h1>view 2</h1>
    <h1>view 2</h1>
    <h1>view 2</h1>
    <h1>view 2</h1>
  </div>
</div>