用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.lug.ustc.edu.cn/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文件夹下。另外,配置完成后会弹出一个通知提示成功。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章