Angular routing without changing location

Question

Chrome Packaged Apps have a rather strict Content Security Policy. One result of this is that manipulating the location (like clicking on a link) results in:

'Can't open same-window link to "chrome-extension://lkjasdfjklbdskjasdfjkhfdshjksad/derp.html"; try target="_blank". '

Target _blank will open the link in chrome which is not what I want. Can AngularJS' routing work in such a locked-down environment?

They docs give an example of an Angular app, but conspicuously does not use routing.

Update

Here is the link that, when clicked, gives the error: <a class='walrus-link' ng-href='paystubs/{{walrus.id}}'>Walrus {{id}}!</a>

Answer 1

Instead of using an href, try using ng-click and call a method to your controller the relocates to the appropriate page using $location. See the documentation on the AngularJS site. The following quote from the doc gives an indication that the $location service might be appropriate for you:

When should I use $location? Any time your application needs to react to a change in the current URL or if you want to change the current URL in the browser.

Your code might look something like this:

<a class='walrus-link' ng-click='getPaystub(walrus.id)'>Walrus {{id}}!</a>

and in your parent controller, you'll need a scope method called 'getPaystub' with a line similar to:

$scope.getPaystub = function(selectedWalrusId) {
  $location.path('paystubs/'+$scope.walrus.id);
}

This way angular keeps control and won't cause a page refresh. This hopefully keeps you within the bounds of the CSP. Unfortunately I cannot test this in a packaged app, but I've used the exact same convention in a web app and it works just dandy.