<!DOCTYPE html>
<html>
<head>
    <title>Routing</title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
    <script src="OneController.js"></script>
    <script src="TwoController.js"></script>
    <script src="ThreeController.js"></script>

</head>

<body ng-app="routingApp">

    <h1>Routing</h1>

    <a href="#one">Section One</a>
    <a href="#two">Section Two</a>
    <a href="#three">Section Three</a>

    <div ng-view></div>

</body>
</html>
var app = angular.module('routingApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when('/', {templateUrl: 'Default.html'}).
            when('/one', {templateUrl: 'One.html', controller: OneController}).
            when('/two', {templateUrl: 'Two.html', controller: TwoController}).
            when('/three', {templateUrl: 'Three.html', controller: ThreeController}).
            otherwise({redirectTo: '/error', templateUrl:'RouteMissingError.html'});
    }]);
function OneController($scope){
    $scope.doSomething = function(){
        alert('Hello from OneController');
    };
}
function TwoController($scope){
    $scope.doSomething = function(){
        alert('Hello from TwoController');
    };
}
function ThreeController($scope){
    $scope.doSomething = function(){
        alert('Hello from ThreeController');
    };
}
<h2>Default!</h2>
<button class="btn btn-warning" ng-click='doSomething()'>ONE!</button>
<button class="btn btn-warning" ng-click='doSomething()'>TWO!</button>
<button class="btn btn-warning" ng-click='doSomething()'>Three!</button>
<h2>Error - no such page!</h2>