Ionic入门：Cordova

在ionic 入门系列的最后一部分中，您将学习如何利用 cordova 将设备硬件功能添加到您的应用程序中。我们将了解如何使用地理定位等功能，我将向您展示如何与 ngCordova 库集成以完成我们的应用程序。在我们开始之前，您需要确保您已经为 Ionic 设置了您的机器，并确保您还设置了特定于平台的工具。 

项目文件

教程项目文件可在 GitHub上找到。该应用程序的一般前提是它显示了有关您附近设施的一些信息。在本教程中，我们添加了查找当前位置并显示您附近的结果的功能。您可以在此处查看工作示例。

如果您克隆项目，您还可以使用 Git 并运行 git checkout –b start. 本课的编码从上一篇文章开始，  Ionic 入门：导航 停止。您还可以实时预览起点。

设置科尔多瓦

在我们编写任何代码之前，我们需要设置我们的项目。Ionic 已经建立了一个基本的 Cordova 项目，但我们需要自己初始化一些额外的东西。 

首先，我们需要安装ngCordova库。这是一个 angular 模块，可以更轻松地使用一些最流行的 Cordova 插件。（虽然 ngCordova 并不支持所有插件。）Bower 用于安装此依赖项。 

其次，我们需要为我们的项目添加一个平台。这将是ios或android（或两者！），具体取决于您选择支持的平台。我ios在我的示例中使用过，但您可以将其替换为该android 平台以实现相同的效果。

第三，我们将为 Cordova 安装地理定位插件。这增强了您的应用程序获取用户当前位置的能力（这需要s 权限）。您可以在https://cordova.apache.org/plugins/上查看所有插件的列表，  其中包含有关如何设置每个插件的详细信息。

应该从项目的根目录运行以下命令来执行这三个设置步骤。

node_modules/.bin/bower install ngCordova
ionic platform add ios # or android
ionic plugin add cordova-plugin-geolocation

完成后，我们需要将 ngCordova 添加到应用程序中，以便 Ionic 识别它。打开www/index.html。html文件并在ionic.bundle.js文件之后添加以下行。 

<script src="lib/ngCordova/dist/ng-cordova.js"></script>

然后我们需要更新www/js/app.js文件以包含 ngCordova 模块。第一行应更新为如下所示。

angular.module('App', ['ionic', 'ngCordova'])

现在我们已经更新了依赖项，我们的项目已准备好使用地理定位插件。下一步是设置一个新视图以开始使用它！

添加位置视图

我们将为应用程序创建一个新的登陆屏幕。此屏幕显示有关使用用户当前位置查找附近地点的消息。他们将点击一个按钮以确认他们希望应用程序访问他们的位置，然后查看反映他们当前位置的地点列表。

用户位置数据是应用程序在收集时应小心谨慎的隐私问题，因此移动设备不允许应用程序自动访问地理位置数据。应用程序必须请求权限（可以随时拒绝或撤销），因此在使用某些需要权限的插件时需要牢记这一点。（小心使用这些数据，避免侵犯用户的隐私！）

首先，我们将为我们的位置视图创建模板。在www/views/location/location.html创建一个新文件并包含以下内容。（这在前面的教程中应该都很熟悉，但它本质上创建了一个带有按钮的新视图，该按钮将调用我们控制器中的一个方法，我们将在接下来定义该方法。）

<ion-view view-title="Set Location" hide-back-button="true">
  <ion-content>
    <div class="list">
      <div class="item item-text-wrap">
        <h2>Set your current location, it is only accessed by pressing the button below.</h2>
      </div>
      <button class="button icon-left ion-navigate button-full button-positive" ng-click="vm.useGeolocation()">
        Use Current Location
      </button>
    </div>
  </ion-content>
</ion-view>

我们现在将创建控制器外壳，然后添加一个方法来处理获取用户的位置。在www/views/location/location.js创建另一个新文件并包含以下代码。确保还链接到www/index.html文件中的此文件。

angular.module('App')
.config(function($stateProvider) {
  $stateProvider.state('location', {
    url: '/location',
    controller: 'LocationController as vm',
    templateUrl: 'views/location/location.html'
  });
})
.controller('LocationController', function($ionicLoading, $http, $state, Geolocation, $cordovaGeolocation, $ionicPopup) {
  var vm = this;
});

此时我们有了一个新的位置视图，但按钮还不能工作。您可以在浏览器中使用 预览应用程序 ionic serve。如果您转到http://localhost:8100/#/location，您应该能够看到该视图。

您会注意到 $cordovaGeolocation控制器构造函数中调用的服务，它将为我们提供对用户位置数据的访问。注入的其余服务仅用于处理如何处理位置数据的业务逻辑 。

在这个应用程序中获取用户的位置实际上涉及两个步骤，首先是从 Cordova 插件中获取地理位置数据（它只返回一个纬度和经度值），然后在 Google Geocode api中进行反向查找以找到当前位置地点（与我们的其他 API 调用配合得很好）。

