Angularjs 的 TemplateUrl 路由出现 404 错误

Question

我正在按照这篇教程，尝试将SPA嵌入我的MVC3应用程序中，并由控制器DemoController.cs调用该SPA。

当应用程序尝试通过导航栏加载不同的模板（about.html、contact.html和home.html）时，我遇到了404错误。

这是我的目录结构（不包括其余的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's $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>

- schumacherj

Answer 1

借助Google Group for AngularJS 的帮助，我强烈建议需要angularjs帮助的每个人都去参考一下，现在我知道了问题出在哪里，以及如何更好地解决这些问题。

这是我从其中一位成员那里得到的技巧：

我无法确定你的情况具体是什么问题，但是通常你可以通过以下方式来排除故障：

服务器是否配置为返回静态HTML模板？手动构造URL并直接在浏览器中加载它（完全不涉及angular）。你应该能够看到静态html。这是任何其他工作的先决条件。如果这行不通，那么问题就是.NET和服务器端路由的正确配置。

如果第一步可以进行，请启动您的Angular应用程序，并打开浏览器开发工具的网络选项卡。如果您看到404请求，请注意URL。它与您上面使用的工作URL有何不同？

如果URL不同，则相应地修改templateUrl参数，以使其与正确的URL匹配。如果仍然有问题，请提供一个工作URL的示例以及当浏览器请求404时正在请求的URL的示例。

结合我不能使用静态URL调用模板的事实，我找到了另一个SO问题，直接解决了这个问题。如何在ASP.NET MVC下请求~/Views文件夹中的静态.html文件？

我的问题的答案：
因此，我创建了一个~/Static文件夹来存放所有模板，现在我的angular应用程序完美运作，因为当我请求一个模板时，我可以直接给它一个URL。

- schumacherj

---

非常感谢您的努力！ - Bojana Šekeljić

Answer 2

我认为有两种方法可以解决这个问题：

方法一：添加#号，如下：<a href="#/about">

方法二：使用html5Mode，设置[$locationProvider][1].html5Mode(true);

代码如下：

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

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

- naoko

---

我的$locationProvider html5mode已经设置为true，但仍然看到错误页面。 - KhoPhi

Answer 3

对于未来的追随者，您需要从公共目录提供所有视图，在其中设置express.static。 或者，您可以在browserify中使用transform html2js-browserify，或在webpack中使用raw加载程序，我知道这篇文章已经过时了：）

- Uland Nimblehoof