出处:http://mobile.51cto.com/web-459216.htm


介绍

自从混合式移动开发火起来之后,一部分Web工程师开始转战移动开发。混合式移动开发技术让Web工程师可以开发出各个平台的移动应用,而且不需要 学习各个平台的原生编程语言。现在已经有很多诸如PhoneGap和Titanium这些混合式开发平台来帮助我们进行混合式编程,今天我们要介绍一是一个相比之下更新的混合式移动开发平台Ionic。

Ionic是一个高级HTML5混合式移动应用开发框架,同时也是一个开源的前端框架。Ionic应用是基于Cordova的, 所以Cordova相关的工具也都可以构建到应用中去,Lonic注重的是视觉效果和用户体验,所以使用了 AngularJS来构建很各种酷的效果。

安装

想要开始Ionic开发,你需要先安装 Node.js。

然后根据你的开发环境来安装相应的 Android 或 IOS 平台,在这篇文章中,我们会创建一个Android应用。

接下来你要安装一个 Cordova 和 Ionic的命令行工具,操作如下:

npm install -g cordova ionic

安装完成之后,你可以尝试开始创建一个工程:

ionic start myIonicApp tabs

进入项目目录,添加ionic平台,创建应用,在虚拟机中运行,成为高富帅……

cd myIonicApp ionic platform add android ionic build android ionic emulate android

下面就是样例应用的效果:

通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用_第1张图片

开始

我们已经有一个不错的开始了,现在我们来创建一个ToDo列表的应用,我们从空白模板开始:

ionic start myToDoList blank

如果你进入到项目目录,你会看到AngularJS文件,这是我们添加相关代码的地方。

创建和展示列表

首先,你需要在应用中添加一个list,我们直接用 ion-list ,添加ion-list到www/index.html:

 Scuba Diving Climb Mount Everest 

之后我们看一看添加ion-list之后我们的html文件是什么样的:

                                   My ToDo List    Scuba Diving Climb Mount Everest       

然后我们可以在 www/js/中创建一个controllers.js文件,来定义一个新的cntroller,我们暂且叫它ToDoListCtrl。这是controllers.js文件的内容:

angular.module('starter.controllers', [])  .controller('ToDoListCtrl', function ($scope) {  });

在上面的代码中,我们定义了一个叫starter的module和一个叫作calledToDoListCtrl的Controler。

然后我们就要把这个module加到我们的应用中了。打开www/js/app.js ,然后把module添加进去:

angular.module('starter', ['ionic', 'starter.controllers']) .run(function ($ionicPlatform) { $ionicPlatform.ready(function () { if (window.StatusBar) { StatusBar.styleDefault(); } }); })

我们继续,定义一个$scope来携带ToDo list的条目,ToDoListCtrl中声明一个新的$scope变量,如下: 

.controller('ToDoListCtrl', function ($scope) {   $scope.toDoListItems = [{ task: 'Scuba Diving', status: 'not done' }, { task: 'Climb Everest', status: 'not done' }] });

把controllers.js添加到index.html中:

  `item`.`task`  

在上面的代码中,我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档: here。

我们现在需要在index.html中添加一个button来触发事件:

     back Add Item