Question

我正在关注this tutorial，尝试在我的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 for AngularJS的帮助下，我强烈建议所有需要angularjs帮助的人，我现在知道出了什么问题以及如何更好地解决这些问题。

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

我不能说你的情况特别是这个问题，但在   一般来说，排除故障的方法是检查以下内容：

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

如果你能迈出第一步   工作，然后启动你的角应用程序，并打开你的网络选项卡   浏览器的开发工具。如果您看到404请求，请记下该URL。怎么样   它与您上面使用的工作URL有什么不同？

如果网址是   不同的是，相应地修改templateUrl参数以便它   匹配正确的URL。如果您仍有问题，请发布   工作URL的示例以及浏览器的URL示例   在获得404时请求。

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

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

Answer 2

我认为您可以通过两种方式解决问题：

方法1：像这样添加哈希符号：<a href="#/about">

方法2：或通过设置[$locationProvider][1].html5Mode(true);

来使用html5Mode 像这样：

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

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

Answer 3

对于将来的关注者，您需要在express.static中设置的公共目录中提供所有视图。或者，你可以在browserify中使用带变换html2js-browserify的require（），或者在webpack中使用raw加载器，我知道帖子已经过时了：）

Angularjs TemplateUrl路由出错404错误

3 个答案: