Im working on porting a project over to an angular based SPA. Its currently a more "traditional" node/lootivejs 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.

Im working on porting a project over to an angular based SPA. Its currently a more "traditional" node/lootivejs 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.

• javascript
• node.js
• angularjs
• routes
• lootivejs

Share Improve this question Follow asked Aug 15, 2014 at 19:54 Zak KusZak Kus 1,51333 gold badges1515 silver badges2828 bronze badges 3

• How do you navigate to the someOtherPage? Is it an <a href="/someOtherPage"> tag? – runTarm Commented Aug 15, 2014 at 20:03
• The "Html link rewriting" section of this $location guide might be helpful. – runTarm Commented Aug 15, 2014 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 Commented Aug 15, 2014 at 22:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/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>