Creating a PhoneGap Mobile App in MyEclipse with an AngularJS UI

You can use AngularJS when creating PhoneGap mobile apps to create UI elements. This tutorial shows you how to use MyEclipse 2015 create a simple mobile app that accesses various device functions. You will learn how to:

Create an app project and install the AngularJS module
Set up the AngularJS controller
Add code to access device functions
Add AngularJS button controls
Test and build the app

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

Note: Mobile development was removed in MyEclipse 2016. This tutorial only applies to MyEclipse 2015.

1. Create a Project and Install AngularJS

Create a PhoneGap App project using the blank template and selecting the following plugins:- Device
– Notification
– GeoLocation
– Vibration
Right-click the project, and select MyEclipse>JavaScript Modules>Install AngularJS support.
Double-click the project’s www/index.html file to open it in the editor.

Add the following script tag inside the <head> tag.

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

Remove the default script tag that references index.js.
Press CTRL+S to save the file.

2. Create the AngularJS Controller

Right-click the project, and select New>JavaScript Source File.
Select the js folder of your project, type myApp.js in the File name field, and click Finish.

Creating the ng-app definition file
Open the myApp.js file, paste the following code into the file, and save.
```
var myApp = angular.module('myApp', []);
```
Right-click the project, and select New>JavaScript Source File.
Select the js folder, type controller.js in the File name field, and click Finish.

Open the file, paste the following code, and save.

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

3. Add Code to the Controller File

The controller function you just copied into the controller.js file is where you include the snippets that invoke the device plugins added to the PhoneGap project.

Between the curly brackets of the controller function, paste the following function to alert the device info.

$scope.alertDeviceInfo = function() {
  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);
};

Paste the following function to alert geolocation.

$scope.alertGeoLocation = function() {
  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);
};

Paste the following function to sound a notification beep.

$scope.beepNotify = function() {
    navigator.notification.beep(1);
};

Paste the following function to activate the device’s vibrate capability.

$scope.vibrateNotify = function() {
    navigator.notification.vibrate(1000);
};

Press CTRL+S to save the file.

Final controller file

4. Add the UI to the Home Page

In index.html, change the opening <html> tag to reference ng-app.
```
<html ng-app="myApp">
```
Add references to the AngularJS JavaScript files after the reference to angular.min.js.
```
<script src="js/myApp.js"></script>
<script src="js/controller.js"></script>
```
In the body, add a <div> tag that references ng-controller.
```
<div ng-controller="controller"> </div>
```

Inside the controller <div> tag, add button controls for each of the device functions.

<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>

After the controller </div>, be sure you have the following <script> tag:
```
<script type="text/javascript">app.initialize();</script>
```
Press CTRL+S to save.

Final index file

5. Preview in the Mobile Web Simulator

The example below includes CSS for stylizing the buttons. You can include a custom CSS file if you like.

Right-click the project, and select Phonegap>Preview Application in Mobile Web Simulator.
Select either iOS or Android mode.

Viewing in the Mobile Web Simulator
Click each button to test the app.

Note: For the beep notification to work in the simulator, you must include a beep.wav sound file in the project’s www folder.

6. Build the Application

After testing the mobile app in the simulator, the next step is to build the app to install and test on a device. This example builds in local mode for the Android platform.

Configure the Android SDK tools in the local build preferences.
Right-click the project, and select Phonegap>Build PhoneGap Application.

Build wizard
Click Finish.

Upon build completion, 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.

angular_build_notify
Build completion notification

You can use GapDebug to install the app file onto your device for debugging and testing.

7. Resources

Sample Project: PGAngularNotificationApp.zip