Angular JS - 非單頁SPA的路徑

Question

我們需要在非SPA模式下加載一些頁面，而在SPA模式下加載其他頁面。 例如，主頁和關於頁面應該是非SPA，而其他頁面應該是SPA。

$ locationProvider.html5Mode（真）; 即使找不到路由，也會使所有頁面都SPA。 不添加該行會使所有頁面都不是SPA。

如何設置路由，以便在路由不存在時，應從服務器獲取頁面？ 即不是pushstate。

另外，我們正在使用ui-router。

Answer 1

使用ui-router，您可以擁有其他狀態。 在其他狀態下，您可以添加可以向服務器請求處理路由的解析：

$urlRouterProvider.otherwise("otherwise");

$stateProvider
  .state('otherwise', {
    url: '/otherwise',
    template: 'some html',
    resolve : {
      serverPage: function servePage() {
        //http request to the server to fetch and redirect. 
      }
    }
  })

Answer 2

不確定為什么早期以“其他”狀態回答的問題不起作用，因為這似乎很有希望。 如果您要訪問多個非spa頁面，並且想要在路由中管理所有這些頁面，您也可以將函數傳遞給otherwise（），而不是定義單獨的狀態，如下所示：

$urlRouterProvider.otherwise(function($injector, $location){
    // redirect here, for example…
    window.location.href= window.location.origin + $location.url();
});

因此，如果用戶導航到以下路線

http://mydomain.com/spa#/nonspa

它將被重定向到

http://mydomain.com/nonspa

（假設'nonspa'不在有效路線中）

也就是說，我可能只是直接鏈接到非spa頁面而不是通過路由代碼 - 看起來更簡單，更快。

Answer 3

將target =“_ self”屬性添加到錨標記是否允許您從SPA頁面轉到非SPA頁面？

Answer 4

好的，所以我調整了之前的答案並找到了解決方法

基本上，當為SPA或非SPA頁面調用服務器時，頁面需要以某種方式指示它正在運行的模式。我為此選擇了一個javascript變量

var html5mode = true;// for SPA, set to false for non SPA. Emit this from the server.

在您的routedefs.js或您定義路線的地方。

// enable html5Mode for pushstate ('#'-less URLs)
if (html5mode) {
     $urlRouterProvider.otherwise(function ($injector, $location) {
         // reload if route not found.
         window.location = window.location;
     });

     $locationProvider.html5Mode(true);
} else {
     $locationProvider.html5Mode(false);
}