Geertjan's Blog

  • November 21, 2013

How to Deploy and Debug AngularJS on the Android Device

Geertjan Wielenga
Product Manager

I bought a new Android, Android 4, Ice Cream Sandwich, just so that I can deploy AngularJS applications to the Chrome browser on an actual Android device (not an emulator) from NetBeans IDE and then debug and style the application on the device, i.e., not on the emulator but in the Chrome browser on Android itself!

Right-click a HTML/JS/CSS application in NetBeans IDE and run it, using the drop-down in the toolbar to specify that you'd like to deploy the application to the Chrome browser on the Android device connected via USB to your computer, with USB debugging switched on. Or use the Project Properties dialog to do so, per project. Wait a minute, is that all there is that I need to do? Yes. That's all you need to do. NetBeans IDE lets you deploy applications to the Chrome browser on Android, either the device or the emulator, with just one click. I must say that seeing your app on the Android device is a lot cooler than seeing it on the emulator, plus it is a lot faster as well, even faster than Genymotion.

Here you see the application deployed (of course, it is AngularJS, since I can't help but think that AngularJS is the future of HTML/JS/CSS, it is just SO awesome) to the device. You can see that because I am using Droid@Screen, which is now integrated as a new NetBeans plugin, which I know because I've been working on that, as can be seen (and downloaded) here, directly embedded in NetBeans IDE:

Droid@Screen (above embedded via a plugin into NetBeans IDE and below as a separate application) connects to the Android device and displays what it sees there, handy for when displaying stuff to a group (e.g., at a conference) what's on the device that I'm holding in my hand:

Again, note that above you're NOT seeing an emulator. Instead, you're seeing a 1:1 reflection of what I'm seeing on the Android device, i.e., the same actual device that has mass and presence in the physical universe, the one that I bought, in the real world.

And, in the screenshot above the one immediately above, you can see that the mouse is on a specific item in the Browser DOM window, rendered on the Android device, as shown in Droid@Screen. It is extremely cool that I can move the mouse up and down the DOM presented live in the IDE and then see the currently selected item in the IDE back on the Android device in my hand. I can also look at the application deployed on Android, adjust the colors (or anything else) in the IDE, and immediately see the change on Android because a save in the IDE prompts the IDE to refresh the browser on Android.

Next, above, what you can see is that I can step through my JavaScript, i.e., my AngularJS code, and see the rendering as it happens on Android, again by looking at Droid@Screen which is what you would see at a conference or in some kind of presentation to show what I'm seeing on an actual Android device, above.

Everything you see above you can do right now, today, for free, if you download and install NetBeans IDE 7.4.

All this and more will be shown in detail at DroidCon in Amsterdam next week. I will also be making a new YouTube movie about this all very soon.

Join the discussion

Comments ( 3 )
  • Ewald Thursday, November 21, 2013

    Geertjan, it's really great to see NetBeans embracing new technologies and making it easier for us to continue to use our favourite IDE, irrespective of where projects take us!

    Thank you for sharing all this with us, I learn so much from these blog posts and they are fun as well!

  • Nik Dow Friday, March 14, 2014

    I downloaded the Droid@screen nbm file and installed and activated it.

    Some dependencies a problem, so I installed NetBeans 7.4 and created my project again (after removing the netbeans metadata directory).

    I turned on USB debugging on my phone.

    Nothing happens - anything else I should do?

    BTW I'm developing using AngularJS and JQuery Mobile, target devices are smart-phones and tablets, pure HTML5 webapp. Testing on a HTC phone and a Samsung tablet (iOS, windows when I can get my hands on a device).

    Working fine on both Android devices until maybe got too large/complex and the phone now goes crazy, tablet still OK.

    Hoping Droid can give me some diagnostic insights into the phone's behaviour.

  • Nik Dow Saturday, March 15, 2014

    To try and get this running, I upgraded my NetBeans to 7.4, and installed Droid@Screen.

    Not sure if it's related but I'm getting a new error on NetBeans startup:

    Command not yet implemented: adbexepath

    Also I switched on USB debug mode on my Android.

    My project is PHP5.3, AngularJS and jQuery Mobile.

    I guessed that I should go to Project Properties and set up the Browser - I find there "Android Device (Default Browser)" and "Android... Chrome", and finally "Android Device (Chrome) with NetBeans Connector.

    I chose the latter, and on the Android device I searched for Netbeans connector for android chrome. It finds it in the Chrome Web Store, but tells me "your operating system is not supported just yet." Available Windows, Mac, Chrome OS and Linux. So I assume this connector is not needed with Droid@screen.

    In Netbeans I go to Debug -> debug project. I get "Android Platform is not configured. Configure?" answer OK.

    Android SDK Location is required. A link is offered to "Download Android SDK" which goes to http://developer.android.com/sdk/index.html

    Gave up installing this, took too long, ran out of disk space and wasn't sure if it was relevant.

    Am I heading in the right direction?

Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.