Angularjs 如何在AngularUI路由器中绕过路由

Angularjs 如何在AngularUI路由器中绕过路由,angularjs,angular-ui-router,single-page-application,Angularjs,Angular Ui Router,Single Page Application,我正在创建一个web应用程序,其中大部分功能部署为AngularJS单页应用程序,但也有一些静态内容页以传统方式提供服务 SPA中的导航使用了角度UI路由器,并且似乎工作正常,静态页面的服务也是如此 但是,代码体系结构是这样的:所有脚本都从主站点模板中引用,因此每个页面都提供服务,包括静态页面。这是一个深思熟虑的决定,因为有些脚本化的特性需要从任何地方都可以访问,甚至可以从静态页面中访问 例如,每个页面的标题区域都包含一个带有typeahead的搜索框,允许用户导航到SPA中的视图,并填充以反映

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

SPA中的导航使用了角度UI路由器,并且似乎工作正常,静态页面的服务也是如此

但是,代码体系结构是这样的:所有脚本都从主站点模板中引用,因此每个页面都提供服务,包括静态页面。这是一个深思熟虑的决定,因为有些脚本化的特性需要从任何地方都可以访问,甚至可以从静态页面中访问

例如,每个页面的标题区域都包含一个带有typeahead的搜索框,允许用户导航到SPA中的视图,并填充以反映所选内容

如果从SPA中调用搜索,则一切都会按预期工作,路由机制会正确执行所需的状态转换以呈现所选内容。但是,如果从一个静态页面中执行相同的搜索,尽管UI路由器正确处理状态转换,但不会呈现内容,因为静态页面不包含通常以呈现为目标的
元素

虽然我能看到问题的起因,但我不确定如何最好地解决它。从新手的角度来看,我似乎需要拦截内容搜索/选择过程并执行不同的逻辑,这取决于搜索是从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路由器中烘焙的方式

有什么建议吗

非常感谢,,
蒂姆

对于任何面临类似问题的人来说,解决方案其实非常简单

不需要尝试拦截和强制状态转换,只需对主页模板进行简单修改即可实现所需的行为,使所有页面(包括静态页面)都能参与角度视图渲染

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

为了解决这个问题,我从SPA页面中删除了
元素,而是在主页模板中的包含元素中添加了
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,并且能够重新呈现以反映状态转换(尽管大多数情况下这种情况从未发生,因为用户只是查看服务器交付的预呈现内容)