From AngularJS Seed to Cordova Android Camera!

One of my recent holy grails has been to figure out how to get from an AngularJS Seed template to a functioning Cordova app that makes use of the camera on the Android device. And I figured it out, though it took me a day to do so. Not only is this useful for getting the camera to work. The principles you learn along the way should give you the basics for getting you access to all the Android device tools made available via the other Cordova plugins, e.g., "Acceleromatter", "Contacts", and "Geolocation". 

There are many resources to help you get to the end point, though all of them are incomplete in one way or another and get you part of the way on your journey. My aim is to get you all the way to the end, from the very beginning, in this blog entry.

But first, let's look at all the stepping stones I used and give credit where credit is due. Setting up USB debugging for your Android device is important if you, like me, don't want to use Android emulators anymore, since working directly with the Android device is more real and also faster, and you're on Windows. So you need to install the USB driver, assuming you've plugged your Android device into your laptop via a USB cable. Once you're set up and ready to do some coding, the most useful document, providing all the code you actually need is the 1st answer, by asgoth, in How to integrate Phonegap Camera with AngularJS. The solution is based on creating an AngularJS Directive, which is well explained in Build custom directives with AngularJS. You'll come across problems in the early hours of figuring things out and you're going to be happy to have a simple working example, which is what is. Doesn't get you the AngularJS piece of the puzzle, but gets you a working camera on Android via Cordova. And when you're troubleshooting, this and this stackoverflow item could be helpful. 

