How to Deploy and Debug AngularJS on the Android Device
By Geertjan on Nov 21, 2013
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.
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.