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

Question

Im working on porting a project over to an angular based SPA. Its currently a more "traditional" node/locomotivejs app that serves up templates from the server side (never known the proper term for this).

The projects too large to to migrate all at once, so we are converting it to angular a page at a time.

My problem: if you load the angular part of the app, everything works fine. You can go to the angular routes correctly. However if you then go to a non-angular route (that should be handled serverside), then nothing loads (the ng-view goes blank, rather than a whole new template being loaded up). If you go to a serverside route first or hit refresh, the page loads correctly.

My guess is that angular is trying to handle these routes, and i am unsure how to get it to let the server take back over.

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'
  });
}]);

this is my angular routeProvider. No "otherwise" specified. Serverside I have something like:

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

If i go to /someOtherPage directly, it loads correctly from the serverside. If i go to /something/page1, then go to /someOtherPage, it does not seem to contact the server.

Answer 1

Because you are using angular html 5 mode angular cannot tell the difference between a route that you want angular to handle, and one you don't. I think you need to tell angular to ignore certain routes. Looks like this is what you are looking for:

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

So change your links to non-angular pages to use a target .

ex. <a href="/ext/link?a=b" target="_self">link</a>