AngularJs重新加載頁面而不是僅加載視圖

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”插入“ 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 ，URL處將是# ，並且如果您重新加載頁面，則#會將信息跟蹤到$scope以與htmlHistory api配合使用，以便該應用程序即使在頁面刷新。

但是，一旦將html5Mode設置為true ，便沒有#存儲任何$scope信息，並且當頁面重新加載時，angular找不到相應的作用域，因此返回404 。

您可以在angularjs guide上查看$ location部分 ，其中有一個部分解釋了為什么發生這種情況。

頁面重新加載導航

$ location服務僅允許您更改URL。 它不允許您重新加載頁面。 當您需要更改URL並重新加載頁面或導航到其他頁面時，請使用較低級別的API，$ window.location.href。

希望這對您有所幫助，如果您有更好的答案，請告訴我，我也在等待正確的解決方案。

Answer 2

用斜杠啟動templateUrl：

templateUrl: '/partials/article.html'

代替

templateUrl: 'partials/article.html'