javascript - Angular Express 刷新后从错误的 URL 获取文件

Question

我正在开发这个小型 MEAN 堆栈应用程序，当单击我的图像时，它会显示带有图像信息的部分内容，一切正常，但刷新后 Angular 尝试从错误的网址获取 app.js 文件:例如:http://localhost:3000/image/56afc07d5e1fea4839791b55它将 get 请求发送到 http://localhost:3000/image这是错误的，因此它找不到 Angular app.js 文件。

我如何在 Node 中提供静态文件:

app.use(express.static(path.join(__dirname, '/public')));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));
app.use('/node_modules',  express.static(__dirname + '/node_modules'));
app.use('/uploads', express.static(__dirname + "/uploads"));

app.get('/*', function(req, res) {
  res.sendFile(__dirname +'/public/index.html');
});

这是 Angular app.js 中的路由:

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

    $routeProvider
    .when('/', {
        templateUrl: '/partials/main.html',
        access: {restricted: false}
    })
    .when('/signup', {
        templateUrl: '/partials/signup.html',
        controller: 'authCtrl',
        access: {restricted: false}
    })
    .when('/login', {
        templateUrl: '/partials/login.html',
        controller: 'authCtrl',
        access: {restricted: false}
    })
    .when('/gallery', {
        templateUrl: '/partials/gallery.html',
        controller: 'authCtrl',
        access: {restricted: true}
    })
    .when('/image/:id', {
        templateUrl: '/partials/imageView.html',
        controller: 'imageViewCtrl',
        access: {restricted: true}  
    })
    .otherwise({
        redirectTo: '/'
    });

更新

仅当使用参数刷新页面时才会出现问题，例如:localhost:3000/image/id。在 localhost:3000/image 上刷新时没有问题，在 localhost:3000/image/id 上刷新并重新加载页面时，它会尝试从 localhost:3000/image 而不是 localhost:3000 获取数据

Answer 1

我的错误非常愚蠢。 Express 正确路由应用程序，但是在我添加的 index.html 文件中

Angular 的 app.js 文件:

<script type="text/javascript" src="app.js"></script>

app.js 之前没有 "/" 因此，如果 url 比 localhost:3000/gallery 更长，例如:

localhost:3000/gallery/image Angular 尝试相应地下载 app.js localhost:3000/gallery。

将app.js脚本添加到index.html的正确方法

<script type="text/javascript" src="/app.js"></script>