文江博客开发文档学习 Ionic - 使用 Ionic 构建实时混合移动应用文章详情

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

7.4 测试部分 ngCordova 插件

发布于 2025-02-26 23:07:11 字数 10272 浏览 0 评论 0 收藏 0

$cordovaToast

第一个学习的插件是 toast 插件。这个插件弹出一个展示文本而不会阻断 app 的用户交互。新建一个空白模板项目：

ionic start -a "Example 30" -i app.example.thirty example30 blank

接下来，给项目添加 ngCordova 支持。想要使用 toast API 的话，那么得先将 toast 插件添加到项目里：

ionic plugin add https://github.com/EddyVerbruggen/Toast-PhoneGapPlugin.git

现在，我们给每个需要用到的插件分别创建一个控制器，而不是去

run 方法中处理。这样，当你回顾参考的时候就会比较简单。打开
www/index.html 在 body 标签上添加 ng-controller="ToastCtrl" 。然后在 www/js/app.js 中的 run 方法下面，添加控制器定义代码：

.controller('ToastCtrl', ['$ionicPlatform', '$cordovaToast',function($ionicPlatform, $cordovaToast) { $ionicPlatform.ready(function() { $cordovaToast .show('This is a long toast!', 'long', 'center') .then(function(success) { // success }, function(error) { // error }); }); }])

接着，给 Ionic App 添加一个平台然后模拟之。效果图如下：

finally

在本范例中，我们将使用仅可能小版本的 API 方法。在学完每个插件之后，我们提供他们的 API 链接；你可以查看他们支持的其他方法。

$cordovaDialogs

接着学习的是对话框插件。他会触发警告，确认以及提醒窗。新建一个空白模板项目：

ionic start example31 blank

接下来，给项目添加 ngCordova 支持。然后使用以下命令给项目添加对话框插件：

ionic plugin add cordova-plugin-dialogs

我们将创建一个对话框控制器。打开

www/index.html 在 body 标签处添加 ng-controller="DialogsCtrl" 。本范例中，我们将显示一个提醒框供用户输入文本。用户在输入文本的时候，我们将文本输出到屏幕上。我们将
www/index.html 的 body 部分更新如下：

<body ng-app="starter" ng-controller="DialogsCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <span class="padding">Hello {{name}}!!</span> </ion-content> </ion-pane> </body>

在

www/js/app.js 中添加 DialogsCtrl ：

.controller('DialogsCtrl', ['$ionicPlatform', '$scope','$cordovaDialogs', function ($ionicPlatform, $scope,$cordovaDialogs) { $ionicPlatform.ready(function () { $cordovaDialogs.prompt('Name please?', 'Identity', ['Cancel', 'OK'], 'Harry Potter') .then(function (result) { if (result.buttonIndex == 2) { $scope.name = result.input1; } }); }); }])

接下来给 Ionic App 添加一个平台然后进行模拟。效果图如下：

dialog

$cordovaFlashlight

下一个学习的是一个工具插件。这个插件用户开关设备上的手电筒。这个插件不能在模拟器上测试。所以你得找个设备来测试这个插件。新建一个空白模板项目：

ionic start -a "Example 32" -i app.example.thirtytwo example32 blank

接下来，给项目添加 ngCordova 支持。运行如下命令添加手电筒插件到项目：

ionic plugin add https://github.com/EddyVerbruggen/FlashlightPhoneGap-Plugin.git

打开

www/index.html ，在 body 标签处添加 ng-controller="FlashlightCtrl" 。本例中，我们使用
ion-toggle 指令给用户展示一个开关，然后根据他的状态，对设备上的手电筒进行开与关操作。由此，更新 www/index.html 如下：

<body ng-app="starter" ng-controller="FlashlightCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item> <ion-toggle ng-disabled="notSupported" ng-model="torch" ng-change="toggleTorch()"> Torch </ion-toggle> </ion-item> </ion-list> </ion-content> </ion-pane> </body>

在

www/js/app.js 的 run 方法后面添加 FlashlightCtrl ：

.controller('FlashlightCtrl', ['$scope', '$ionicPlatform','$cordovaFlashlight', function($scope, $ionicPlatform,$cordovaFlashlight) { $scope.notSupported = true; $ionicPlatform.ready(function() { $cordovaFlashlight.available().then(function(availability) { // availability = true || false $scope.notSupported = !availability; }); $scope.toggleTorch = function() { if ($scope.notSupported) return; $cordovaFlashlight.toggle() .then(function(success) { /* success */ }, function(error) { /* error */ }); } }); }])

我们先检查插件是否可用。如果可用，我们激活开关；否则，保持开关的禁用状态。然后在用户切换开关的时候，我们调用

toggleTorch 方法，这样就可以切换手电筒的开关状态了。如果你在设备上运行 app 的时候，将会看到如下效果：

flashlight

如果想要验证开关是否会禁用，可以在模拟器中模拟此 app。

$cordovaLocalNotification

接下来学习的是 Notification（通知）插件。这个插件主要是用来通知或者提醒用户 App 相关的活动。有时候，当后台运行一些活动的时候也会显示通知-例如，上传大文件的时候。新建一个空白模板 App：

ionic start -a "Example 33" -i app.example.thirtythree example33 blank

接下来，给项目添加 ngCordova 支持。运行如下命令添加通知插件到项目：

ionic plugin add de.appplant.cordova.plugin.local-notification

在本例中，我们将在按下按钮的时候触发一个通知，然后展示用户在文本框中输入的文本。因此，我们需要添加一个名为

NotifCtrl 的控制器和一个文本框，一个按钮。更新
www/index.html 的 body 部分为以下代码：

<body ng-app="starter" ng-controller="NotifCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Enter Notification text</span> <input type="text" ng-model="notifText"> </label> <label class="item item-input"> <button class="button button-dark" ngclick="triggerNotification()"> Notify </button> </label> </div> </ion-content> </ion-pane> </body>

在

www/js/app.js 中添加 NotifCtrl 如下：

.controller('NotifCtrl', ['$scope', '$ionicPlatform','$cordovaLocalNotification', function($scope, $ionicPlatform,$cordovaLocalNotification) { $ionicPlatform.ready(function() { $scope.notifText = 'Hello World!'; $scope.triggerNotification = function() { $cordovaLocalNotification.schedule({ id: 1, title: 'Dynamic Notification', text: $scope.notifText }).then(function(result) { console.log(result); }); } }); }])

模拟此 Ionic app 的时候，会问你是否允许显示通知。允许之后，你可以根据需求分发通知。

notification

$cordovaGeolocation

最后一个学习的插件的 Geolocation（定位）插件，这个插件可以帮助我们获取设备坐标。新建一个空白模板项目：

ionic start -a "Example 34" -i app.example.thirtyfour example34 blank

接下来，给项目添加 ngCordova 支持。运行如下命令添加定位插件到项目：

ionic plugin add cordova-plugin-geolocation

启动应用的时候，我们将去获取设备的定位信息。在得到定位信息之前，我们展示一个加载内容信息。一旦我们得到响应，我们就在页面上显示经度，纬度，以及精确度。首先，更新

www/index.html 的 body 部分如下：

<body ng-app="starter" ng-controller="GeoCtrl"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <ul class="list" ng-show="dataReceived"> <li class="item"> Latitude : {{latitude}} </li> <li class="item"> Longitude : {{longitude}} </li> <li class="item"> Accuracy : {{accuracy}} </li> </ul> </ion-content> </ion-pane> </body>

之后，在

www/js/app.js 的 run 方法下面添加 GeoCtr ：

.controller('GeoCtrl', ['$scope', '$ionicPlatform','$cordovaGeolocation', '$ionicLoading', '$timeout', function($scope, $ionicPlatform, $cordovaGeolocation, $ionicLoading, $timeout) { $ionicPlatform.ready(function() { $scope.modal = $ionicLoading.show({ content: 'Fetching Current Location...', showBackdrop: false }); var posOptions = { timeout: 10000, enableHighAccuracy: false }; $cordovaGeolocation .getCurrentPosition(posOptions) .then(function(position) { $scope.latitude = position.coords.latitude; $scope.longitude = position.coords.longitude; $scope.accuracy = position.coords.accuracy; $scope.dataReceived = true; $scope.modal.hide(); }, function(err) { // error $scope.modal.hide(); $scope.modal = $ionicLoading.show({ content: 'Oops!! ' + err, showBackdrop: false }); $timeout(function() { $scope.modal.hide(); }, 3000); }); }); }])

在模拟此 app 的时候，你将被询问是否允许访问定位信息。接受之后，就可以看到下面这样的效果：

geolocation