404 Angularjs TemplateUrl路由错误

404 Error with Angularjs TemplateUrl Routing

本文关键字：错误 路由 TemplateUrl Angularjs      更新时间：2023-12-24

我正在学习本教程，试图在我的MVC3应用程序中创建一个SPA，其中SPA由控制器DemoControlle.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>

在谷歌AngularJS小组的帮助下，我强烈建议所有需要AngularJS帮助的人，我现在知道哪里出了问题，以及如何更好地解决这类问题。

以下是我从它的一个成员那里收到的提示：

我不能说在你的情况下具体是什么问题，但在一般情况下，您将对其进行故障排除的方法是检查以下内容：

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

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

如果URL是不同，相应地修改templateUrl参数，使其匹配正确的URL。如果您仍有问题，请发布工作URL的示例和浏览器的URL示例请求何时获得404。

再加上我无法用静态url调出模板的事实，我发现了另一个SO问题，直接解决了这个问题。如何请求ASP.NET MVC中~/Views文件夹下的静态.html文件？

我的问题的答案：
所以我创建了一个~/Static文件夹来存放我所有的模板，现在我的angular应用程序运行得很好，因为当我请求临时模板时，我可以给它一个直接的url来获取它。

我认为你可以通过两种方式修复：

方法1：添加如下哈希符号：<a href="#/about">

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

像这样：

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

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

相关文章：