在AngularJS中使用$ routeProvider加載URL後，頁面變爲空白

我在刷新瀏覽器之後保持空白頁面空白時遇到了問題。

當用戶訪問/user/:username,profile.html加載。它在第一次加載時按預期工作，但如果我刷新頁面，則屏幕上會留下一個原始JSON輸出（以前，它只會說「null」）。

有關進一步情況下，我在home.html文件有一個ng-href：

<h3>View your profile page <a ng-href="/user/{{user.username}}">here</a>.</h3>

對應的角文件：

var app = angular.module('social', ['ngRoute', 'ngCookies']) 

app.config(function($routeProvider, $locationProvider) { 
$routeProvider 
.when('/', { 
templateUrl: 'home.html', 
controller: 'HomeController' 
}) 
.when('/login', { 
templateUrl: 'login.html', 
controller: 'LoginController' 
}) 
.when('/signup', { 
templateUrl: 'signup.html', 
controller: 'SignupController' 
}) 
.when('/user/:username', { 
    templateUrl: 'profile.html', 
    controller: 'UserProfileController' 
}) 
$locationProvider.html5Mode(true)

}）

我的控制器：

app.controller('UserProfileController', function($http, $scope, $cookies, $rootScope, $routeParams) { 
console.log("$cookies.get('currentUser')") 
console.log($cookies.get('currentUser')) 
function getCurrentUser() { 
    $http.get('/user/' + $routeParams.username).then(function(res) { 
     console.log('res.data in the user profile controller') 
     console.log(res.data) 
     $scope.user = res.data 
    }) 
} 

if ($cookies.get('currentUser') != undefined) { 
    getCurrentUser() 
} else { 
    console.log("No one is here.") 
}

}）

我得到這個通過去除$locationProvider.html5Mode(true)，並使用ng-href="#/user/{{user.username}}"，這意味着沒有數據後刷新頁面失去了工作，而我沒有得到一個空白屏幕。但是，問題是#顯示在URL中，我最終不會想要。很明顯，如果我將這樣的應用程序推送到生產環境中，我不希望#出現在URL中。如果在開發過程中需要它們，我可以忍受。

我還應該注意，我只有/user/:username這個問題。我的所有其他路由（/,/login和/signup）都按預期工作，這意味着頁面在刷新後不會變爲空白，並且所有數據都會因Cookie的使用而持續存在。

來源

2017-04-27 Farid

嘗試使用此middlware https://github.com/bripkens/connect-history-api-fallback在你的服務器的NodeJS – Leguest

好了，我掠過文檔。該解決方案可能只解決部分問題。「1.請求是GET請求 2.接受文本/ html， 3.不是直接文件請求，即請求的路徑不包含。（DOT）字符和 4.不匹配模式提供options.rewrites（請參閱下面的選項）「我打算利用完整的CRUD操作，所以只限於一個'GET'請求將不會是理想的。如果我使用諸如'user.username'之類的路徑（上面的＃3），我可能會遇到問題。 – Farid

感謝您的快速回復和鏈接！請忽略上述評論。我無法進一步編輯它。以下是我的意思寫作：我瀏覽了文檔，此解決方案可能只解決部分問題，因爲我計劃使用完整的CRUD操作。 – Farid

AngularJS將你的數據存儲在內存中，所以當你刷新頁面時，你將丟失數據，這就是你的頁面留下原始表達式的原因，因爲angualr丟失了綁定所需的數據。

您可以使用route resolves來獲取每個路由所需的數據，以便刷新頁面時，angular將調用該路由的解析函數，該函數將數據返回給控制器。

Route resolves in Angular

來源

2017-04-27 09:17:53

好的，我嘗試使用'resolve'，但它似乎仍然不起作用。我甚至嘗試使用'$ stateProvider'而不是'$ routeProvider'，它仍然導致同樣的問題。問題是第一次頁面加載完全正常，但是當我刷新頁面時，我丟失了所有數據（並且在屏幕上留下了原始的JSON輸出）。決心：{ \t \t用戶：函數（$ HTTP）{ \t \t \t回$ http.get（ '/用戶/ JohnSmith對'），那麼（函數（RES）{ \t \t \t \t回報res.data \t \t \t}） \t \t} \t} – Farid

別的東西，我注意到：如果URL是'網址：「/：username''，然後一切工作正常。刷新後數據和頁面仍然正常加載。一旦我使用更長的網址，例如'url：'/ user /：username''，我就會遇到問題。在這種情況下，頁面刷新後會丟失。 – Farid

嘗試爲該問題創建一個plnkr，以便我們可以查看該庫以及庫版本信息 –

在AngularJS中使用$ routeProvider加載URL後，頁面變爲空白

回答

相關問題