Search code examples
angularjswindows-store-appsmulti-device-hybrid-appsngroute

Windows 8 and href


I am trying to convert an AngularJS web app to a multi device app.

On the web application I used the ngRoute. Basically something like this

app.config(['$routeProvider',function ($routeProvider) {
$routeProvider
    .when('/Home',
          {
              controller: 'homeCtr',
              templateUrl: '/scripts/app/modules/home/home.html' 

          })

}]);

and in the index html page a simple href and the ngView like below:

<a ng-href="#/Home">Go to Home</a>
<div data-ng-view="">

</div>

If I run the application in Ripple for android it works like a charm, but on Windows or Windows ARM doesn't work at all! Seems it doesn't know how to interpret the # on the link.

How can I solve it?

Thanks!


Solution

  • I figured it out thanks to this post and this article as well!

    Basically the problem is that when the app is published as Win App, the href is rendered with a prefix like 'unsafe:ms-appx'.

    To let it works correctly, is enough just to add this config

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

    Also, keep in mind that when you configure a templateUrl on $routeProvider, you cannot start your url with "/" if you want to that the application works fine in Windows too (I used to set my template url like "/app/views/myView.html" to be sure that the path starts from root, but this approach seems not working for windows app).

    Thanks!