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>

Just a sanity check: are you using Angular 1.1.0+ instead of 1.0.x? And can you post the code for your $routeProvider that is giving you trouble? — eterps
– eterps, Commented Mar 13, 2013 at 22:42
You ever get this figured out? I've never looked into Chrome packaged apps until I saw this. Curious to see how you're getting along. — eterps
– eterps, Commented Mar 17, 2013 at 15:24
After much effort, your answer was the correct one. It seems you must explicitly change $location yourself and then Angular will route correctly. I think Google doesn't want packaged apps to be too similar to traditional websites, but there are adjustments when web developers come in with certain practices from the web (e.g. links) — Chris
– Chris, Commented Mar 18, 2013 at 16:32

eterps · Accepted Answer · 2013-03-14 02:28:27Z

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.

schellmax · Accepted Answer · 2015-05-28 19:14:08Z

0

routing works for me in my chrome app when not using $routeProvider's html5 mode (which is disabled by default), you just have to use a hash in the url.

so my links look like this:

<a href="#about">About</a>

$routeProvider configuration is as follows:

$routeProvider.when('/about', {templateUrl:'about.html'})

answered May 28, 2015 at 19:14

schellmax

6,1634 gold badges43 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angular routing without changing location

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related