External Links in Angular App

I'm in the process of incorporating Angular into a single page of an existing rails app.

Everything is working perfectly with the routing within the page using the following

app.config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/services/:id', {
        templateUrl: "/javascripts/angular/templates/service_ui/service.html",
        controller: "ServiceCtrl"
     })

     $locationProvider.html5Mode(true);
});

However, I'd like to maintain normal functionality for links that are not related to Angular. For example, we have a number of links in the header that link elsewhere that are now being caught by the angular router.

I've found some potential solutions at: https://groups.google.com/forum/?fromgroups#!topic/angular/basidvjscRk

But the base path method doesnt seem to work..and the target="_self" method is rather obtrusive. Is there a better way to let angular ignore routes that aren't specified in the config function?

I know there is an .otherwise() method but again this seems like a hack. Am I missing something?

Thanks so much!

We have a relatively "traditional" web application in that most of the links trigger full page reloads; very few links go through Angular's routing system. Right after our module definition, we have the following:

app.run(function($location, $rootElement) {
  $rootElement.off('click');
});

This stops the built-in interception of clicks that Angular uses to manipulate the URL and such when you click on a link; the catch is that you now have to use $location manually whenever you want Angular to do its URL magic (e.g. via an ngClick and a function that manipulates $location accordingly).

You may consider using $rootElement.off combined with a special directive or configuration function that re-installs this behavior on links that you detect contain a certain URL fragment.