Ошибка 404 с помощью шаблона Angularjs TemplateUrl

Я следую этому учебнику, пытаясь иметь SPA внутри моего приложения MVC3, где SPA вызывается контроллером DemoController.cs.

Я получаю 404 ошибки, когда приложение пытается загрузить различные шаблоны (about.html, contact.html и home.html) через панель навигации.

Это моя структура каталогов (не включая остальные приложения MVC3):

Scripts
-script.js 
Views
-Demo
--pages
---about.html
---contact.html
---home.html
--Index.cshtml
--_ViewStart.cshtml

Это мой файл script.js, где я определяю маршруты.

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', []);

// configure our routes
scotchApp.config(function ($routeProvider) {
$routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl: 'pages/about.html',
        controller: 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl: 'pages/contact.html',
        controller: 'contactController'
    });
});

// create the controller and inject Angular $scope
scotchApp.controller('mainController', function ($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function ($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function ($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

Это мой индекс index.html:

    <div ng-app="scotchApp">
    <!-- HEADER AND NAVBAR -->
    <div ng-controller="mainController">
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i>About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li>
                </ul>
            </div>
        </nav>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">
            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>
        </div>
    </div>
</div>

Ответы

.config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);
    $routeProvider
      .when('/', {...