MyEclipse春季打折促銷只剩最后3天！欲購從速！

本教程將為你演示如何用 創(chuàng)建一個(gè)簡單的移動(dòng)App，主要講解如何：

• 創(chuàng)建一個(gè)app項(xiàng)目并安裝AngularJS模塊
• 設(shè)置AngularJS控制器
• 添加代碼以訪問設(shè)備函數(shù)
• 添加AngularJS按鈕控件
• 測(cè)試并創(chuàng)建App

還沒有MyEclipse 2015？

一、創(chuàng)建項(xiàng)目并安裝AngularJS

1.用空白模板創(chuàng)建一個(gè)PhoneGap應(yīng)用項(xiàng)目，選擇以下插件：

• Device
• Notification
• GeoLocation
• Vibration

2.右鍵單擊項(xiàng)目，選擇 MyEclipse>JavaScript Modules>Install AngularJS support .

3.雙擊項(xiàng)目的 www/index.html 文件，在編輯器中打開它。

4.添加下面這段代碼到 &lthead> 標(biāo)簽中：

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

5.刪除引用 index.js 的默認(rèn)腳本標(biāo)簽。

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

二、創(chuàng)建AngularJS控制器

1.右鍵單擊項(xiàng)目，選擇 New>JavaScript Source File 。

2.選擇項(xiàng)目中的js文件夾，在文件名那一欄輸入myApp.js，最后單擊Finish。

3.打開myApp.js文件，將下面這段代碼復(fù)制到文件中，然后保存：

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

4.右鍵單擊項(xiàng)目，選擇 New>JavaScript Source File。

5.選擇js文件夾。在文件名那一欄輸入controller.js，最后單擊Finish。

6.打開文件，將下面這段代碼復(fù)制進(jìn)去，然后保存：

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

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

剛剛復(fù)制到controller.js代碼可以調(diào)用設(shè)備插件。

1.在控制器函數(shù)的大括號(hào)之間粘貼下面這段函數(shù)以提示設(shè)備信息：

$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.粘貼下面這段函數(shù)用于提示地理位置：

$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.粘貼下面這段函數(shù)，會(huì)發(fā)出一種嗶嗶的提示聲：

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

4.粘貼下面這段函數(shù)激活設(shè)備的震動(dòng)功能：

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

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

四、添加UI到主頁

1.在index.html，更改打開的html標(biāo)簽，去引用ng-app。

&lthtml ng-app="myApp">

2.添加下面這兩個(gè)引用到 AngularJS JavaScript文件中：

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

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

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

4.在控制器div標(biāo)簽中，為每個(gè)設(shè)備函數(shù)添加按鈕控件：

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

5.在控制器后，再加下面這段&ltscript>標(biāo)簽：

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

6.按下Ctrl+S保存。

五、在移動(dòng)Web模擬器中預(yù)覽

下面的示例本身包含了一個(gè)CSS樣式文件，你也可以自定義加入一個(gè)CSS文件。

1.右鍵單擊項(xiàng)目，選擇Phonegap>Preview Application in Mobile Web Simulator.

2.選擇iOS或者Android模式：

3.單擊各個(gè)按鈕測(cè)試app。

注意：要使通知聲音能夠在模擬器中正常運(yùn)行，需要在項(xiàng)目的 www 文件夾下放入一個(gè)beep.wav聲音文件。

六、創(chuàng)建應(yīng)用程序

在模擬器上測(cè)試完成后，接下來就開始真正在設(shè)備上創(chuàng)建app。下面舉的例子采用Android平臺(tái)的本地模式。

1.在local build選項(xiàng)中配置Android SDK。

2.右鍵單擊項(xiàng)目，選擇Phonegap>Build PhoneGap Application.

3.單擊Finish。

隨著配置完成后，應(yīng)用程序文件會(huì)自動(dòng)下載到你的文件系統(tǒng)中并保存在bin文件夾下。另外，配置完成后會(huì)彈出一個(gè)通知提示成功。

MyEclipse春季打折促銷只剩最后3天！欲購從速！