自从混合式移动开发火起来之后，一部分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安装完成之后，你可以尝试开始创建一个工程：
npm install -g cordova ionic进入项目目录，添加ionic平台，创建应用，在虚拟机中运行，成为高富帅……
cd myIonicApp ionic platform add android ionic build android ionic emulate android下面就是样例应用的效果：
我们已经有一个不错的开始了，现在我们来创建一个ToDo列表的应用，我们从空白模板开始：
ionic start myToDoList blank如果你进入到项目目录，你会看到AngularJS文件，这是我们添加相关代码的地方。
首先，你需要在应用中添加一个list，我们直接用 ion-list ，添加ion-list到www/index.html：
<ion-list> <ion-item>Scuba Diving</ion-item> <ion-item>Climb Mount Everest</ion-item> </ion-list>之后我们看一看添加ion-list之后我们的html文件是什么样的：
<!DOCTYPE html> <html> <head> <metacharset="utf-8"> <metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <linkhref="lib/ionic/css/ionic.css"rel="stylesheet"> <linkhref="css/style.css"rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <scriptsrc="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <scriptsrc="cordova.js"></script> <!-- your app's js --> <scriptsrc="js/app.js"></script> </head> <bodyng-app="starter"> <ion-pane> <ion-header-barclass="bar-stable"> <h1class="title">My ToDo List</h1> </ion-header-bar> <ion-content> <ion-list> <ion-item>Scuba Diving</ion-item> <ion-item>Climb Mount Everest</ion-item> </ion-list> </ion-content> </ion-pane> </body> </html>然后我们可以在 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中：
<ion-listng-controller="ToDoListCtrl"> <ion-itemng-repeat="item in toDoListItems"> {{item.task}} </ion-item> </ion-list>在上面的代码中，我们添加了bar-positive来给应用加颜色。你可以有同样添加很多不同的header。这里有详细的文档： here。
我们现在需要在index.html中添加一个button来触发事件：
<scriptid="modal.html"type="text/ng-template"> <div class="modal"> <div class="bar bar-header bar-calm"> <button class="button" ng-click="closeModal()">back</button> <h1 class="title">Add Item</h1> </div> <br></br> <br></br> <form ng-submit="AddItem(data)"> <div class="list"> <div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="ToDo Item" ng-model="data.newItem"> </label> </div> <button class="button button-block button-positive" type="submit"> AddItem </button> </div> </form> </div> </script>现在确认一下，在上面的操作中，我们在modal中添加了一个header，一个input box和一个button。
我们同样有需要一个回退的Button在header中，它用来触发 closeModal() 功能。
现在我们开始绑定 ionic modal 到我们的 controller中，我们通过如下的方法把 $ionicModal 注入到controller中：
angular.module('starter.controllers',[]) .controller('ToDoListCtrl',function($scope, $ionicModal){ // array list which will contain the items added $scope.toDoListItems =[]; //init the modal $ionicModal.fromTemplateUrl('modal.html',{ scope: $scope, animation:'slide-in-up' }).then(function(modal){ $scope.modal = modal; }); // function to open the modal $scope.openModal =function(){ $scope.modal.show(); }; // function to close the modal $scope.closeModal =function(){ $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy',function(){ $scope.modal.remove(); }); //function to add items to the existing list $scope.AddItem=function(data){ $scope.toDoListItems.push({ task: data.newItem, status:'not done' }); data.newItem =''; $scope.closeModal(); }; });我们在上面的代码中使用了 .fromTemlateUrl 来加载html的内容，然后在初始化的时候通过两个选项定义了$scope和animation的类型。
当然我们也定义了打开、关闭moda和添加条目到数组的方法。
好了，万事俱备，虚拟机走起，看起来还不错吧。
原文发布时间：2014-12-08
本文来自云栖合作伙伴“linux中国”
相关资源：敏捷开发V1.0.pptx