javascript - Angularjs TemplateUrl 路由的 404 错误

Question

我正在关注 this tutorial ，尝试在我的 MVC3 应用程序中有一个 SPA，其中 SPA 由 Controller 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 for AngularJS 的帮助下，我强烈推荐给所有需要 angularjs 帮助的人，我现在知道出了什么问题以及如何更好地解决此类问题。

这是我从其中一位成员那里得到的提示:

I can’t say what the issue is specifically in your situation, but ingeneral the way you would troubleshoot it is to check the following:

Is the server configured to return the templates as static html?Verify this by constructing a url manually and loading it directlywith a browser (not involving angular at all). You should be able tosee the static html. This is a pre-requisite for anything elseworking. If this doesn't work then the problem is properly configuring.NET and server-side routing.

If the you can get the first step towork, then start your angular app and open up the network tab of yourbrowser’s development tool. If you see 404 requests note the URL. Howis it different than the working URL you used above?

If the URL isdifferent, modify the templateUrl parameter accordingly so that itmatches the correct URL. If you are still having issues, post anexample of the working URL and an example of what URL the browser isrequesting when it gets a 404.

将此与我无法使用静态 url 提取模板的事实相结合，我发现了另一个直接解决此问题的 SO 问题。 How do you request static .html files under the ~/Views folder in ASP.NET MVC?

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