直接鏈接到帶路由參數的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

回答

相關問題