在 angularjs 和节点应用程序中提供文件时出现错误 404

Question

我有

<base href="/!#/">

在我的 index.html 文件的顶部。当我转到 URL http://localhost:5000/ 一切正常时，它会立即添加 #!/，因此 URL 是 http://localhost:5000/#!/ 并且页面显示如预期。

在服务器端，我有以下代码应该允许我使用我的文件

app.use(express.static(path.join(__dirname, 'public')));

我的文件结构类似于：

bookApp(folder)
  server.js
  public(folder)
    index.html
    app.js(ngRoute)
    views(folder)
    css(folder)
    controllers(folder)

而我的 AngularJS 路由是：

(function () {
'use strict';

angular
    .module('app', [
        'ngRoute'
    ])
    .config(config);

function config ($routeProvider) {
    $routeProvider
        .when('/', {
            controller: 'PostsCtrl',
            templateUrl: 'views/posts.html'
        })
        .when('/register', {
            controller: 'registerCtrl',
            templateUrl: 'views/register.html'
        })
        .when('/login', {
            controller: 'loginCtrl',
            templateUrl: 'views/login.html'
        })
        .otherwise('/');
}
})();

第一页 (views/posts.html) 按预期加载，但是当我点击时

<li><a href="/login" title="Login to bookApp">Sign in</a></li>

网址是http://localhost:5000/login，不像我想象的http://localhost:5000/!#/login。

然后显示：

无法获取/登录

当我手动将 URL 更改为 http://localhost:5000/#!/login 时，它工作正常。

如何解决此问题？

我看到的唯一解决方案是去掉 <base> 标记，并在每个链接中手动在 href 指令中添加 !# 在斜杠之前。

Answer 1

您似乎忘记了 ng-view 指令：<div ng-view></div>，它是您的路由提供的内容的容器。如果您将所有内容都包含在一个文件中，请将其放在脚本上方。

你也可以试试：

<ng-view></ng-view>
<div class="ng-view"></div>

您仍在使用 Angular 1 有什么特别的原因吗？我知道这在技术上并不能回答您的问题，但我强烈建议您开始使用最新的 Angular。你仍然可以保留遗留代码，但它会让你所做的很多事情变得更加清晰和清晰。