Angular, Cordova, Windows 10

Fix unsafe:ms-appx-web issues in Angular and Cordova on Windows 10

During a recent stream over at LiveCoding.TV I ran into some issues with displaying an image in a Cordova app I’m building. This image was stored inside my appx package, but the Content Security Policy blocked it anyways. It turned out I needed to whitelist the ms-appx and ms-appx-web protocols. I modified the initialization of the Angular module to whitelist these protocols for images and hrefs as you can see in the example below: angular.module(‘app’, [‘ngRoute’], function ($compileProvider) { $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|ms-appx-web|ms-appx):|data:image\//); $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension|ms-appx-web|ms-appx):/); });

Angular, Windows Store apps, WinJs

Angular in a Windows Store app – Servicing

Today I’m adding an AngularJS service to the Windows Store project in Visual Studio. This service is making a call to an external webservice which returns some JSON data. This controller uses a promise to handle the call to the service and when it’s fulfilled the data is shown on the screen. You can find the code: https://github.com/sorskoot/AngularWinjsDemo

Angular, Windows Store apps

Angular in a Windows Store app

I was trying to use Angular JS in a Windows store app and had some issues with Angular being “unsafe”. Using Angular JS in a JavaScript Windows Store app turned out to be pretty easy. Here’s how to do it: First create a new app. Install Angular JS though NuGet. Add a scripts tag to your default.html. <script src=”Scripts/angular.js”></script> Running the app at this point will result in the following error: The trick to get around this error is to enable CSP (Content Security Policy) and the most convenient part is that Angular has a directive to set that. All…