javascript - AngularJS - 如何让服务器端和客户端路由协同工作

标签 javascript node.js angularjs routes locomotivejs

我正致力于将项目移植到基于 Angular SPA。它目前是一个更“传统”的 Node/机车应用程序,从服务器端提供模板(从来不知道这个的正确术语)。

项目太大,无法一次全部迁移,因此我们一次将其转换为 Angular 页面。

我的问题:如果您加载应用的 Angular 部分,一切正常。您可以正确转到 Angular 路线。但是,如果您随后转到非 Angular 路线(应该在服务器端处理),则不会加载任何内容(ng-view 变为空白,而不是加载一个全新的模板)。如果您首先转到服务器端路由或点击刷新,页面将正确加载。

我的猜测是 Angular 正在尝试处理这些路由,我不确定如何让它让服务器接管。

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/something/page1', {
    templateUrl: '/page1.html',
    controller: 'page1Ctrl'
  });
  $routeProvider.when('/something/page1/subpage', {
    templateUrl: '/subpage.html',
    controller: 'subpageCtrl'
  });
}]);

这是我的 Angular routeProvider。没有指定“否则”。服务器端我有类似的东西:

this.match( '/someOtherPage', 'someOtherPage#showstuff');

如果我直接转到/someOtherPage,它会从服务器端正确加载。如果我转到/something/page1,然后转到/someOtherPage,它似乎没有联系服务器。

最佳答案

因为您使用的是 angular html 5 模式,所以 angular 无法区分您希望 angular 处理的路由和您不需要的路由。我认为您需要告诉 angular 忽略某些路线。看起来这就是您要查找的内容:

https://docs.angularjs.org/guide/$location#html-link-rewriting

因此,请将指向非 Angular 页面的链接更改为使用 target .

例如。 <a href="/ext/link?a=b" target="_self">link</a>

关于javascript - AngularJS - 如何让服务器端和客户端路由协同工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25333264/

相关文章:

AngularJS $http,错误处理,拦截器和响应状态码 0

javascript - 如何使用 ui-router 测试依赖于服务的 AngularJS Controller ?

JavaScript:动态(动态)创建样式元素的优缺点

javascript - 在javascript中转义双引号

javascript - mysql 列的日期在发送到前端后发生更改

javascript - 使用 pdfMake 下载多个文件

javascript - Youtube API 多个带有事件的视频

node.js - Node.js 的最佳缓冲区大小?

node.js - Node.js 线程池的困惑

angularjs - 在 AngularJS 上设置默认 header ,但不要在某一特定请求上使用它