Angular JS - 路由到非单页 SPA答案

【问题标题】：Angular JS - Route to Non Single Page SPAAngular JS - 路由到非单页 SPA
【发布时间】：2014-06-24 02:54:07
【问题描述】：

我们需要在非 SPA 模式下加载一些页面，而在 SPA 模式下加载其他页面。例如，主页和关于页面应该是非 SPA，而其他页面应该是 SPA。

$locationProvider.html5Mode(true); 使所有页面成为 SPA，即使找不到路由。不添加该行会使所有页面都不是 SPA。

如何设置路由，以便在不存在路由时从服务器获取页面？即不是 pushstate。

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

【问题讨论】：

我会说这样的事情是不可能使用角度路由

标签： angularjs routing angular-ui-router pushstate

【解决方案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. 
      }
    }
  })

【讨论】：

那行不通。出于某种原因，这会禁用 html5Mode，然后一切都会到达服务器。

【解决方案2】：

不知道为什么早期的“否则”状态的答案不起作用，因为这似乎很有希望。如果你有多个非 spa 页面要访问，并且你想在路由中管理所有这些，你也可以只将一个函数传递给 else()，而不是定义一个单独的状态，如下所示：

$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 页面，而不是通过路由代码——看起来更简单、更快。

【讨论】：

不幸的是，这会导致无限重新加载。如果我直接点击mydomain.com/nonspa，在页面加载后执行 else 函数，导致重新加载。

【解决方案3】：

将 target="_self" 属性添加到锚标记是否允许您从 SPA 页面转到非 SPA 页面？

【讨论】：

【解决方案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);
}

【讨论】：

您可以只使用 $locationProvider.html5mode(html5mode) 并消除“else”。只是说。