Ionic是一个高性能的移动开发框架，其中包含大量针对移动设备进行了优化的组件，可帮助您快速构建具有吸引力且易于使用的移动应用程序。 它包括用于移动设备优化的导航，滚动，侧边菜单和键盘管理的行为功能； 用于表单，按钮，列表和通用布局CSS模块； 以及700多个图标。 Ionic具有使用Apache Cordova框架创建混合应用程序的其他功能，但本教程未介绍它们。
Ionic支持iOS 6+和Android 4.0+，覆盖98％的iOS设备和90％的Android设备。 使用此框架，您可以快速创建简单和复杂的混合应用程序。
创建一个名为名称ToolsProject的新MobileFirst项目和一个名为AmazingApp的混合应用程序。 将Android环境添加到应用程序：
mfp create IonicProject cd IonicProject mfp add hybrid AmazingApp cd apps/AmazingApp从现在开始，执行IonicProject/apps/AmazingApp目录中的所有命令。
您还可以使用Bower和wiredep安装Ionic及其依赖项。 有关更多信息，请参阅developerWorks文章“ 使用Bower和wiredep加快IBM MobileFirst Platform混合应用程序中的依赖关系包含” 。
从Ionic网站下载最新版本的Ionic框架 。 本教程使用1.0.0-beta14版本。 您可以直接下载此版本 。
创建一个名为common/ionic的新目录，并将下载的.zip文件解压缩到其中。 像这样构造公共目录：
common ├── css/ ├── images/ ├── index.html ├── ionic/ │ ├── css/ │ ├── fonts/ │ ├── js/ │ └── version.json └── js/Ionic随附了AngularJS的捆绑版本，该版本提供了大多数巧妙的功能。 有关AngularJS框架的一般信息，请访问AngularJS网站 。 有关特别好的AngularJS教程，请访问Thinkster网站 。
编辑common/index.html以加载Ionic及其依赖项：
<html> <head> <!-- pre-existing <head> content here --> <!-- New lines to load Ionic CSS --> <link rel="stylesheet" href="ionic/css/ionic.css" /> </head> <body> <!-- pre-existing <body> content here --> <!-- New lines to load Ionic JS bundle --> <script src="ionic/js/ionic.bundle.js"></script> </body> </html>Ionic项目提供了一个名为ionic.bundle.js的便捷程序包，可帮助您加载基本的Ionic环境。 它包含了：
ionic.js ionic-angular.js angular/angular.js angular/angular-animate.js angular/angular-sanitize.js angular-ui/angular-ui-router.js除了加载ionic.bundle.js ，您还可以单独加载这些文件，对于复杂的应用程序可能更易于管理。 如果使用Bower和wiredep，则将注入单个文件。
现在，您已经在应用程序中包含了Ionic框架及其依赖项，您需要启动它。 因为Ionic是AngularJS的一组扩展，所以加载模式与AngularJS的加载模式相同，这称为引导 AngularJS。 但是，您需要让IBM MobileFirst Platform（MFP）在引导AngularJS之前完成其自身的加载序列，这可以通过指示MFP在就绪时引导AngularJS来完成。 编辑js/main.js文件， wlCommonInit()如下所示调整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的基本模块引导您的应用程序。 您尚未编写应用程序或定义模块app-main，所以现在就这样做。
由于Ionic包含用于侧菜单和导航的强大功能，因此您将创建一个具有三个视图的基本应用程序，并创建侧菜单项以在这些视图之间进行手动切换。 当然，离子具有许多附加功能！
该应用程序将详细介绍一些天文物体-行星和黑洞。 数据将是静态的，但如果需要，您可以使用AngularJS MVC工具添加动态功能。
每个AngularJS应用程序都需要一个应用程序模块。 在引导AngularJS时，您引用了一个名为app-main 。 立即创建该模块。 创建一个名为common/app的目录和一个名为common/app/app-main.js ，并将以下代码行放入其中：
angular.module('app-main', ['ionic']);该行定义了一个具有以下依赖关系的app-main模块：ionic。 因为您已将app-main定义为应用程序模块，所以ionic将作为其依赖项之一自动加载。 通过调整index.html确保正确加载了它：
<body> <!-- pre-existing <body> content here --> <!-- New lines to load Ionic JS bundle --> <script src="ionic/js/ionic.bundle.js"></script> <!-- Load the application --> <script src="app/app-main.js"></script> </body>给您的应用程序一些内容：编辑index.html并用以下代码替换Hello MobileFirst ：
<!--application UI goes here--> <!-- Hello MobileFirst --> <ion-side-menus> <ion-side-menu-content> <!-- Ionic places our views here--> <!-- Configure the global navigation/title bar --> <ion-nav-bar class="bar-dark"> <!-- Default buttons --> <ion-nav-buttons side="primary"> <!-- "Hamburger" menu --> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> <!-- Automatic back button --> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <!-- Contains our views --> <ion-nav-view></ion-nav-view> </ion-side-menu-content> <ion-side-menu side="left"> <!-- Define our left-hand-side menu --> <header class="bar bar-header bar-dark"> <h1 class="title">Amazing Menu!</h1> </header> <ion-content class="has-header"> <ion-list> <ion-item nav-clear menu-close href="#/home" class="item-icon-left"> <i class="icon ion-ios7-home"></i> Home </ion-item> <ion-item class="item-divider"> Amazing Things </ion-item> <ion-item nav-clear menu-close href="#/planets" class="item-icon-left"> <i class="icon ion-planet"></i> Planets </ion-item> <ion-item nav-clear menu-close href="#/blackholes" class="item-icon-left"> <i class="icon ion-funnel"></i> Black Holes </ion-item> </ion-list> </ion-content> </ion-side-menu> </ion-side-menus>您还需要调整MFP默认样式表，以使Ionic正常工作。 编辑common/css/main.css并添加以下规则：
body { position: initial; }第一次运行该应用程序：
mfp build mfp deploy mfp preview如果您使用的是MFP Studio，请构建，部署和预览应用程序。 还没有内容，但是您可以看到，单击时，“汉堡包”按钮将打开侧面菜单。 您也可以滑动菜单以打开和关闭。 这些按钮无效，因此请添加一些内容。
您的全局导航已定义，但是您还没有任何内容。 Ionic在视图中组织其内容，您需要先定义这些视图，然后才能知道如何显示它们。 为此，请编辑common/app/app-main.js文件，并进行如下调整：
angular.module('app-main', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { // Define our views $stateProvider.state('home', { url: "/home", templateUrl: 'views/home.html' // If you wanted some AngularJS controller behaviour... // controller: "HomeCtrl as ctrl" }); $stateProvider.state('planets', { url: "/planets", templateUrl: 'views/planets.html' }); $stateProvider.state('blackholes', { url: '/blackholes', templateUrl: 'views/blackholes.html' }); // Default view to show $urlRouterProvider.otherwise('/home'); });在这里，您已经定义了三个视图。 其中之一（主视图）被指定为默认值。
创建一个名为common/views的文件夹，然后创建一个名为common/views/home.html的文件，然后使用以下内容填充该文件：
<ion-view hide-back-button="true" title="Space!"> <ion-pane> <ion-content overflow-scroll="true"> <div class="list card"> <ion-item class="item-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/NGC_4414_(NASA-med).jpg"> </ion-item> <ion-item>Full of wonderful things. Take a look!</ion-item> </div> <div class="list card"> <ion-item class="item-icon-right item-icon-left" href="#/planets"> <i class="icon ion-planet"></i> Planets <i class="icon ion-ios7-arrow-forward"></i> </ion-item> <ion-item class="item-icon-right item-icon-left" href="#/blackholes"> <i class="icon ion-funnel"></i> Black Holes <i class="icon ion-ios7-arrow-forward"></i> </ion-item> </div> </ion-content> </ion-pane> </ion-view>添加第二个文件common / views / planets.html：
<ion-view title="Planets"> <ion-pane> <ion-content overflow-scroll="true"> <div class="list card"> <ion-item class="item-text-wrap"> <h2>Jupiter</h2> <p>The largest planet in the solar system.</p> </ion-item> <ion-item class="item-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg"> </ion-item> </div> <div class="list card"> <ion-item class="item-text-wrap"> <h2>Saturn</h2> <p>The second largest planet in the solar system.</p> </ion-item> <ion-item class="item-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Saturn_PIA06077.jpg"> </ion-item> </div> </ion-content> </ion-pane> </ion-view>添加第三个文件common / views / blackholes.html：
<ion-view title="Black Holes"> <ion-pane> <ion-content overflow-scroll="true"> <div class="list card"> <ion-item class="item-text-wrap"> <h2>Black Hole A</h2> <p>Simulated view of a black hole (center) in front of the Large Magellanic Cloud.</p> </ion-item> <ion-item class="item-image"> <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/BH_LMC.png"> </ion-item> </div> <div class="list card"> <ion-item class="item-text-wrap"> <h2>Pictures are hard to find</h2> <p>"Well, the thing about a black hole - its main distinguishing feature - is it's black. And the thing about space - the colour of space, your basic space colour - is black. So how are you supposed to see them?" -- Holly, "Red Dwarf"</p> </ion-item> </div> </ion-content> </ion-pane> </ion-view>再次预览您的应用程序：
mfp build mfp deploy mfp preview从本文下载带有工作代码的示例MobileFirst Platform项目 。
在本教程中，您学习了如何使用Ionic通过IBM MobileFirst Platform快速创建混合应用程序。
翻译自: https://www.ibm.com/developerworks/websphere/library/techarticles/1502_maynard/1502_maynard.html
相关资源：完整的Ionic项目实例