Tuesday, 18 June 2013
3 comments

Getting Started with AngularJS in a Windows 8 JavaScript app

Tuesday, 18 June 2013 23:55

In the past few weeks, I’ve started tinkering with AngularJS, trying to get it to play nicely within the Windows 8 JavaScript application environment. This blog entry is an attempt to document that journey.

I was following Dan Wahlin’s Video Tutorial: AngularJS Fundamentals in 60-ish Minutes, and adapting the exercises to a Windows Store JavaScript app.  First hurdle: right after starting a simple “hello, angular world!” message in default.htm, and hitting F5 in Visual Studio 2012, I immediately got this error as Angular tries to insert its own attributes into the HTML header tag:

image

Unhandled exception at line 123, column 117 in ms-appx://1af1a67e-6a0b-4170-87a7-60f0e4ca3bc2/Scripts/angular.min.js

0x800c001c - JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement.  For more information, see …

After some digging around the web, I learned that this is a fairly common problem that people run into when using an external JavaScript framework other than the WinJS core library.

Found blog entries by Jonathan Channon and Lukas Ruebbelke who wrote about a solution which used jquery-win8, which was based on jquery-1.8.2 and has been discontinued, apparently because someone claimed that JQuery 2.0 is now compatible with Win8 (?). However, my “hello world” app uses jQuery 2.0.2 with Angular 1.1.7 and it still has the problem.

So the problem is not so much in Angular, but rather in JQuery, and this net.tuts+ article explains why: Building Windows Store Applications With jQuery 2.0.

David Müller of Incloud wrote some helpful step-by-step instruction on how to hack the jQuery source to make it Windows 8 ready: Windows 8 – Using jQuery for app development, which involves judiciously wrapping  DOM manipulation functions around MSApp.execUnsafeLocalFunction() calls. And that’s sort of the basis that allowed me to get my sample app to work. Here is a diff snapshot of the mods I’ve made:

image

For what it’s worth, I’ve posted the source code on my GitHub repository. I suspect that as I build out more functionality into my application, there will be more places which need execUnsafeLocalFunction(). We shall see.

A couple of issues/concerns arose which will have to be investigated in a follow-up exercise. First, I’m not very happy about having to perform surgery on jQuery and would have preferred a more OO (non-invasive) approach. Secondly, I’m  uncomfortable about having to add MSApp.execUnsafeLocalFunction() wrappers around the relevant DOM manipulation methods. Could this potentially make my app vulnerable to script injection attacks? More to come later…

3 comments :

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. The effectiveness of IEEE Project Domains depends very much on the situation in which they are applied. In order to further improve IEEE Final Year Project Domains practices we need to explicitly describe and utilise our knowledge about software domains of software engineering Final Year Project Domains for CSE technologies. This paper suggests a modelling formalism for supporting systematic reuse of software engineering technologies during planning of software projects and improvement programmes in Final Year Projects for CSE.

      Software management seeks for decision support to identify technologies like JavaScript that meet best the goals and characteristics of a software project or improvement programme. JavaScript Training in Chennai Accessible experiences and repositories that effectively guide that technology selection are still lacking.

      Aim of technology domain analysis is to describe the class of context situations (e.g., kinds of JavaScript software projects) in which a software engineering technology JavaScript Training in Chennai can be applied successfully

      The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training

      Delete

 
Toggle Footer
Top