转载

使用 Angular JS 和 Ionic Framework 在 IBM MobileFirst Platform 中构建混合应用程序

简介

使用 IBM MobileFirst（正式名称为 Worklight）已有一年多的时间，并发布了一个适用于 Android 和 iOS 平台的混合应用程序。我使用了 jQuery Mobile UI Library 来构建我的用户界面 (UI)。最近，我在学习 Angular JS，并正在了解 Ionic 框架。通过了解这两个框架，发现它们比 jQuery Mobile 要好得多。于是进行了更深入地学习，并想利用这些框架提供的功能在 MobileFirst Platform 中构建一个混合应用程序。在这篇文章中，将会向您介绍配置 MFP 项目以便在 Ionic 框架中运行它所需的步骤。如果您不想做任何配置，您可以下载 AngularIonicStarterProject.zip 查看详细信息。在 MFP 项目中，所有一切都已预先配置。所以让我们开始吧。

回页首

前提条件

假设您已经了解 MFP。在这篇文章中，我将使用 MFP V7.1 Consumer Edition。
要下载 Ionic 库，需要在您的系统中安装 Node.js。您可以从此处下载它。确保您下载了 v4.2.4 ，而不是最新的可用版本，因为它会导致一些问题。
我还假设您对 HTML5、CSS3、JavaScript、Angular JS 和 Ionic Framework 有基本的了解。如果您不是这些领域的大师（我也不是），不必担心。

回页首

AngularJS

AngularJS 是一个针对动态 Web 应用程序的结构框架。它允许您使用 HTML 作为您的模板语言，还允许您扩展 HTML 的语法来简单明了地表达您的应用程序组件。Angular 的数据绑定和依赖关系注入 (dependency injection) 消除了您必须编写的许多代码。这一切都发生在浏览器中，这使得 Angular 成为了与任何服务器技术结合使用的理想合作伙伴。要了解关于 AngularJS 的更多信息，可以访问此网站，该网站上有许多针对 AngularJS 的很好的教程。在安装方面，AngularJS 将作为 Ionic Framework Dependency 的一部分进行安装，所以您现在不必担心。

回页首

Ionic Framework

Ionic 是一个旨在构建混合移动应用程序的 HTML5 移动应用程序开发框架。
Ionic 被认为是处理应用程序所需的所有外观和用户界面交互（使其引人注目）的前端 UI 框架。它有点类似于“Bootstrap for Native”，但支持大量的常见本机移动组件、流畅的动画和优美的设计。
与反应式框架不同，Ionic 提供了许多非常具有本机风格的移动 UI 元素和布局，您会获得 iOS 或 Android 上的本机 SDK，这些以前在 Web 上确实不存在。
Ionic 应用程式的主要部分是用 HTML、JavaScript 和 CSS 编写的，但它也使用了 AngularJS，以便获得该框架的许多核心功能。

回页首

安装 Ionic 和 Angular

一旦将 Node.js 安装在系统中，就可以按照以下步骤获得 Ionic 和 Angular 框架文件。

打开命令提示符，运行以下命令： npm install -g ionic 。
执行完该命令后，在 E 盘中创建一个名为 AngularJS 的新文件夹，并执行此命令： cd AngularJS 。
接下来，您需要创建一个新的 Ionic Project。在默认情况下，Ionic 会创建一个完整的 Cordova 项目，但我们不需要该项目。您可以告诉 Ionic，只通过在命令行中传递 --no-cordova 来创建 Web 资产。这里有一个示例： ionic start --no-cordova ionicproject blank 。该语句告诉 ionic 使用 "blank" 模板创建一个名为"ionicproject" 的新项目。
您可以在 /www/lib/ionic/ 文件夹中找到 Ionic 和 Angular 框架文件。

回页首

将 Ionic 和 Angular 配置到 MobileFirst Project 中

1. 创建一个新的 MFP 项目，并在该项目中创建一个新的混合应用程序。

2. 从 <Drive>:/AngularJS/ionicproject/www/lib/ 复制 ionic 文件夹，并将该文件夹复制到 MFP 的 Hybrid App 文件夹的常见文件夹中。

3. 在 MFP 的 Hybrid App 文件夹中创建一个名为 "pages" 的新文件夹。

4. 下一步是修改的 index.html，使之包含 Ionic 和 Angular 的依赖关系。

5. 打开 index.html 文件，使用包含附带的 zip 文件的 index.html 文件的内容替换其内容。

6.Ionic 项目提供了一个名为 ionic.bundle.js 的便利软件包来帮助您加载基本的 Ionic 环境。您还可以单独加载这些文件，而不是加载 ionic.bundle.js，这可能让管理复杂应用程序变得更容易。在我们的示例中，我已经加载了包含的打包文件：

ionic.js

ionic-angular.js

angular/angular.js

angular/angular-animate.js

angular/angular-sanitize.js

angular/angular-ui-router.js

7. 现在，我们已在应用程序中包含了 Ionic 框架及其依赖关系，我们需要启动它。因为 Ionic 是一组 AngularJS 扩展，所以加载模式与加载 AngularJS 的模式相同，这就是所谓的引导 AngularJS。但是，在引导 AngularJS 之前，需要让 IBM MobileFirst Platform (MFP) 完成它自己的加载，您可以通过指示 MFP 在 AngularJS 准备就绪时引导它来实现此操作。为此，请编辑 js/main.js 文件并调整 wlCommonInit() 函数，如下所示：

function wlCommonInit() {

// Pre-existing wlCommonInit() content here

// New lines to bootstrap AngularJS

angular.element(document).ready(function() {

angular.bootstrap(document, ['app-main']);

});

}

这段代码告诉 AngularJS 使用一个名为 App 的基本模块来引导您的应用程序。

8. 每个 AngularJS 应用程序都需要一个应用程序模块。在我们的示例中，我们在引导 AngularJS 时引用了一个名为 app-main 的模块。现在，在 common/js/app-main.js 中创建该模块，并将以下这行代码放入其中：

angular.module('app-main', ['ionic']);

这行代码定义了一个 app-main 模块，它包含一个单独的依赖关系：ionic。因为我们已经将 app-main 定义为我们的应用程序模块，所以 ionic 会自动加载为该模块的一个依赖关系。我们需要通过调整 index.html 并在其中包含以下代码行来正确加载该模块：

9. 您还需要修改 MFP 的默认样式表，以便让 Ionic 正常工作。编辑 common/css/main.css 并添加以下规则：