通過Ionic構建一個簡單的混合式(Hybrid)跨平臺移動應用

作者：佚名 2014-12-08 10:03:47

自從混合式移動開發火起來之后，一部分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

下面就是樣例應用的效果：

開始

我們已經有一個不錯的開始了，現在我們來創建一個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> 
<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>

然后我們可以在 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-list ng-controller="ToDoListCtrl"> 
<ion-item ng-repeat="item in toDoListItems"> 
{{item.task}} 
</ion-item> 
</ion-list>

在上面的代碼中，我們添加了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>

現在確認一下，在上面的操作中，我們在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和添加條目到數組的方法。

運行

好了，萬事俱備，虛擬機走起，看起來還不錯吧。

總結

在這篇文章中，我們了解了使用Ionic的一個大概流程。你可以在這里看到詳細的代碼。如果想深入學習，還是應該多了解一下 AngularJS。

參考：大家有興趣的話，可以閱讀這套AngularJS的基礎開發教程：AngularJS開發框架實用編程入門之一

via sitepoint

責任編輯：閆佳明來源： gbtags