Now let's actually get started and go from the very beginning to the very end.

  1. In NetBeans IDE, go to File | New Project and then choose HTML5 | HTML5 Application. Click Next. Give the application a name, such as 'AwesomeCamera':

    Click Next.

  2. Choose the AngularJS Seed template:

    Click Finish. After a few moments, during which the template is downloaded from its Git repo and unzipped, you should see this in the Projects window, i.e., the logical view of your AngularJS Seed template:

    In the Files window, you see the complete view, i.e., everything on disk that constitutes your AngularJS Seed template:

  3. Now, assuming that you have already set up Cordova (which I describe how to do in this YouTube movie), you can proceed to let NetBeans IDE add Cordova content to the AngularJS Seed application. Go to the Project Properties dialog of the AwesomeCamera application (right-click it and choose Properties) and then the Cordova tab should show the following:

    (If you don't see the above, you have a fun journey ahead of you in setting up Cordova.) Once you see the above, click the button and wait for the call to the Cordova executable to complete, at which point you will have a Cordova application. What that means you'll see in a few steps below. Now don't forget to switch to the Plugins tab, choose "Camera", and click it to the right of the pane:

    Notice that if you haven't set up the Android SDK yet, the "Mobile Platform Setup" button above gives you an opportunity to do so. Now click OK everywhere to exit the Project Properties dialog. 

  4. In the NetBeans IDE toolbar, use the drop-down to specify you'd like to deploy via Cordova to the Android device that is attached to your laptop via a USB cable:

    Alternatively, you can set the above per-project, in the Run tab of the Project Properties dialog for the AwesomeCamera application.

  5. Now right-click the AwesomeCamera application and choose Build. Since you've set "Cordova (Android Device)" in the previous step, Cordova will build an Android APK package for you. While the build takes place, open the Output window (Ctrl-4) to see the long list of Cordova outputs in the IDE.

    At the end of the process, you'll see no difference in the Projects window, i.e., in the logical view. Switch to the Files window and you'll see that your application has been transformed into a Cordova application. In particular, notice these folders:

    Notice there's a "plugins" folder, containing the downloaded Camera plugin, i.e., during the build process the Git repo was found where the Camera plugin is stored. From there, the Camera plugin was put into the folder you see above. Also notice there's a "platforms" folder which, since we're creating an application for Android, only has content for Android. In particular, notice the "bin" folder and the "gen" folder, which are created whenever you build the project. The Android APK file is created in the "bin" folder. When you invoke the clean command on the project (i.e., right-click the project and choose Clean), the "bin" and "gen" folder will be removed. In other words, these two folders are created from all the other artifacts in the "platforms" and "plugins" folders, which in turn have been defined via the files and settings you define in your AwesomeCamera project.

  6. An interesting thing to note in the above screenshot is that in the "platform/android/assets/www" folder is a file named "cordova.js". That file, very important, provides the entry point to all the Cordova features, including the camera on the Android device. Hence, we need to make sure that we reference that file in our index.html file. Therefore, switch back to the Projects window. (Remember to do all your work in the Projects window because anything in the Files window could/will be overwritten by build commands via Cordova.) Right at the end, before the closing body tag, add this:
    <script src="cordova.js"></script>

    Build the project again and now notice that the index.html file in the "platform/android/assets/www" folder correctly references the cordova.js file. Note there's no need to reference the "cordova_plugins.js" file in your index.html, because that file is referenced in the "cordova.js" file.

    I believe that NetBeans IDE should take this step for you:

  7. Now we'll use all the code referenced above, i.e., in How to integrate Phonegap Camera with AngularJS, plus a tiny little bit of my own. Switch to the Projects window and then we'll create a directive, a controller, and some HTML:

    In "js/directives.js", remove everything and replace it with this:

    'use strict';
    var app = angular.module('myApp.directives', []);
    app.directive('camera', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                elm.on('click', function() {
                        function(imageURI) {
                            scope.$apply(function() {
                        function(err) {
                            ctrl.$setValidity('error', false);
                        }, {quality: 50, 
                            destinationType: Camera.DestinationType.FILE_URI});

    In "js/contollers.js", remove everything and replace it with this:

    'use strict';
    angular.module('myApp.controllers', []).
            controller('MyCtrl1', function($scope) {
                $scope.myPictures = [];
                $scope.$watch('myPicture', function(value) {
                    if (value) {
                }, true);

    In "partials/partial1.html", remove everything and replace it with this:

    <button camera ng-model='myPicture'>Take Picture</button>
    <ul ng-repeat="onepic in myPictures">
        <li style="list-style: none">
            <input type="image" 

    Note that the "'use strict';" statements were already in the AngularJS Seed files above, so I've just kept them there.

  8. Run the application. Sure, you can deploy the application to the Android device directly from NetBeans IDE. Since you set "(Cordova) Android Device" above, whenever you right-click the project and choose Run, the IDE will deploy the application to the Android device. Once it is deployed to the Android device, you'll simply see a button with the text "Take Picture". Click it. The camera starts up. Take a picture. Save the picture. The picture will then be added as a new image in a list in the view defined via the HTML shown above.

Hurray you have an application created in HTML and JavaScript that accesses a camera on Android. That's pretty cool, no native code needed to be provided at all, only HTML and JavaScript, which Cordova converted to native code for you.


Hi Geertjan,

I'm unable to find the Angular JS Template which says ZIP file is empty.
Found out a bug entry, but don't know if it's related to it. Can you please guide me?


Posted by Santosh on November 29, 2013 at 09:22 AM PST #

"I'm unable to find the Angular JS Template which says ZIP file is empty."

What does that sentence mean? It's impossible to understand. Download NetBeans IDE 7.4 and you'll be fine.

Posted by Geertjan on November 29, 2013 at 09:38 AM PST #

Actually, the Step 2 of this tutorial "Choose the AngularJS Seed template" when I choose the template, I was getting an error that either the template's ZIP file is empty or download has failed.

But, now it is working after I installed the NB 7.4 nightly Dev 201311290002.

Posted by Santosh on November 29, 2013 at 10:19 AM PST #

You can do it with the 2nd option : "Select template", and fill the template input with "".

Release candidate RC2, same problem, solution above worked for me

Posted by Mabdylon on December 18, 2013 at 03:28 PM PST #

HI Geer,
Thanks for this nice tutorial.I had one issue..i just deploy your code.I am using phonegap angularjs..Everything works fine.after click the button i take the image but it is not displaying in the list..can you help me.


Posted by yuvaraj on February 04, 2014 at 08:38 PM PST #


I got the same issue :(

Posted by guest on April 07, 2014 at 02:44 AM PDT #

Impossible to help, isn't it, unless you provide the complete application in a ZIP file or GitHub or somewhere? Or must I guess what is going wrong?

Posted by Geertjan on April 07, 2014 at 04:21 AM PDT #

Hey Geertjan,

thanks for the tutorial. I got one little problem. When i run the applikation and click on the "Take Picture"-button, i get the following error:
Failed to load resource (09:01:02:072 | error, network)
at file:///android_asset/www/bower_components/html5-boilerplate/css/normalize.css
Failed to load resource (09:01:02:155 | error, network)
at file:///android_asset/www/bower_components/html5-boilerplate/css/main.css
Uncaught ReferenceError: angular is not defined (09:01:02:253 | error, javascript)
at (anonymous function) (www/js/app.js:5:1)
Uncaught ReferenceError: angular is not defined (09:01:02:301 | error, javascript)
at (anonymous function) (www/js/services.js:8:1)
Uncaught ReferenceError: angular is not defined (09:01:02:339 | error, javascript)
at (anonymous function) (www/js/controllers.js:2:1)
Uncaught ReferenceError: angular is not defined (09:01:02:377 | error, javascript)
at (anonymous function) (www/js/filters.js:5:1)
Uncaught ReferenceError: angular is not defined (09:01:02:426 | error, javascript)
at (anonymous function) (www/js/directives.js:2:11)
Failed to load resource (09:01:02:866 | error, network)
at file:///android_asset/www/bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js
Couldnt find any solution, maybe you got a clue what i've done wrong...
Regards Markus

Posted by guest on August 04, 2014 at 12:08 AM PDT #

The error messages are very clear. You haven't installed Angular and HTML5 Boilerplate in your application. Run 'nbm install' and find out what that means. Also read this:

Posted by Geertjan on August 04, 2014 at 12:14 AM PDT #

Thanks for your fast answere Geertjan.
As you said, i installed angular and boilerplate.
The Problem is, that if i run this application on an emulator and i press the button, nothing happens.
So i tested it on my HTCOne and there it throws the same error as above.
I compiled it new and added a permission for the camera in the androidManifest...
Furthermore I checked if everything is correct installed.
Regards Markus

Posted by Markus on August 04, 2014 at 01:49 AM PDT #

No, as I said, you have not installed Angular and Boilerplate. That's what your error messages tell you.

Posted by Geertjan on August 04, 2014 at 02:35 AM PDT #


I have installed latest version of Netbeans i.e 8.0 and trying to configure "Cordova" following below steps but for some unknown reason "Netbeans" is unable to locate "Cordova" and always popup message to install "Cordova" when I am trying to create a "Cordova" based application.

Steps that I have followed are as below.

1. Install Nodejs.

2. Installed cordova using below command and also add "C:\Users\vik----\AppData\Roaming\npm\node_modules\cordova\bin" in environment variable path.

#npm install -g cordova

3. Verify "Cordova" installation

#cordova -version

I guess above steps confirm that Cordova gets install properly.

Appreciate if you can help on this .Is there any way I can let "Netbeans" about "cordova" location using some manual entry/configuration.

One thing to share with you is that I did not install "Github" client.I guess it have nothing to do with cordova. Correct me if I am wrong on this assumption.


Posted by guest on August 14, 2014 at 06:22 AM PDT #

Instead of your own steps, follow the steps in the official tutorial:

Posted by Geertjan on August 14, 2014 at 07:39 AM PDT #

Post a Comment:
  • HTML Syntax: NOT allowed

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« July 2016