转载

使用 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 框架文件。

  1. 打开命令提示符,运行以下命令: npm install -g ionic
  2. 执行完该命令后,在 E 盘中创建一个名为 AngularJS 的新文件夹,并执行此命令: cd AngularJS
  3. 接下来,您需要创建一个新的 Ionic Project。在默认情况下,Ionic 会创建一个完整的 Cordova 项目,但我们不需要该项目。您可以告诉 Ionic,只通过在命令行中传递 --no-cordova 来创建 Web 资产。这里有一个示例: ionic start --no-cordova ionicproject blank 。该语句告诉 ionic 使用 "blank" 模板创建一个名为"ionicproject" 的新项目。
  4. 您可以在 /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 并在其中包含以下代码行来正确加载该模块:

<script src="js/app-main.js"/>

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

body { position: initial; }

如果您没有在提及的 CSS 文件中添加此行,应用程序中可能会出现意外的结果。您可以从 此处 阅读有关该问题的更多信息。

10. 现在,将 html 文件从附带的 zip 文件的 pages 目录复制到您的项目的 pages 目录。

11. 在完成此操作后,您需要定义导航路径。打开 app-main.js 文件,并在其中添加下面几行代码:

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

.config(function($stateProvider, $urlRouterProvider) {

// Define our views 

$stateProvider.state('home', { url: "/home", templateUrl: 'pages/home.html' });

$stateProvider.state('angular', { url: "/angular", templateUrl: 'pages/angular.html' });

$stateProvider.state('ionic', { url: '/ionic', templateUrl: 'pages/ionic.html' });

// Default view to show

$urlRouterProvider.otherwise('/home');

});

12. 构建、运行和部署应用程序。

回页首

结束语

在这篇文章中,您已经成功地通过使用 Angular JS 和 Ionic Framework 在 IBM MobileFirst Platform 中创建了一个混合应用程序。您可以轻松地使用附带的项目作为基本项目,开始使用 Ionic 和 Angular 为客户构建令人兴奋的应用程序吧。

原文  http://www.ibm.com/developerworks/cn/opensource/os-using_angular_js_and_ionic_framework_mobile_first/index.html?ca=drs-
正文到此结束
Loading...