How to Add a Windows Phone 8 Live Tile Using AngularJS

Lately I’ve started up yet another pet project and wanted to start working with AngularJS. So far things have been great (another blog post to follow). One thing I like to do with my “web based apps” is use a well known trick for creating a windows phone live tile so I can pin them to my home screen.

Doing this same thing using AngularJS is amazingly simple and needs only a slight modification. Here’s how you do it.

Create the Tile

The first step is to create the tile image you want on your home screen. Typically you want this to be a 768×768 square PNG image with a transparent background, so that your theme’s color (or background in WP 8.1) can show through.

Add the Div

The next step is to create a div element at the bottom of your page (or home template) to display the live tile…

[gist a2068b6006d1caf8b45a]

You’ll notice here that we have the ng-show AngularJS directive in place. This simple element easily allows us to show and hide the screen with the tile. We update our controller to hide the div by default (your app and controller name can be whatever you like)…

[gist 867fafd1d26ec1fe3acd]

Trigger the Display

Finally, all we do is create a link, button, image, etc. with the ng-click directive to show/hide the tile…

[gist 5e1d4135a5d219778a29]

That’s all there is to it!

Why all the work?

You may be wondering why you have to go to all this trouble in the first place? The way Windows Phone 8 works is that when you pin a web page to your start screen, Internet Explorer takes a snapshot of the page and creates a tile image using that. It grabs roughtly the top 768 pixels of the page. By creating this special overlay div with the icon we want, we “trick” the phone into using this for our live tile. I’m sure there will be better supported options down the road, but for now, this works just fine with not too much work.
Hope this helps!

Published using Desk

What are your 10 bits on the matter? I want to know!

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s