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

2023-03-01

list item ion

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

介绍

自从混合式移动开发火起来之后，一部分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 
1.

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

ionic start myIonicApp tabs 
1.

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

cd myIonicApp 
ionic platform add android 
ionic build android 
ionic emulate android 
1.
2.
3.
4.

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

开始

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

ionic start myToDoList blank 
1.

如果你进入到项目目录，你会看到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> 
1.
2.
3.
4.

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

<!DOCTYPE html> 
<html> 
  
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title></title> 
  
<link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
<link href="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 --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 
  
<!-- cordova script (this will be a 404 during development) --> 
<script src="cordova.js"></script> 
  
<!-- your app's js --> 
<script src="js/app.js"></script> 
</head> 
  
<body ng-app="starter"> 
  
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="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> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.

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

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

在上面的代码中，我们定义了一个叫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(); 
} 
}); 
}) 
1.
2.
3.
4.
5.
6.
7.
8.

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

.controller('ToDoListCtrl', function ($scope) { 
  
$scope.toDoListItems = [{ 
task: 'Scuba Diving', 
status: 'not done' 
}, { 
task: 'Climb Everest', 
status: 'not done' 
}] 
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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

<ion-list ng-controller="ToDoListCtrl"> 
<ion-item ng-repeat="item in toDoListItems"> 
{{item.task}} 
</ion-item> 
</ion-list> 
1.
2.
3.
4.
5.

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

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

<script id="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"> 
Add Item 
</button> 
</div> 
</form> 
  
</div> 
</script> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.

现在确认一下，在上面的操作中，我们在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(); 
}; 
  
}); 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.