Uso de ng-route para crear aplicaciones de una sola página

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="spa">
  <h1>Aplicaciones de una única página (SPA)</h1>
  <h2>Esta es la página principal</h2>
  <ul>
    <li><a href="#/">Página uno</a></li>
    <li><a href="#dos">Página dos</a></li>
    <li><a href="#tres/1234">Página tres</a></li>
    <li><a href="#noexiste">Enlace roto</a></li>
  </ul>
  <div><strong>Página actual</strong></div>
  <div ng-view></div>
</body>

</html>

// Code goes here
var app = angular.module("spa", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "uno.html",
      controller: 'unoCtrl'
    })
    .when("/dos", {
      templateUrl: "dos.html",
      controller: 'dosCtrl',
      testdata:'Un valor cualquiera'
    })
    .when("/tres/:id", {
      templateUrl: "tres.html",
      controller: 'tresCtrl'
    })
    .otherwise({
      templateUrl:'error.html'
    });
});
app.controller("unoCtrl", function($scope) {
  $scope.mensaje = "Mensaje uno";
});
app.controller("dosCtrl", function($scope,$route) {
  $scope.mensaje = "Mensaje dos";
  $scope.test = $route.current.testdata;
});
app.controller("tresCtrl", function($scope, $routeParams) {
  $scope.mensaje = "Mensaje tres";
  $scope.parametro = $routeParams.id;
});

/* Styles go here */

.uno {
  color: blue;
}

.dos {
  color: orange;
}

.tres {
  color: brown;
}

.cuatro {
  color: red;
}

ul {
  list-style: none;
  text-align: center;
}

Uso de ng-route
Aplicaciones SPA

<div class="uno">Página uno</div>
<div>El mensaje es {{mensaje}}</div>

<div class="dos">Página dos</div>
<div>El mensaje es {{mensaje}}</div>
<div class="cuatro">Los datos arbitrarios enviados son <strong>{{test}}</strong></div>

<div class="tres">Página tres</div>
<div>El mensaje es {{mensaje}}</div>
<div>El parámetro recibido es {{parametro}}</div>

<div class="cuatro">No se encuentra esta página</div>