使用 Phonegap、AngularJS、Bootstrap 开发混合移动应用

在我的帖子“使用 Web 开发技能开发移动应用”中，我列出了一些可以用来创建混合移动应用的框架。到目前为止，我最喜欢的选择是使用 Cordova/Phonegap（阅读我关于 Cordova/Phonegap 的看法）结合混合应用开发框架。在我之前开发的移动应用中，我通常使用 jQuery mobile 作为我选择的框架来开发应用的 UI。如今，我已经切换到另一个组合，那就是

Cordova/Phonegap + AngularJS + Bootstrap

使用 Phonegap、AngularJS、Bootstrap 的混合移动应用架构如下所示

表示层使用 Bootstrap 框架构建，应用域使用 AngularJS 进行建模，并使用 Cordova/Phonegap 打包成原生应用。让我们来逐步了解这个混合移动应用架构的组成部分并进行描述。

Bootstrap

Bootstrap 是一个移动优先的响应式前端框架。这是什么意思？Bootstrap 拥有易于使用的响应式网格，可以让你以结构良好的响应式方式定位你的布局。由于该框架在构建时就考虑了移动端的使用，因此它能很好地响应不同的屏幕尺寸，并轻松地将应用布局适配到不同的屏幕尺寸。这是一个很好的机会，可以使用相同的实现来兼容不同屏幕尺寸的平板电脑和移动设备。而且，不仅仅是网格使其与众不同。它还帮助你管理排版、响应式图片、表单、表单验证消息、通知消息、响应式表格以及大量的 UI 组件。你可以从 getbootstrap.com 下载它。

AngularJS

一个非常强大、功能齐全的 JavaScript MVW 框架。使用 AngularJS 框架，你可以为你的应用域模型提供结构，并以非常灵活的方式管理你的应用逻辑。一切都围绕着一个通过视图显示的模型。视图可以是结构良好的模板化 HTML 代码，使用 Bootstrap 进行样式设置和组织。控制器负责组织视图、服务以及所有其他部分之间的通信。该框架支持一个良好的路由机制，还可以通过其他扩展库进行扩展，以获得更强大的功能。有大量的 AngularJS 扩展库通过填补框架的空白来增加框架的价值。你可以从 angularjs.org 获取 AngularJS。

Cordova/Phonegap

Cordova 是一个 Apache 项目，它为开发多平台移动应用创建了底层平台。在我们的案例中，它使得 AngularJS+Bootstrap Web 应用能够被打包成原生移动应用，从而可以在移动市场发布并在移动设备上安装。Adobe PhoneGap 是 Cordova 的一个发行版。

基本上，Cordova 所做的是让 Web 应用能够在原生应用的 WebView 组件中运行，我们可以将其视为 Web 应用的原生打包。你可以使用 Cordova 命令行界面 (CLI) 或使用 Adobe PhoneGap Build 进行打包，后者不需要任何安装。

在我看来，Cordova 最强大的功能是通过插件进行扩展的可能性。通过安装特定的插件，你可以访问设备的硬件，如摄像头、指南针、地理位置，以及其他设备特定的 API，如联系人、媒体、通知等。像条形码读取、推送通知等非常强大的插件，只需编写几行代码就可以为你的应用程序提供丰富的功能。

开发过程

正如我们已经描述了架构的各个部分，现在让我们开始使用 Phonegap、AngularJS、Bootstrap 开发混合移动应用的过程。我们从创建一个示例应用程序开始，该应用程序将显示你当前的位置坐标并演示开发过程。开始应用开发的最简单方法是使用 Cordova/Phonegap CLI 创建初始模板。我们通过此命令执行此操作（如果你尚未安装 cordova cli，请访问此链接了解如何安装：https://cordova.net.cn/docs/en/4.0.0/guide_cli_index.md.html）。

phonegap create blogSample com.ariancelina.blogSample BlogSample

create 命令需要 3 个参数

1. 要为生成项目而创建的目录名称，在本例中为“blogSample”
2. 第二个参数是项目标识符，在本例中为“com.ariancelina.blogSample”。通常，它用作反向域名标识符
3. 第三个参数是应用程序的显示标题，在本例中为“BlogSample”

在此示例代码中，我使用了 phonegap 来创建应用。该命令同样适用于 cordova。

如果你已经安装了 phonegap 并且应用已成功创建，那么在 blogSample 目录中，你应该会看到一个 config.xml 文件以及其他四个目录（hooks、platforms、plugins 和 www）。Platforms 文件夹包含特定平台的构建，plugins 目录包含已安装的插件，而 WWW 目录包含我们所有的 Web 代码（AngularJS + Bootstrap + 其他文件）。

为了读取我们的位置坐标，我们需要安装 Geolocation 插件（查找插件列表），我们通过执行以下命令来完成此操作

cordova plugin add org.apache.cordova.geolocation

现在我们有了初始结构，我们需要添加我们要部署的平台，但为此，我们需要进入我们的应用目录，在本例中是 blogSample。添加 ios 平台是通过以下命令完成的

phonegap platform add ios

添加平台后，我们可以使用以下命令构建我们的应用

phonegap build ios

我们可以为 Android、Windows Phone 等所有其他支持的平台重复最后两个命令。

