Angular NgRoute example

var app = angular.module('plunker', ['ngRoute','ngAnimate']);

app.controller('MainCtrl', function($scope) {
  $scope.page=1;
  $scope.setpage=function(page){
    $scope.page=page;
  }
  $scope.name = 'World';
});
app.controller('about',function($scope){
  $scope.setpage(2);
  $scope.content='About';
});
app.controller('contact',function($scope){
  $scope.setpage(3);
  $scope.content='Contact';
});
app.controller('home', function($scope) {
  $scope.setpage(1);
  $scope.content = 'Home';
});

app.config(['$routeProvider',function($routeProvider){
  $routeProvider
  .when(
    '/about',{
    controller:'about',
    templateUrl:'about.html'
    })
    .when(
    '/contact',{
    controller:'contact',
    templateUrl:'contact.html'
    })
    .when(
    '/',{
    controller:'home',
    templateUrl:'home.html'
    })
    .otherwise('/');
}]);

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script data-require="jquery@>=1.9.1 <3" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <link data-require="bootstrap@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
  <script data-require="angular-animate@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>

  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Sample Animation</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li ng-class="active:page==1"><a href="#/">Home</a></li>
          <li ng-class="active:page==2"><a href="#/about">About</a></li>
          <li ng-class="active:page==3"><a href="#/contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container ngview" ng-view>
    
  </div>
</body>

</html>

/* Put your css in here */
.ngview.ng-enter { transition: 1s linear all; opacity: 0; }
.ngview.ng-enter-active { opacity: 1; }

<h1>{{content}} <small>Contact me</small></h1>

<h1>{{content}} <small>About me :p</small></h1>
<p>Hai every one i am Basilin Joe i just started coding in angular and find it intreasting</p>

<h1>{{content}} <small>Home sweet home</small></h1>