如何在AngularJS SPA應用程序中處理瀏覽器刷新？

我AngularJS應用程序使用如何在AngularJS SPA應用程序中處理瀏覽器刷新？

UI路由器
index.html文件
的登錄和數據的所有調用轉到一個ASP.NET Web控制器與帶/ API/XXX開頭的URL 。

當用戶輸入myapp.com然後服務器index.html這是我想要的。當用戶現在選擇的是網頁上的鏈接，然後UI路由器顯示相應的模板裏面的index.html，然後在瀏覽器地址欄正確顯示這樣的地址：

myapp.com/home 
myapp.com/home/overview 
myapp.com/city 
myapp.com/city/london

請注意，我的配置設置如下：

.config([ 
    '$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider', 
    function (
     $httpProvider, $locationProvider, $sceProvider, $stateProvider) { 
     $sceProvider.enabled(false); 
     $locationProvider.html5Mode(true);

如果現在用戶點擊刷新，然後在瀏覽器忘記，這是在index.html，然後試圖找到網頁：myapp.com/city/london等，這當然是不存在的。然後它顯示一個錯誤頁面，表明該頁面不存在。

我該如何處理這種情況？我想在myapp.com/city用戶點擊刷新，理想回去myapp.com/city

來源

2014-04-26 Melina

你爲什麼說刷新頁面會將用戶重定向到myapp.com/city/london這不存在？它如何不存在？如果它不存在，它首先會在瀏覽器地址欄中出現？ –

「如果瀏覽器地址欄不存在，它首先會出現在瀏覽器地址欄中」。因爲我正在使用角度ui路由器。 ui-router使用模板，即使實際頁面可能不存在，您也可以始終在屏幕的URL欄中看到地址。 – Melina

這與UI路由器無關。我以爲你的意思是在瀏覽器地址欄中顯示的網址不存在，它確實存在，否則你永遠不會到達那裏:)你的問題是與angulars HTML5的路由與你的服務器不匹配。 –

編輯

當您使用HTML5 MODLE與角ruting你必須告訴你的服務器如何處理請求如果您到達其中一條路由，例如，如果您嘗試訪問myapp.com/city，則會收到錯誤消息，因爲服務器將在服務器的根目錄中查找city.html頁面將不會在那裏。如果你從你的應用程序導航到該路線，它將工作正常，但如果你複製並粘貼到你的瀏覽器地址欄，你會得到一個404，因爲服務器不明白如何去city.html。一個簡單的解決方法是避免使用HTML5路由模式。根據你需要做一些URL重寫，使角文檔服務器瞭解如何路由到這些頁面：

From the docs：

使用HTML5模式需要URL重寫，服務器端的，基本上你有重寫所有鏈接到你的應用程序（如index.html的）的入口點

你也可以看看here，這個答案將討論如何讓HTML5路由與您的服務器的工作。

來源

2014-04-26 13:54:20

感謝您的建議，但我認爲這不能解決問題。我的問題是，當瀏覽器刷新它看起來的第一件事是一個名爲myapp.com/city/london的html文件。但是我的應用程序只有一個單獨的html文件，那就是index.html文件。 – Melina

@Melina看到我的編輯。 –

當用戶刷新應用程序時，可以引導他們登錄頁面或默認頁面。這可以通過下面的代碼完成。

app.run(['$location', function ($location) { 
    $location.path('/login'); 
}]);

來源

2017-03-23 05:26:35 ShwetaK4

如何在AngularJS SPA應用程序中處理瀏覽器刷新？

回答

相關問題