Angularjs TemplateUrl路由出错404错误

我正在学习本教程,尝试在我的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代码:

schumacherj.. 13

在Google Group for AngularJS的帮助下,我强烈建议所有需要angularjs帮助的人,我现在知道出了什么问题,以及如何更好地解决这些问题.

以下是我从其中一位成员那里收到的提示:

我无法在您的情况下明确说明问题是什么,但一般来说,排除故障的方法是检查以下内容:

服务器是否配置为将模板作为静态html返回？通过手动构建URL并使用浏览器直接加载(完全不涉及角度)来验证这一点.你应该能够看到静态html.这是其他任何工作的先决条件.如果这不起作用,则问题是正确配置.NET和服务器端路由.

如果您可以迈出第一步,那么启动您的角度应用程序并打开浏览器开发工具的网络选项卡.如果您看到404请求,请记下该URL.它与您上面使用的工作URL有什么不同？

如果URL不同,请相应地修改templateUrl参数,使其与正确的URL匹配.如果您仍然遇到问题,请发布工作URL的示例以及浏览器获取404时请求的URL的示例.

将此与我无法使用静态URL提取模板这一事实相结合,我发现另一个直接修复此问题的SO问题. 你如何在ASP.NET MVC中的〜/ Views文件夹下请求静态.html文件？

回答我的问题:
所以我创建了一个〜/ Static文件夹来存放我的所有模板,现在我的角度应用程序工作正常,因为当我请求一个模板时,我可以给它一个直接的URL来获取它.