Posted on Feb 17th 2015

Update: Development of GapDebug has been discontinued. Read the End of Life Notice for more information.

By Srivatsan Sundararajan - MyEclipse QA Manager 

In this article, I will show you how to use MyEclipse 2015 to create a very simple PhoneGap mobile app that uses AngularJS UI. I'll be using the following technologies:

  • PhoneGap 3.6.3
  • AngularJS
  • MyEclipse 2015

MyEclipse is bundled with the PhoneGap 3.6.3 runtime so creation, build, and preview of mobile apps is pretty simple. If you want to use or have installed a different version of PhoneGap, you can configure a custom runtime with that version and use it for creating and building projects. Please read the PhoneGap Mobile Development Guide for more details.

1. Create a PhoneGap Project

  1. In MyEclipse, invoke the PhoneGap project wizard from the File menu.
  2. Provide a name, and click Next.
  3. Because we are going to use AngularJS for the front end, let's select the 'Blank Template'.
  4. Click Next, select the following plugins from the list, and click Finish.
    - Device
    - Notification
    - GeoLocation
    - Vibration

MyEclipse creates the project, copies the icons to the respective folders, performs the configuration in config.xml file, and copies the plugin folders in to the project automatically.

Plugins can also be added/removed later using the Add/Remove Plugins wizard found on the context menu of the project as well as in the Plugins section of the config.xml editor.

Cordova pluginsIncluded plugins

2. Install the AngularJS Module

  1. To enable AngulaJS coding support, right-click the project, and select MyEclipse>JavaScript Modules>Install AngularJS support.
  2. To enable AngularJS references in HTML pages, add the following script tag in the index.html file <head> tag.

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

  3. Remove the default reference to index.js.

Since most of the project configuration and setup is done automatically by MyEclipse, let's jump right into coding.

3. Create the AngularJS Controller

In this application, we will invoke a simple function from each of the four plugins added earlier. Perform the following steps to create the controller:

  1. Define ng-app. Use the File>New>JavaScript Source File wizard to create a new JavaScript file named "myApp.js" inside the www/js folder. Paste the following code into the file:

    var myApp = angular.module('myApp', []);

  2. Define ng-controller. Create another JavaScript file in the same folder and name it “controller.js”. Paste the following code into the file:

    myApp.controller("controller", function($scope) {});

4. Add Code to the Controller

Inside the controller, let's write small snippets that invoke functions from each PhoneGap plugin added to the project. The end result in the js/controller.js file looks like this:

AngularJS UI controller codeFinal controller file

Notification Plugin
navigator.notification.beep(1);

Vibration Plugin
navigator.notification.vibrate(1000);

Device Plugin
var deviceInfo = ('Device Platform: ' + device.platform + '\n'
   + 'Device Version: ' + device.version + '\n' + 'Device Model: '
    + device.model + '\n' + 'Device UUID: ' + device.uuid + '\n');
navigator.notification.alert(deviceInfo);

GeoLocation Plugin
var onSuccess = function(position) {
alert('Latitude: ' + position.coords.latitude + '\n'
    + 'Longitude: ' + position.coords.longitude + '\n'
    + 'Altitude: ' + position.coords.altitude + '\n'
    + 'Accuracy: ' + position.coords.accuracy + '\n'
    + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy
    + '\n' + 'Heading: ' + position.coords.heading + '\n'
    + 'Timestamp: ' + position.timestamp + '\n'); };
navigator.geolocation.getCurrentPosition(onSuccess);

5. Modify the Home Page

Open index.html, and create your AngularJS UI. The final result looks like this:

AngularJS UI HTMLFinal index file

  1. Reference ng-app.

    <html ng-app="myApp">

  2. Reference JavaScript files. These should be listed after the references to angular.min.js

    <script type="text/javascript" src="cordova.js"></script>
    <script src="js/myApp.js"></script>
    <script src="js/controller.js"></script>

  3. Add button controls, and invoke from the controller.

    <p><button class="myButton" ng-click="alertDeviceInfo()">Device</button></p>
    <p>    <button class="myButton" ng-click="alertGeoLocation()">Location</button></p>
    <p>    <button class="myButton" ng-click="beepNotify()">Beep</button></p>
    <p><button class="myButton" ng-click="vibrateNotify()">Vibrate</button></p>

6. Preview in the Mobile Web Simulator

Before building the application, let's preview it in the Mobile Web Simulator. To do that, right-click the project, and choose Phonegap>Preview Application in Mobile Web Simulator. Select either iOS or Android mode. This launches the Mobile Web Simulator, and the application should look like below. Note the example shown includes CSS for button styling. If you like, you can add a CSS file with your own styling to the project.

Simulating the AngularJS UIViewing in the simulator

Click each button in the application to invoke and test the functions from the corresponding plugins.

Note that for the Beep function to work in the simulator, you need to include a beep.wav sound file in the www folder of your project.

Testing AngularJS UITesting the app

7. Build the PhoneGap Application

Once we have previewed the application, the next step is to build the application and get it ready for installation on the device. In this article, let's build the application in local mode for the Android platform. To do that:

  1. Configure Android SDK tools on the Window>Preferences>MyEclipse>Mobile Tools>PhoneGap Runtimes>Local Build preference page.
  2. Right-click the project, and choose Phonegap>Build PhoneGap Application. This launches the build wizard.

    AngularJS UI app PhoneGap buildBuild wizard

  3. Click Finish to initiate the build. Please note that MyEclipse does support a variety of signing profiles like PKCS, Private Key, KeyStore, JKS formats so its possible to build remote applications for both Android and iOS devices in both release and debug modes.

Upon completion of a build, the application file is automatically downloaded to your file system and stored in the bin folder of your project. Additionally, a notification appears letting you know the build completed.

AngularJS UI app build notificationBuild notification

Please read Setting Your Environment for PhoneGap Builds for more information on signing profiles, certificates and remote builds.

8. Install the Application on a Device

Installing and debugging the application on an actual device is made really easy with GapDebug. Check out the GapDebug features page to learn more.

Thats it! We created our first PhoneGap - AngularJS application with plugins, simulated behavior of the application on a device, and finally installed it on a device with a few clicks and some simple code snippets.

Screenshot of application on an actual device:

AngularJS UI app on device

For more detailed steps for building this sample app, see the corresponding tutorial. To import the sample from this post into MyEclipse 2015, download PGAngularNotificationApp.zip.

 

About the Author
Author Photo Srivatsan is the MyEclipse QA Manager and has been part of the MyEclipse Team for over seven years. By working in MyEclipse development and then moving to QA, Srivatsan has acquired a vast, unique perspective on all things MyEclipse.