AngularJS, Cordova, Windows Phone Quirk

Posted Thursday March 27, 2014 at 8:59:48 am in Development

If you are writing cross platform apps for iOS and Android using Cordova (formerly PhoneGap) it might behoove you to also port it to Windows Phone. It also might behoove you to use AngularJS, a JavaScript framework toolkit for developing single page applications. But there can be quirks...and this article identifies one of them.

This is pretty simple, really. When firing up one of the examples out there using Cordova and AngularJS and porting it over to run on Windows Phone 8 I ran into a goofy "bug" in which whenever I clicked on an ion-item with an href set, I'd get a popup notifying me to "search for app in the store". This was rather particular considering this app didn't have any extraordinary dependencies. So I had to dig a bit deeper.

I noticed other areas in the app were using ion-tab with an href, in particular the bottom tabbed navigation. I compared the two href's and noticed something that might have been causing issues:

ion-tab href: #/tab/pets

ion-item href: #/tab/pet/{{pet.id}}

You should notice immediately that one (list item) was utilizing a variable value from a template, whereas the other isn't (tab item).

OK, well this narrowed things down a little bit. But I still wasn't sure what was happening given that the URL patterns were nearly identical. 

After a little bit of debugging, I noticed that it didn't actually have to do with the difference between ion-tab or ion-item...but rather how the items are rendered from AngularJS. In particular, the ion-item is converted into a div with an anchor inside of it. And then I noticed something peculiar. FWIW, it can be explained better on Stack Overflow here: AngularJS and Windows 8 route error.

That article is talking about Windows 8 apps and not Windows Phone 8 apps, but the basic problem is still common between the two. Microsoft is adding the ms-appx prefix.  And since AngularJS doesn't recognize that prefix, it will prepend another prefix called unsafe to the href. What results is something like this:

href: unsafe:ms-appx:.....

To read a little more on someone with similar issues (albeit through Chrome) click the following link:

Angular changes URLs to "unsafe"

To solve this issue, we need to notify AngularJS that links with an ms-appx prefix are a-okay by us. Luckily AngularJS supports this functionality. But how it supports it varies across AngularJS versions. 

AngularJS 1.2+: $compileProvider.aHrefSanitizationWhitelist

AngularJS <1.2: $compileProvider.urlSanitizationWhitelist

The best place to put this code is inside your app.js file. The code I'm using on Windows Phone is as follows:

.config( [
    '$compileProvider',
    function( $compileProvider )
    {   
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|x-wmapp0):/);
        // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
    }
]);

What's important to note through this adventure is that this isn't just a Windows Phone issue. Other environments can prepend certain prefixes. You'll need to accommodate as such for them.

Happy coding!

The opinions expressed herein are my own personal opinions and do not represent my employer’s view