在AngularJS中加载带有$routeProvider的URL后，页面变为空白

刷新浏览器后，我的一个页面无法保持空白

当用户访问/user/：username时，将加载profile.html。它在第一次加载时按预期工作，但是如果我刷新页面，屏幕上会留下一个原始JSON输出，它只会说null

为了进一步了解上下文，我在my home.html文件中有一个ng href：

}

我的控制器：

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.html5Modetrue并使用ng href=/user/{{{user.username}}实现了这一点，这意味着页面刷新时不会丢失任何数据，并且不会出现空白屏幕。但是，问题是URL中显示了这些内容，这是我最终不想要的。显然，如果我将这样的应用程序推到生产环境中，我不希望URL中出现。如果在开发过程中需要它们，我可以接受

---

我还应该注意，我只有/user/：username有这个问题。我的所有其他路由/、/login和/signup都按预期工作，这意味着刷新后页面不会变为空白，由于使用了cookies，所有数据都会持续存在。

AngularJS将数据存储在内存中，因此当您刷新页面时，您将丢失数据，这就是为什么页面会留下原始表达式，因为Angular丢失了绑定所需的数据

您可以使用route resolves获取每个路由所需的数据，以便在刷新页面时调用该路由的resolve函数，该函数将数据返回控制器

---

试着在你的nodejs服务器中使用这个中间软件好的，所以我浏览了一下文档。这个解决方案可能只解决部分问题。1.该请求是GET请求2。它接受text/html，3。不是直接文件请求，即请求的路径不包含。点字符和4。与选项中提供的模式不匹配。重写请参阅下面的选项我计划使用完整的CRUD操作，因此仅限于GET请求并不理想。如果我使用上面的user.username 3这样的路径，我也可能会遇到问题。谢谢你的快速回复和链接！请忽略以上评论。我不能再编辑了。我的意思是：我浏览了一下文档，这个解决方案可能只解决了部分问题，因为我计划使用完整的CRUD操作。可能是Ok的重复，我尝试了resolve，但它似乎仍然不起作用。我甚至尝试使用$stateProvider而不是$routeProvider，但仍然导致了相同的问题。问题是页面第一次加载时完全正常，但随后我丢失了所有数据，并且在刷新页面时，屏幕上只剩下原始JSON输出。解析：{user:function$http{return$http.get'/user/johnsmith'。然后functionres{return res.data}}}我注意到：如果url是url:'/:username'，那么一切都正常。刷新后，数据和页面仍能正确加载。一旦我使用较长的url，比如url:“/user/：username”，我就会遇到问题。在这种情况下，刷新后页面将丢失。请尝试为该问题创建plnkr，以便我们可以查看该问题以及库版本信息

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.")
}