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

本教程將為你演示如何用 創建一個簡單的移動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.添加下面這段代碼到 &lthead> 標簽中：

&ltscript src="//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。

&lthtml ng-app="myApp">

2.添加下面這兩個引用到 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標簽中，為每個設備函數添加按鈕控件：

<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>標簽：

&ltscript 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文件夾下。另外，配置完成后會彈出一個通知提示成功。

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