在 AngularJS 中使用 $routeProvider 加载 URL 后页面变为空白

Question

我无法在刷新浏览器后防止其中一个页面变为空白。

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

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

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

对应的Angular文件：

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）都按预期工作，这意味着页面在刷新后不会变为空白，并且所有数据由于使用而持续存在饼干。

Answer 1

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

您可以使用 route resolves 获取每条路线所需的数据，这样当您刷新页面时 angular 将调用该路线的解析函数，该函数将 return数据到控制器。

Route resolves in Angular

在 AngularJS 中使用 $routeProvider 加载 URL 后页面变为空白

Page goes blank after loading URL with $routeProvider in AngularJS

angularjs

node.js

ngroute

route-provider

angular-cookies