如何绕过 Angular UI 路由器中的路由

Question

我正在创建一个 Web 应用程序，其中大部分功能部署为 AngularJS 单页应用程序，但也有一些以传统方式提供的静态内容页面.

SPA 内的导航使用 Angular UI 路由器并且似乎工作正常，静态页面的服务也是如此。

但是，代码架构使得所有脚本都从主站点模板中引用，因此在每个页面（包括静态页面）中提供。这是一个深思熟虑的决定，因为有些脚本化功能需要从任何地方访问，甚至是在静态页面中。

例如，每个页面的页眉区域都包含一个带有预输入功能的搜索框，允许用户导航到 SPA 中的视图，填充以反映所选内容。

如果从 SPA 中调用搜索，一切都会按预期进行，并且路由机制会正确执行所需的状态转换以呈现所选内容。但是，如果从其中一个静态页面中进行相同的搜索，尽管 UI 路由器正确处理了状态转换，但内容不会呈现，因为静态页面不包含 <ui-view> 元素通常以渲染为目标。

虽然我知道是什么导致了问题，但我不确定如何最好地解决它。从新手的角度来看，似乎我需要拦截 content search/selection 进程并执行不同的逻辑，具体取决于搜索是从 SPA 内部调用还是从静态页面调用。我期待这样的事情：

if ($state.current.name) {
    // The search was invoked from within the SPA, so only a state change is required.
    $state.go("render", { key: selected_key });
} else {
    // The search was invoked from a static page, so an SPA page load is required

    What can we do here to bypass routing and issue a
    server request for the corresponding SPA deep-linked page?

}

但我愿意猜测有一种更优雅的方法来处理这个问题，也许是 Angular UI 路由器中的一个。

有什么建议吗？

非常感谢，蒂姆

Answer 1

对于遇到类似问题的人来说，解决方法其实很简单。

无需尝试拦截和强制状态转换，只需对主页面模板进行简单修改即可实现所需的行为，使所有页面（包括静态页面）参与 Angular 视图渲染.

在我最初的实现中，只有 SPA 页面使用了 <ui-view> 元素，这导致静态页面忽略了通常在状态转换期间发生的呈现。

为了解决这个问题，我从 SPA 页面中删除了 <ui-view> 元素，而是在主页面模板中的包含元素中添加了一个 ui-view 属性：

<html ng-app="myApp">
    <head>
        ... page head content goes here ...
    </head>
    <body ng-controller="myController">
        <div ui-view>
            ... server-generated page content is injected here ...
        </div>
        ... page scripts are referenced here ...
    </body>
</html>

进行此更改后，每个页面现在实际上都是一个 SPA，并且能够重新呈现以反映状态转换（尽管大多数时候这种情况不会发生，因为用户只是查看预呈现的内容由服务器传送）。

如何绕过 Angular UI 路由器中的路由

How to bypass routing in Angular UI Router

angularjs

single-page-application

angular-ui-router