通过Ionic构建一个简单的混合（Hybrid）跨平台移动应用

简介自从混合移动开发流行起来，一些web工程师开始转向移动开发。混合移动开发技术允许网络工程师在各种平台上开发移动应用程序，而无需学习每个平台的原生编程语言。现在有很多混合开发平台比如PhoneGap、Titanium来帮助我们进行混合编程。今天我们将介绍一个更新的混合移动开发平台Ionic。Ionic是一个先进的HTML5混合移动应用程序开发框架和开源前端框架。Ionic应用程序基于Cordova，因此也可以将Cordova相关的工具内置到应用程序中。Lonic专注于视觉效果和用户体验，因此使用AngularJS来构建各种炫酷的效果。安装要开始使用Ionic进行开发，您需要安装Node.js。然后根据自己的开发环境安装对应的Android或者IOS平台。在本文中，我们将创建一个Android应用程序。接下来，您需要为Cordova和Ionic安装命令行工具。操作如下：npminstall-gcordovaionic安装完成后可以尝试开始创建项目：ionicstartmyIonicApptabs进入项目目录，添加ionic平台，创建应用，在虚拟机中运行。有钱有帅...cdmyIonicAppionicplatformaddandroidionicbuildandroidionemulateandroid下面是示例应用的效果：AngularJS文件，这是我们添加相关代码的地方。创建并显示列表首先需要在应用中添加一个列表，我们直接使用ion-list，在www/index.html中添加ion-list：ScubaDiving在ClimbMountEverest之后，我们来看一下我们的html文件在加入ion-list之后是什么样子的：MyToDoList水肺潜水ClimbMountEverest然后我们可以在www/js在/中创建一个controllers.js文件来定义一个新的cntroller。我们称它为ToDoListCtrl。这是controllers.js文件的内容：angular.module('starter.controllers',[]).controller('ToDoListCtrl',function($scope){});在上面的代码中，我们定义了一个名为starter的模块和一个名为ToDoListCtrl的Controller。然后我们将这个模块添加到我们的应用程序中。打开www/js/app.js，添加模块：angular.module('starter',['ionic','starter.controllers']).run(function($ionicPlatform){$ionicPlatform.ready(function(){if(window.StatusBar){StatusBar.styleDefault();}});})我们继续，定义一个$scope来承载ToDo列表的项目，在ToDoListCtrl中声明一个新的$scope变量，如下：.控制器('ToDoListCtrl',function($scope){$scope.toDoListItems=[{task:'ScubaDiving',status:'notdone'},{task:'ClimbEverest',status:'notdone'}]});将控制器.js添加到index.html：{{item.task}}在上面的代码中，我们添加了bar-positive来为应用程序着色。您也可以添加许多不同的标头。这里有详细的文档：这里。我们现在需要在index.html中添加一个按钮来触发事件：现在确认一下，在上面的操作中，我们在modal中添加了一个header，一个输入框和一个按钮。我们还需要在标题中有一个后备按钮，用于触发closeModal()函数。现在我们开始将离子模式绑定到我们的控制器。我们通过以下方法将$ionicModal注入到控制器中：angular.module('starter.controllers',[]).controller('ToDoListCtrl',function($scope,$ionicModal){//arraylistwhichwhichwillcontaintheitemsadded$scope.toDoListItems=[];//initthemodal$ionicModal.fromTemplateUrl('modal.html',{scope:$scope,animation:'slide-in-up'}).then(函数(模态){$scope.modal=modal;});//functiontoopenthemodal$scope.openModal=function(){$scope.modal.show();};//functiontoclosethemodal$scope.closeModal=function(){$scope.modal.hide();};//Cleanupthemodalwhenwe'redonewithit!$scope.$on('$destroy',function(){$scope.modal.remove();});//函数将项目添加到现有列表$scope.AddItem=function(data){$scope.toDoListItems.push({task:data.newItem,status:'notdone'});data.newItem='';$scope.closeModal();};});我们在上面的代码中使用了.fromTemlateUrl来加载html的内容，然后在初始化的时候通过两个option定义了$scope和animation的类型。当然我们也定义了打开和关闭moda以及向数组添加项目的方法。运行良好，万事俱备，虚拟机启动，看起来还不错。总结在本文中，我们看到了使用Ionic的一般流程。你可以在这里看到详细的代码。如果你想了解更多，你应该了解更多关于AngularJS的知识。参考：有兴趣的可以看看这套AngularJS开发基础教程：AngularJS开发框架实战编程介绍之一viasitepoint