Ошибка 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>

Ответ 1

С помощью Google Group for AngularJS, которую я настоятельно рекомендую всем, кто нуждается в помощи angularjs, я теперь знаю, что пошло не так, и как лучше устранить эти проблемы.

Вот советы, которые я получил от одного из своих членов:

Я не могу сказать, что проблема конкретно в вашей ситуации, но в обычно, как вы могли бы устранить его, необходимо проверить следующее:

Установлен ли сервер для возврата шаблонов в качестве статического html? Проверьте это, создав URL-адрес вручную и загрузив его напрямую с браузером (вообще не включающим angular). Ты должен быть способен см. статический html. Это предпосылка для чего-либо еще за работой. Если это не сработает, проблема в правильной настройке .NET и серверная маршрутизация.

Если вы можете сделать первый шаг к затем запустите приложение angular и откройте вкладку сети вашего браузеров. Если вы видите 404 запроса, обратите внимание на URL. Как это отличается от рабочего URL, который вы использовали выше?

Если URL-адрес разные, измените параметр templateUrl соответственно так, чтобы он соответствует правильному URL. Если у вас все еще есть проблемы, отправьте сообщение пример рабочего URL-адреса и пример того, какой URL-адрес браузера запрашивая, когда он получит 404.

Объедините это с тем фактом, что я не смог подтянуть шаблоны со статическим url. Я нашел еще один вопрос SO, который прямо исправил эту проблему. Как вы запрашиваете статические .html файлы в папке ~/Views в ASP.NET MVC?

Отвечайте на мой вопрос:
Поэтому я создал папку ~/Static для размещения всех моих шаблонов, и теперь мое приложение angular работает отлично, потому что, когда я запрашиваю tempate, я могу дать ему прямой url, чтобы получить его.

Ответ 2

Я думаю, вы можете исправить двумя способами:

метод 1: добавьте хеш-знак следующим образом: <a href="#/about">

метод 2: или используйте html5Mode, установив [$locationProvider][1].html5Mode(true);

вот так:

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

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

Ответ 3

Для будущих последователей вам нужно будет обслуживать все представления из общедоступного каталога, где вы устанавливаете в express.static. Или вы можете использовать require() с преобразованием html2js-browserify в браузере или загрузчик raw в webpack, я знаю, что почта устарела:)