Question

我有一个问题，当我有一个直接链接到后面有一个参数的页面。页面链接工作。我正在开发一个博客应用程序。

localhost / blog正确加载。在该页面上，我有一个指向localhost / blog / name-of-article的链接。该链接将正确加载。问题是当我刷新/ blog / name-of-article页面或直接转到它。它会破坏而不会加载任何东西。

chrome中的Javascript控制台只会出现错误＆＃34; Uncaught SyntaxError：Unexpected token＆lt; ＆＃34;对于所有的JavaScript文件。当网址有尾随/这似乎是角度的常见问题时我也有这个问题。不确定它是否相关。

我路线的相关部分。

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

    $routeProvider.
        when('/',{
        templateUrl: '/partials/home.html',
            controller: 'HomeController as HomeCtrl'

        }).
        when('/home',{
            templateUrl: '/partials/home.html',
            controller: 'HomeController as HomeCtrl'
        }).
        when('/blog',{
            templateUrl: '/partials/blog.html',
            controller: 'BlogController as blogCtrl'
        }).
        when('/blog/:name', {
            templateUrl: '/partials/article.html',
            controller: 'ArticleController as articleCtrl'

        }).
        otherwise({
            redirectTo: '/'
        });

         $locationProvider.html5Mode(true);

}]);

我使用Node / Express作为服务器，使用api作为angular app。

app.use('*', function(req, res){
  res.sendFile(__dirname + '/public/index.html');
  console.log('page loaded');
});

我也有/ api / contact和/ api / article的路由。

Answer 1

弄清楚发生了什么事。当有一个尾部斜杠或额外参数时，我能够看到角度应用程序正在从不同的路径向服务器发出请求。 / blog / article请求来自/ blog / javascripts，/ blog / stylesheets等的所有文件都不存在。

添加

<base href="/index.html">

修复了index.html文件。

在这里的答案Reloading the page gives wrong GET request with AngularJS HTML5 mode

中找到

Answer 2

我假设你的默认html页面，让我们说index.html生活在根，所有其他依赖关系都在/src内。这将包含您的所有部分，javascript文件，CSS等。

您应该以这样的方式配置您的快速服务器：对于所有针对www.example.com/src的请求，它应该在根目录中的/src文件夹中查找资源。以下配置行将告诉express这样做。

var staticDirectory = "/src";
app.use('/src', express.static(__dirname + staticDirectory));

所有其他请求都应返回index.html。

以这种方式配置express服务器会使所有不会定位index.html的请求返回/src。如果您有任何其他具有静态内容的文件夹，则可以配置express以与/src相同的方式使用它们。

最后，您的express配置文件应该如下所示。

var express = require('express');
var app     = express();
var staticDirectory = "/src";    
app.use('/src', express.static(__dirname + staticDirectory));
app.get('/*', function(req,res){
    res.sendFile(__dirname + '/index.html');
});
app.listen(9000, function(){
    console.log('Express server is listening on 9000. Yayy!');
})

我相信这会解决你的问题。我用this structure测试了这个。

使用route params直接链接到URL会破坏AngularJS App

2 个答案: