通过Ionic构建一个简单的混合式(Hybrid)跨平台移动应用
介绍
自从混合式移动开发火起来之后,一部分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中国”