Here's a short tutorial on how to make Durandal, PhoneGap and Windows Phone 8 work together:

Download and install PhoneGap’s Visual Studio 2012 template

Start by downloading PhoneGap. At the time of writing this, the latest version is 2.7.0. From inside the zip, copy CordovaWP8_2_7_0.zip(in folder lib/windows-phone-8)to Documents/Visual Studio 2012/Templates/ProjectTemplates:

image

Create a new Windows Phone 8 app using the template

Next step is to create the actual Windows Phone 8 app. For that, use the new Cordova-template:

image

Clone the Durandal and add it to the app

Next step is to get Durandal. After cloning the project, copy App, Content and Scriptsfolders into the app’s www-folder:

image

Now we just need to modify the PhoneGap’s Index.html so that it uses Durandal.

Create the Index.html for Durandal

Open the index.html and replace the content with this:

<!DOCTYPE html>
<html>
<head>
    <title>Durandal</title>

    <link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-landscape.png" media="(orientation:landscape)" />
    <link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-portrait.png" media="(orientation:portrait)" />
    <link rel="apple-touch-icon" href="Content/images/icon.png" />

    <!--Durandal does not require Bootstrap or Font Awesome. 
            They are used to make the samples look nice.-->
    <link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="Content/bootstrap-responsive.min.css" type="text/css" />
    <link rel="stylesheet" href="Content/font-awesome.min.css" type="text/css" />

    <!--The css in this file makes the modal dialogs work right.-->
    <link rel="stylesheet" href="Content/durandal.css" type="text/css" />

    <!--Css specific to the samples.-->
    <link rel="stylesheet" href="Content/app.css" type="text/css" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />

    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="cordova-2.7.0.js"></script>
</head>
<body>
    <div id="applicationHost"></div>

    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
    <script type="text/javascript" src="Scripts/sammy-0.7.4.js"></script>
    <script type="text/javascript" src="app/durandal/amd/require.js" data-main="app/main"></script>
</body>
</html>

In theory, that should be it. But if you run the app, you’ll notice that everything is not working correctly:

image

The source of problem can be found from Visual Studio’s output window:

image

So it cannot find the shell.html, even though it’s where it should be:

image

“Fix” the PhoneGap

The PhoneGap Visual Studio 2012 template includes the PhoneGap’s source code, which is great. If you now open the Plugins/File.cs and set a breakpoint to readResourceAsText-method, you’ll see what’s causing the problem:

image

PhoneGap tries to read the file from a wrong folder!The folder is missing the www-part.

Now make a little tweak to the code:

                pathToResource = "www/" + pathToResource;
                var resource = Application.GetResourceStream(new Uri(pathToResource, UriKind.Relative));

And then run the app again and here it is! Durandal running in a PhoneGap based Windows Phone app:

image

Source Code

I created a repository for this sample on GitHub. It’s available from here.

Comments

Comment by Anton

Thank you very much

Anton
Comment by Bradley Hopkinson

Hi, we are experiencing an issue when trying to use PhoneGap, and Durandal on Windows Phone 8. The application appears to work successfully when used in the emulator, or when deployed via Visual Studio. However when deployed the .xap using the Application Deployment tool, the app displays a blank screen. We have posted this on SO: stackoverflow.com/.../phonegap-2-9-0-windows-phone-8-durandal-2-0-xap-runtime-issue


Any help you could give would be much appreciated.

Bradley Hopkinson
Comment by Mikael Koskinen

Hi Bradley,


Unfortunately I don't have solution for this :( I've only played with the PhoneGap & Durandal combination a little and I don't remember encountering the issue you mention.


When you deploy the app using Application Deployment Tool, are you deploying a release version of the app? Or the same debug version as you deploy using Visual Studio? Have you tried to deploy & debug the release version of the app using Visual Studio?


Best regards,
Mikael

Comment by Bradley Hopkinson

Thanks for your reply. After much sweat, and at times nearly tears, we managed to determine that it was the folder structure of the application causing issues for require.js. We are unsure why this would only affect WP8 in release mode, and not any other platform or when the phone was connected to Visual Studio.
We originally structured the application to remove the app folder from the Durandal starter kit. Ie. main.js, views and viewmodels were in the root www directory. When we added the app folder back the application works on all devices without issue.

Bradley Hopkinson
Comment by Mikael Koskinen

Excellent, great to hear you got it working!

Comment by shrawan zadoo

hey !! thanks a lot ! it worked for me !

i added "www/" only if the original getResource returned null and set the UrlKind to relative or absolute

shrawan zadoo
Comment by msantoli

We are experiencing the same issue with a Cordova/Angular/RequireJS application.
Can you give some more hints on how you solved this problem, we are definitely in 'tears'


Thanks
Massimo

msantoli