将以下方法添加到控制器中，我们将在下面详细介绍。

vm.useGeolocation = function() {
  $ionicLoading.show();

  $cordovaGeolocation.getCurrentposition({timeout: 10000, enableHighAccuracy: false}).then(function (position) {
    var lat  = position.coords.latitude;
    var lng = position.coords.longitude;

    var url = 'https://civinfo-apis.herokuapp.com/civic/geolocation?latlng=' + lat + ',' + lng;
    $http.get(url).then(function(response) {
      $ionicLoading.hide();
      if (response.data.results.length) {
        Geolocation.data = response.data.results[0];
        $state.go('places');
      } else {
        $ionicPopup.alert({
          title: 'Unknown location',
          template: 'Please try again or move to another location.'
        });
      }
    })
    .catch(function(error) {
      $ionicLoading.hide();
      $ionicPopup.alert({
        title: 'Unable to get location',
        template: 'Please try again or move to another location.'
      });
    });
  });
};

首先是在$ionicLoading检测到当前位置时使用该服务显示加载程序。 

然后我们使用该$cordovaGeoposition服务，它有一个调用方法getPosition来获取当前位置。我们指定选项，它们是合理的默认值。您可以在文档中阅读有关其他 getPosition 选项的信息。

该getPosition方法返回一个promise，因此我们使用它then来处理响应。假设用户同意分享他们的位置，它会给我们一个包含纬度和经度坐标的对象。然后，我们将使用这些值调用 API 进行反向地理编码以查找最近的位置。如果失败，catch 处理程序将用于$ionicPopup显示失败的警报。

该$http服务用于查找反向地理编码，如果成功，我们需要检查是否返回任何结果。如果找到，Geolocation则更新服务值并使用 将用户重定向到地点列表$state.go。否则，它$ionicPopup会显示一个警报，说明没有找到任何地方。

这就是我们在我们的应用程序中启用设备的地理定位功能所要做的一切。但是，我们仍然需要对位置视图和app.js文件进行一些小的调整。

首先打开www/js/app.js文件并将Geolocation服务更新为以下内容。这对于清除我们之前硬编码到芝加哥的地理定位服务的默认值是必要的，并使摘要周期能够正确同步更改。

.factory('Geolocation', function() {
  return {
    data: {}
  };
})

然后通过将最后一个配置行更新为以下内容来修改应用程序应用程序的默认视图。这将使应用程序在位置视图上启动。

.config(function($urlRouterProvider) {
  $urlRouterProvider.otherwise('/location');
})

最后，我们想要调整位置视图以不再缓存（因此始终反映更新的位置），并在找不到位置时重定向到位置视图。打开www/views/places/places.html并更新第一行如下。

<ion-view view-title="Local Places" hide-back-button="true" cache-view="false">

然后打开www/views/places/places.js并更新控制器的开始以匹配以下内容。

.controller('PlacesController', function($http, $scope, $ionicLoading, $ionicHistory, $state, Geolocation, Types) {
  var vm = this;

  if (!Geolocation.data.geometry || !Geolocation.data.geometry.location) {
    $state.go('location');
    return;
  }

  var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' 
  + Geolocation.data.geometry.location.lat + ',' 
  + Geolocation.data.geometry.location.lng;

我们在控制器触发之前进行快速检查以检测是否已找到地理位置，如果没有，我们将重定向到该位置以重置它。

这实际上也适用于您的浏览器，因为浏览器支持地理定位功能。在下一节中，我们将简要讨论如何在模拟器中预览应用程序。

在模拟器中预览

Ionic CLI 有一个命令，可让您轻松地在设备的软件版本中模拟应用程序。并非所有硬件功能都可用，但许多功能都是模拟的，包括地理定位。

使用ionic emulate ios，Ionic 将启动模拟器并加载应用程序（与 Android 类似）。如果您有错误，很可能您的机器尚未针对您尝试模拟的平台进行完全设置。

该命令将启动一个真实版本的平台操作系统，并模拟一个非常逼真的设备。对于没有实际设备进行测试的人来说，这是快速验证不同设备与您的应用程序配合使用的好方法。

您有时可能需要重置模拟器以确保您所做的更改不会持续存在。例如，如果您拒绝应用程序的地理定位权限，您可能必须稍后找到允许它的设置，或者您可以重置模拟器以删除任何设置。

结论

在本教程中，我们了解了如何使用 Cordova 创建一个利用硬件功能和传感器的应用程序。使用 ngCordova，很容易在您的 Ionic 应用程序中访问这些信息。您现在可以使用相机、地理位置、指纹读取器和日历等设备功能。如果可能，您应该利用 ngCordova 库使其更易于集成，但是 ngCordova 未公开其他 Cordova 插件。

这也结束了Ionic 入门系列。您现在应该掌握了基础知识并能够继续使用 Ionic。如果您对更多内容感兴趣，请查看我们关于离子框架的其他一些课程和教程。