Want more updates, tutorials, and awesomeness in general? Sign up!

Building Windows 8 Applications with AngularJS aka Oh Yes I Did!

blank

I am a huge fan of HTML5 and JavaScript because they run on just about anything. I remember when web applications were in their infancy and the golden promise was that you could make a web application feel just like a desktop application – in a browser! Now we have come full circle into this weird parallel universe where we are putting web applications INTO desktop applications. It is heady and high times my friend!

Backstory

Aside from my JavaScript interests, I spend a lot of time doing events for the community. My partner in crime Aaron Murray @WeAreFractal and I are putting on an event called The JavaScript Taste Test with Microsoft where we will be exploring what you can actually do with HTML5 and JavaScript.

I was personally intrigued if I could write a Windows 8 application in JUST HTML5 and JavaScript. Could I do it on a Mac? Would it be hard? Would THIS happen to me?

Lost Ark

Well I am going to just spare you the agony of wondering if I am even alive right now. It was pretty painless and felt pretty much like writing a web application. I kept my eyes closed the entire time! +1 if you get the joke.

Part Zero: The Source Files

You can download my project here if you want to follow along.

Part One: Testing the Waters

Microsoft has done a good job lately of making helpful tools available for the development community free of charge.

If you do not have a copy of Windows, you can download a VM image from http://www.modern.ie/en-us to get started.

The most economical choice is to use the VirtualBox image since VirtualBox is free of charge. I have a lot of friends that swear by VirtualBox and I take their word for it. I use Parallels and so I downloaded the VMWare Fusion image and just converted it. Took me all of about 40 minutes to download and get up and running. Bam!

From the VM, I downloaded Visual Studio Express for Windows 8 from http://www.microsoft.com/visualstudio/eng/products/visual-studio-express-for-windows-8.

So, at this point, I was still pretty skeptical, so I figured the obligatory “Hello World” was in order, which I found here.

This took all of about 20 minutes to do and, so now I have about a 2 hour investment into the process. Not too bad!

Part Two: So About That AngularJS?

So now my curiosity is totally piqued. Can it be done man!?

Step 1: Create a New Project

So first things first, we need to create a new project. Ctrl + shift + n and you are on your way!

I left all the defaults as is and called the project HelloAngular. You can see my settings in the image below.

HelloAngular Step One

Step 2: Import AngularJS

Windows 8 applications require that all your scripts run local for security reasons and so I downloaded the latest angular.min.js and dropped it into the js folder of the project.

Step 3: Include AngularJS and Roll Dice

So I wanted to see if I could just bootstrap an AngularJS application and so I referenced the script and added ng-app to the html tag of the default.html file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html ng-app>
<head>
    <meta charset="utf-8" />
    <title>Hello AngularJS!</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- HelloAngular references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/angular.min.js"></script>
    <script src="/js/default.js"></script>
</head>

Oh noes!

Oh Noes!

“JavaScript runtime error: Unable to add dynamic content.”

Step 4: A Little Help From My Friends

To the Googles! A little poking around and I found that I was not the first one to experience this. A gentleman by the name of Jonathan Channon shed all the light I needed on this conundrum. You can read his post here.

Enter JavaScript juggernaut Elijah Manor @elijahmanor and his breakdancing crew with a custom version of jQuery. WINDOWS 8 STYLE!

Oh appendTo… I love you!

The moral of the story is to use jquery-win8 from here

Add the file to the js folder.

Hello Angular Step Two

Include the script and make one small tweak as you can see below. Friction removed!

1
2
3
4
5
6
7
    <link href="/css/default.css" rel="stylesheet" />
    <script src="js/jquery-1.8.2-win8-1.0.min.js"></script>
    <script type="text/javascript">
        jQuery.isUnsafe = true;
    </script>    
    <script src="/js/angular.min.js"></script>
    <script src="/js/default.js"></script>

Behold the choir of angels! It works!

Step 5: Build Something!

I am not going to delve too much into the AngularJS application I built since it is super 101 level stuff, but here is the basic rundown.

In the js folder, open default.js and jump right to the bottom of the file. Just above the app.start(); function call is where I decided to craft my AngularJS app.

First, I define my AngularJS module, and then I define a MainCtrl on that module to hold my data and methods for the application.

1
2
3
4
5
6
    // AngularJS Stuff
    var myApp = angular.module('app', []);

    myApp.controller('MainCtrl', function ($scope) {
        $scope.greeting = 'Hello AngularJS!';
    });

Now that I have a defined module, I am going to bootstrap the AngularJS application to use that module. That is as simple as updating ng-app to ng-app=”app” in the html tag.

1
<html ng-app="app">

Now I want to give the reins to MainCtrl to do its thing. I do this by using the AngularJS ng-controller directive with a value of MainCtrl. This essentially sets up the relationship between $scope and the HTML. Notice that I created a greeting property on $scope when I defined the controller. I can bind to that in the HTML using the doubly curly brace syntax a la {{greeting}}.

Side note: Directives are an entirely different conversation for another day, but for now think of them as “html elements with super powers”.

1
2
3
<body ng-controller="MainCtrl">
    <h1>{{greeting}}</h1>
</body>

Moving along…I am going to add a messages array to hold well…messages. Self documenting code FTW! And I am going to create a method called addMessage that adds a message to the front of the array via unshift. By adding these methods and properties to the $scope object, I am making them available to the elements that exist within the HTML element that we defined the controller on. You will notice that I am also setting a message property to an empty string. More on that in just a moment.

1
2
3
4
5
6
7
8
9
10
    var myApp = angular.module('app', []);

    myApp.controller('MainCtrl', function ($scope) {
        $scope.greeting = 'Hello AngularJS!';
        $scope.messages = [];
        $scope.addMessage = function (m) {
            $scope.messages.unshift(m);
            $scope.message = '';
        }
    });

To the HTML! Let’s start with the messages. I want to display all the messages that exist and so I do that with ng-repeat. ng-repeat is an AngularJS directive that essentially loops over an array and stamps out whatever element it is defined on. So in this case we are saying “Create a new p tag with the value of m for every message that exists in messages“. From there we are back to the curly braces for the binding.

And to add a message, we first declare ng-model=”message” on the messageInput element. This essentially sets up two-way binding with $scope from the HTML side. We are going to call addMessage by adding ng-click=”addMessage(message)” to the messageButton. The ng-click directive takes all of that messy event listening handlers and takes care of the biz for you. We are passing it the message value which is essentially whatever is in the messageInput field thanks to ng-model.

1
2
3
4
5
6
7
8
9
<body ng-controller="MainCtrl">
    <h1>{{greeting}}</h1>
    <p>Leave a message.</p>
    <input id="messageInput" ng-model="message" type="text" />
    <button id="messageButton" ng-click="addMessage(message)">Say "Hello"</button>
    <div id="greetingOutput">
        <p ng-repeat="m in messages">{{m}}</p>
    </div>
</body>

And that my friends is how I did it! Behold!

Angular Metro

Conclusion

I could have definitely dug into the AngularJS side a bit more, but I wanted to highlight how easy it was to get up and running, even for a guy on a Mac running Windows in a VM. It was really just HTML5 and JavaScript! Hooray!

AngularJS
http://angularjs.org/

Modern.ie
http://www.modern.ie/en-us/

VirtualBox
https://www.virtualbox.org/

jQuery for Windows 8 Store Applications
https://github.com/appendto/jquery-win8

Create your first Windows Store app using JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

Leave a Comment