/ winjs

Using external libraries/frameworks (like Angular) with WinJS

The biggest advantage of using WinJS to build Windows Store and Windows Phone apps is the ability to reuse all we know and love about the web including the awesome open source libraries and frameworks. WinJS adds a layer of security on certain functions that manipulate the DOM. You can read more about it here. You usually find out about this by hitting the error: Unable to add dynamic content.

error.png

In AngularJS, the developer community has communicated a number of ways to mitigate this.

  • Changing the source code to wrap the offending lines with the execUnsafeLocalFunction. Yuck! This is the worst approach since it makes upgrading to the latest version more complex than it should be.

  • Replacing Angular's jqLite with jQuery 2.x, which already addresses this issue. This seems like overkill to me. jqLite is often all I need when using Angular.

  • Using the ngCsp directive on the html element: <html ng-csp>. I had some success with this approach for a time, but at one point it stopped working and rather than troubleshooting what I did to break it, I moved on to the approach I recommend in this post. Which is ...

jscompat.png

The Microsoft OpenTech team has released the winstore-jscompat script on GitHub and this has worked flawlessly for me. You simply place it as the very first script in your pages and forget about it.

<!DOCTYPE html>
<html data-ng-app=\"app\">
<head>
    <meta charset=\"utf-8\" />
    <!-- Mitigate dynamic content security issue -->
    <!-- See https://github.com/MSOpenTech/winstore-jscompat for more information -->
    <script src=\"/vendor/winstore-jscompat.js\"></script>
...

They report a minor performance hit, but I haven't noticed it.

Don Smith

Don Smith

Progressive. Global citizen. Seeker of balance and harmony. Patient. Intolerant of suffering, greed and exploitation. Educator. Imperfect. Forgiving. Software developer. Vulnerable. Loves people.

Read More