如果我们要测试我们的应用，我们可以进入 blogSample/platforms/ios 目录，然后启动 BlogSample.xcodeproj 并在模拟器或现有设备上运行该应用。

我们的平台已经设置好，现在让我们添加 AngularJS 和 Bootstrap 文件。下载这些文件后（将 AngularJS 下载为 zip 文件，这样你就可以得到它的所有部分），我们将 AngularJS 和 Bootstrap 的 js 文件放在 blogSample/www/js 目录中：jquery-1.11.2.min.js（jquery 是 bootstrap 的依赖项，可以从jquery.com下载）、angular.min.js、angular-route.min.js 和 bootstrap.min.js。在 blogSample/www/css 目录中，我们放置 bootstrap.min.css 和 bootstrap-theme.min.css 文件。最后一个部分是在我们的主文件 index.html 中链接这些文件。我们将 CSS 代码放在 head 部分

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/index.css" />

并在关闭的 body 标签附近，我们链接 JavaScript 文件。

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/angular-route.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>

现在设置已经准备就绪，我们可以开始编写逻辑代码了。我们需要定义三样东西才能使其正常工作：我们需要一个 angular 路由配置，允许我们在页面之间导航；然后我们需要一个 angular 控制器；以及一个视图，用于向用户显示其当前位置。

我们从 app.js 文件开始，它包含 js 应用的初始化。这个文件也是放置初始化事件的地方。在本例中，它看起来像这样

var blogSample = angular.module('blogSample', ['ngRoute','ui.bootstrap']);
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        navigator.geolocation.getCurrentPosition(app.onSuccess, app.onErr);
    },
    onErr: function(error)
    {
        alert('Unable to get your location. 
	Without location you will not be able to use navigate feature! Error:' + '\n' + error.message);
    },

    onSuccess: function(position)
    {
        blogSample.latitude = position.coords.latitude;
        blogSample.longitude = position.coords.longitude;
    }
};

我们首先定义我们的 angular 应用，blogSample（第 1 行）。我们初始化它并定义我们需要的模块（ngRoute、ui.bootstrap）。这里还有其他有趣的事情正在发生。就像我们习惯使用 jquery ready 函数来响应页面加载并准备就绪一样，这里有一个 onDeviceReady 事件，当应用加载并可以使用时，该事件就会触发。在此事件中，我们将通过以下代码行获取设备的当前位置

navigator.geolocation.getCurrentPosition(app.onSuccess, app.onErr);

getCurrentPosition 函数用于获取设备的当前 latitude 和 longitude，它需要两个函数作为参数，第一个函数是在成功获取当前位置时调用的函数，第二个函数用于处理错误。错误函数用于报告位置不可用。success 函数用于读取坐标并将它们绑定到我们的 angular 应用 blogSample，通过这个函数

onSuccess: function(position)
{
   blogSample.latitude = position.coords.latitude;
   blogSample.longitude = position.coords.longitude;
}

现在我们的应用设置已经准备好，让我们定义两个视图：一个关于页面，另一个显示位置信息。在视图中显示坐标是通过以下方式完成的

<p class="text-center"> Your location is: <br/>
  Latitude: {{latitude}}<br/>
  Longitude: {{longitude}} <br/>
</p>

AngularJS 将花括号中的值替换为在 onSuccess 函数中设置的当前坐标。但是视图无法访问应用级别的数值。我们通常将控制器与视图关联，视图仅限于该控制器的作用域，因此我们需要定义一个控制器来将坐标绑定到视图。控制器将如下所示

blogSample.controller('mainController', function($scope, $route){
    $scope.latitude = blogSample.latitude;
    $scope.longitude = blogSample.longitude;          
});

最后，我们添加路由配置，将控制器绑定到视图并启用用户在页面之间移动。路由器具有以下代码

blogSample.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'views/main.html',
        controller: 'mainController'
      }).
      when('/about', {
        templateUrl: 'views/about.html'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

路由部分定义了一个默认 url 和一个‘/about’ url。默认 url ‘/’ 绑定到 main.html 视图，而‘/about’ url 绑定到 about.html 视图。

现在我们已经具备了所有构建模块，我们需要在 index.html 中添加最后一个创建文件的引用，引用将如下所示

<script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="js/libs/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/libs/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/libs/angular.min.js"></script>
        <script type="text/javascript" src="js/libs/angular-route.min.js"></script>
        <script type="text/javascript" src="js/libs/ui-bootstrap-tpls-0.11.0.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/angular/routes.js"></script>
        <script type="text/javascript" src="js/angular/controller.js"></script>
   

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

现在一切就绪，我们可以将我们的应用部署到手机上进行测试，或者在模拟器中运行。运行应用根据平台的不同而有所不同。你可以使用可以从 phonegap、xcode、eclipse 或 Android studio 启动的模拟器，但对于任何严肃的应用开发，我强烈建议你在真实设备上试用你的应用。我不会详细介绍部署，因为它超出了本文的范围，但在最简单的情况下，你可以进入 phonegap 项目文件夹内的 platforms 文件夹，打开特定平台的项目，然后从 respective IDE 运行项目。

该应用的完整源代码可以在 GitHub 上找到：https://github.com/acelina/phonegapWithAngularJs，你可以下载并在你的电脑上尝试。

帖子使用 Phonegap、AngularJS、Bootstrap 开发混合移动应用首次出现在arian-celina.com。