javascript - AngularJs 重新加载页面而不是仅加载 View

Question

我有一个简单的 AgularJS 应用程序。我需要在 route 加载 View

$routeProvider.when('/articles/:url', {
  templateUrl: 'partials/article.html',
  controller: ArticleCtrl
});

但是如果我点击页面重新加载并重新加载后，Angular 尝试加载partials/article.html View ，但因错误“NetworkError: 404 Not Found - http://localhost:3000/clanky/partials/article.html”而失败我知道我可以使用“../partials/article.html”代替“partials/article.html”，但我的意思是这不是问题的核心。

这是我的路线:

blog.config([
  '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when('/', {
      templateUrl: 'partials/main.html',
      controller: MainCtrl
    });
    $routeProvider.when('/login', {
      templateUrl: 'partials/login.html',
      controller: LoginCtrl
    });
    $routeProvider.when('/backend', {
      templateUrl: 'partials/backend.html',
      controller: BackendCtrl
    });
    $routeProvider.when('/articles/:url', {
      templateUrl: 'partials/article.html',
      controller: ArticleCtrl
    });
    return $routeProvider.otherwise({
      redirectTo: '/'
    });
  }
]);

附注如果我尝试转到任何其他路线，例如登录，它部分有效，但重新加载仍然存在。

感谢您的回答

Answer 1

看来我也遇到了和你一样的问题。

我不知道如何处理这个问题，但我认为这是因为页面重新加载。

当您未将 html5Mode 设置为 true 时，网址处将为 #，如果您重新加载页面，则# 会将信息跟踪到 $scope 以与 htmlHistory api 配合使用，以便应用程序即使在页面刷新时也能正常工作。

但是一旦将 html5Mode 设置为 true，就没有 # 来存储任何 $scope 信息，当页面重新加载时，Angular无法找到相应的范围，因此返回404。

您可以查看$location section on angularjs guide ，它有一个部分解释了为什么会发生这种情况。

Page reload navigation

The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API, $window.location.href.

希望这对你有帮助，如果你有更好的答案，请告诉我，我也在等待正确的解决方法。