How to do navigation in a chrome packaged app using angular.js?

Question

I'm experimenting with chrome packaged apps, my first screen has a list of items, when i click on an item, a detail page should be visible.

I a normal web app you just do:

<a href="#/detail/{{item.name}}">{{item.name}}</a>

But in a packaged app i get the following error:

Can't open same-window link to "unsafe:chrome-extension://fsdjiojkljkljdfijkjkijkjkjijikf/index.html#/detail/blablabla"; try target="_blank".

So how do i do some kind of navigation in a chrome packaged app?

Thanks

I was able to make this work by following answer to this question: http://stackoverflow.com/questions/15606751/angular-changes-urls-to-unsafe-in-extension-page — romario333, Dec 30 '13 at 09:11

score 3 · Answer 1 · edited May 23 '17 at 12:32

As pointed by @romario333, see https://stackoverflow.com/a/15769779/122441 :

You need to explicitly add URL protocols to Angular's whitelist using a regular expression. Only http, https, ftp and mailto are enabled by default. Angular will prefix a non-whitelisted URL with unsafe: when using a protocol such as chrome-extension:.

A good place to whitelist the chrome-extension: protocol would be in your module's config block:

var app = angular.module( 'myApp', [] )
.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

The same procedure also applies when you need to use protocols such as file: and tel:.

Please see the AngularJS $compileProvider API documentation for more info.

score 2 · Answer 2 · answered Jan 07 '14 at 21:48

Navigation in chrome packaged apps is disabled for aesthetic UI reasons (page navigations don't "feel" like an app). See http://developer.chrome.com/apps/app_deprecated.html.

Here are some alternatives to doing navigation:

-Open a new app window

-Manipulate the DOM of the current window

-Use an iframe, sandboxed iframe, or webview tag. See http://developer.chrome.com/apps/app_external.html for some documentation.

-Use html fragment identifiers/links (I believe these still work even though navigation doesn't, but am not positive)

Actually, it looks like URL fragments via `window.location.hash` doesn't work consistently in packaged apps: https://code.google.com/p/chromium/issues/detail?id=57162 — bergie, Mar 04 '14 at 20:05

How to do navigation in a chrome packaged app using angular.js?

2 Answers2