3

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!

Nader Hendawi
  • 375
  • 1
  • 7
  • 17
  • 5
    I think the Google Groups answer is pretty solid. The `target="_self"` method seems to definitely be in the spirit of Angular since it's a declarative approach to the problem. – Langdon May 26 '13 at 01:00
  • Possible duplicate: http://stackoverflow.com/questions/13023338/conditionally-have-anchor-links-send-user-to-a-different-page-rather-than-load/13031727 – Martin May 26 '13 at 07:34
  • target="_self" seems to cause a full page reload when using Angular in conjunction with turbolinks (for same-site pages). – a2f0 Dec 30 '14 at 20:23
  • Possible duplicate of [Angularjs Normal Links with html5Mode](http://stackoverflow.com/questions/16837704/angularjs-normal-links-with-html5mode) – Derek Greer Jan 07 '16 at 15:42

2 Answers2

8

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.

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
0

Another option that may work for you is to change the $rootElement: the link interception only occurs within the element that is declared as the ng-app.

In my case, I switched from <body ng-app="myApp"> to <section id="my-rich-area" ng-app="myApp">.

This worked for me as I didn't have any same-domain, non-angular links within that section, ymmv.

clov3rly
  • 70
  • 5