2

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.

Zak Kus
  • 1,503
  • 3
  • 15
  • 28
  • How do you navigate to the someOtherPage? Is it an `` tag? – runTarm Aug 15 '14 at 20:03
  • The "Html link rewriting" section of this [$location guide](https://docs.angularjs.org/guide/$location) might be helpful. – runTarm Aug 15 '14 at 21:01
  • It sounded like it would fix the problem, however i haven't been able to get it to work correctly (ill fiddle with it some more, but any more references would be appreciated) – Zak Kus Aug 15 '14 at 22:04

1 Answers1

8

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>

officert
  • 1,232
  • 9
  • 12