Angularjs TemplateUrl路由出现404错误

Question

我正在按照本教程进行操作，试图在我的MVC3应用程序中包含一个SPA，该SPA由控制器DemoController.cs调用。

当应用尝试通过导航栏加载不同的模板（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>

Answer 1

在Google Group forAngularJS的帮助下，我强烈建议所有需要angularjs帮助的人，我现在知道问题出在哪里，以及如何更好地解决此类问题。

这是我从其成员之一那里获得的提示：

我无法说出您所遇到的具体问题是什么，但是一般来说，解决问题的方法是检查以下内容：

服务器是否配置为将模板作为静态html返回？通过手动构造一个url并直接用浏览器加载它（根本不涉及角度）来验证这一点。您应该能够看到静态html。这是其他所有工作的前提条件。如果这不起作用，则说明问题是正确配置.NET和服务器端路由。

如果您可以迈出第一步，那么请启动您的Angular应用并打开浏览器开发工具的“网络”标签。如果看到404请求，请记下URL。与您上面使用的有效网址有什么不同？

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

结合以下事实，即我无法使用静态网址提取模板，我发现了另一个直接解决此问题的SO问题。 如何在ASP.NET MVC的〜/Views文件夹下请求静态.html文件？
回答我的问题：
因此，我创建了一个〜/Static文件夹来容纳我的所有模板，现在我的angular应用程序可以完美运行，因为当我请求模板时，我可以给它一个直接的URL来获取它。