用AngularJS UI创建PhoneGap移动应用

本教程将为你演示如何用 MyEclipse 2015 创建一个简单的移动App，主要讲解如何：

创建一个app项目并安装AngularJS模块
设置AngularJS控制器
添加代码以访问设备函数
添加AngularJS按钮控件
测试并创建App

还没有MyEclipse 2015？立即下载

一、创建项目并安装AngularJS

1.用空白模板创建一个PhoneGap应用项目，选择以下插件：

Device
Notification
GeoLocation
Vibration

2.右键单击项目，选择 MyEclipse>JavaScript Modules>Install AngularJS support .

3.双击项目的 www/index.html 文件，在编辑器中打开它。

4.添加下面这段代码到 <head> 标签中：

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

5.删除引用 index.js 的默认脚本标签。

6.按下 Ctrl+S 保存文件。

二、创建AngularJS控制器

1.右键单击项目，选择 New>JavaScript Source File 。

2.选择项目中的js文件夹，在文件名那一栏输入myApp.js，最后单击Finish。

3.打开myApp.js文件，将下面这段代码复制到文件中，然后保存：

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

4.右键单击项目，选择 New>JavaScript Source File。

5.选择js文件夹。在文件名那一栏输入controller.js，最后单击Finish。

6.打开文件，将下面这段代码复制进去，然后保存：

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

三、添加代码到控制器文件

刚刚复制到controller.js代码可以调用设备插件。

1.在控制器函数的大括号之间粘贴下面这段函数以提示设备信息：

$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);
};

2.粘贴下面这段函数用于提示地理位置：

$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);
};

3.粘贴下面这段函数，会发出一种哔哔的提示声：

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

4.粘贴下面这段函数激活设备的震动功能：

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

5.按下Ctrl+S保存文件。

四、添加UI到主页

1.在index.html，更改打开的html标签，去引用ng-app。

<html ng-app="myApp">

2.添加下面这两个引用到 AngularJS JavaScript文件中：

<script src="js/myApp.js"></script>
<script src="js/controller.js"></script>

3.在body中，添加一段div引用ng-controller：

<div ng-controller="controller"> </div>

4.在控制器div标签中，为每个设备函数添加按钮控件：

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

5.在控制器后，再加下面这段<script>标签：

<script type="text/javascript">app.initialize();</script>

6.按下Ctrl+S保存。

五、在移动Web模拟器中预览

下面的示例本身包含了一个CSS样式文件，你也可以自定义加入一个CSS文件。

1.右键单击项目，选择Phonegap>Preview Application in Mobile Web Simulator.

2.选择iOS或者Android模式：

3.单击各个按钮测试app。

注意：要使通知声音能够在模拟器中正常运行，需要在项目的 www 文件夹下放入一个beep.wav声音文件。

六、创建应用程序

在模拟器上测试完成后，接下来就开始真正在设备上创建app。下面举的例子采用Android平台的本地模式。

1.在local build选项中配置Android SDK。

2.右键单击项目，选择Phonegap>Build PhoneGap Application.

3.单击Finish。

随着配置完成后，应用程序文件会自动下载到你的文件系统中并保存在bin文件夹下。另外，配置完成后会弹出一个通知提示成功。