Question

我在AgularJS中有一个简单的应用程序。我需要在路线中加载视图

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

但如果我点击页面重新加载并在重新加载Angular后尝试加载partials / article.html视图，但在错误“NetworkError: 404 Not Found - http://localhost:3000/clanky/partials/article.html”时失败我知道我可以使用“../partials/article.html”insted“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: '/'
    });
  }
]);

P.S。如果我尝试去任何其他路线，例如登录，它就会有效，但重装仍然在这里。

感谢您的回答

Answer 1

似乎我遇到了和你一样的问题。

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

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

但是，一旦您将html5Mode设置为true，那么就没有#来存储任何$scope信息，并且当页面重新加载时，角度无法找到相应的范围，所以它返回404。

你可以查看$location section on angularjs guide，它有一节解释为什么会这样。

页面重新加载导航

$ location服务允许您仅更改URL;它不允许您重新加载页面。当您需要更改URL并重新加载页面或导航到其他页面时，请使用较低级别的API，$ window.location.href。

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

Answer 2

使用斜杠启动templateUrl：

templateUrl: '/partials/article.html'

而不是

templateUrl: 'partials/article.html'

AngularJs重新加载页面而只加载视图

2 个答案:

页面重新加载导航