直接链接到带路由参数的URL中断AngularJS App

我有一个问题，当我有一个参数后面有一个参数的直接链接。来自页面的链接工作。我正在开发一个博客应用程序。直接链接到带路由参数的URL中断AngularJS App

localhost/blog正确加载。在那个页面上，我有一个链接到本地主机/博客/文章的名称。该链接将正确加载。问题是当我刷新/博客/文章的名称页面或直接去它。它会破坏并且不加载任何东西。

Chrome中的Javascript控制台只给出了所有javascript文件的错误“Uncaught SyntaxError：Unexpected token <”。我也有这个问题，当URL有尾随/这似乎是一个角度的常见问题。不知道它是否相关。

我的路线的相关部分。

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。

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

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

来源

2014-10-17 Matthew

你用什么服务器来提供文件？它是否配置为启用重定向到根页面？我相信问题出在你的服务器端。我也在使用AngularUI和NodeJS Express服务器开发JS博客。您的服务器可能正在为404请求提供服务。所以你得到'意外令牌'的错误。 – 2014-10-17 02:37:14

我实际上也使用快递/节点为服务器。还有一些其他的网页可以工作。关于和联系形式，正确工作。尾随/在那些不工作虽然。 /联系作品。直接链接到/ contact /不会。我将我的快速路线代码添加到问题中。 – Matthew 2014-10-17 03:13:20

找出发生了什么事。当看到斜线或附加参数时，我可以看到角度应用程序正在从不同路径向服务器发出请求。/blog/article正在请求/ blog/javascripts，/ blog/stylesheets等所有不存在的文件。

添加

<base href="/index.html">

到index.html文件固定的问题。

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

来源

2014-10-18 23:03:34 Matthew

我不得不把它加到最上面。谢谢！！！ – 2015-08-14 02:18:58

我假设你的默认html页面，比方说index.html住在根目录下，其他所有的依赖关系都在/src之内。这将对所有的谐音，JavaScript文件，CSS等

您应该配置您的Express服务器以这样的方式对于所有目标www.example.com/src的请求时，它应该寻找资源，在/src文件夹的根目录。下面的配置行将告诉明白这一点。

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进行了测试。

来源

2014-10-17 15:32:03

我在根文件夹中有我的服务器文件。我拥有一切，包括我的index.html在一个名为pubic的文件夹中。公共文件夹内部是凉亭，部分，JavaScript和样式表。我尝试将index.html放在根文件夹中，并使用/ public而不是/ src。我收到了一堆包括相同的错误。有没有让我发现，与表达和角你需要做网址重写，所以我打算进一步了解一下，看看它是否解决了这个问题。 – Matthew 2014-10-18 00:32:58

以解决方案的方式解决问题将解决它。请让我知道，如果我能得到任何帮助。 – 2014-10-18 06:20:56

直接链接到带路由参数的URL中断AngularJS App

回答

相关问题