通過Ionic構(gòu)建一個(gè)簡(jiǎn)單的混合式(Hybrid)跨平臺(tái)移動(dòng)應(yīng)用
介紹
自從混合式移動(dòng)開發(fā)火起來之后，一部分Web工程師開始轉(zhuǎn)戰(zhàn)移動(dòng)開發(fā)?；旌鲜揭苿?dòng)開發(fā)技術(shù)讓W(xué)eb工程師可以開發(fā)出各個(gè)平臺(tái)的移動(dòng)應(yīng)用，而且不需要 學(xué)習(xí)各個(gè)平臺(tái)的原生編程語言。現(xiàn)在已經(jīng)有很多諸如PhoneGap和Titanium這些混合式開發(fā)平臺(tái)來幫助我們進(jìn)行混合式編程，今天我們要介紹一是一個(gè)相比之下更新的混合式移動(dòng)開發(fā)平臺(tái)Ionic。
Ionic是一個(gè)高級(jí)HTML5混合式移動(dòng)應(yīng)用開發(fā)框架，同時(shí)也是一個(gè)開源的前端框架。Ionic應(yīng)用是基于Cordova的, 所以Cordova相關(guān)的工具也都可以構(gòu)建到應(yīng)用中去，Lonic注重的是視覺效果和用戶體驗(yàn)，所以使用了 AngularJS來構(gòu)建很各種酷的效果。
安裝
想要開始Ionic開發(fā)，你需要先安裝 Node.js。
然后根據(jù)你的開發(fā)環(huán)境來安裝相應(yīng)的 Android 或 IOS 平臺(tái)，在這篇文章中，我們會(huì)創(chuàng)建一個(gè)Android應(yīng)用。
接下來你要安裝一個(gè) Cordova 和 Ionic的命令行工具，操作如下：
- npm install -g cordova ionic
安裝完成之后，你可以嘗試開始創(chuàng)建一個(gè)工程：
- ionic start myIonicApp tabs
進(jìn)入項(xiàng)目目錄，添加ionic平臺(tái)，創(chuàng)建應(yīng)用，在虛擬機(jī)中運(yùn)行，成為高富帥……
- cd myIonicApp
- ionic platform add android
- ionic build android
- ionic emulate android
下面就是樣例應(yīng)用的效果：
開始
我們已經(jīng)有一個(gè)不錯(cuò)的開始了，現(xiàn)在我們來創(chuàng)建一個(gè)ToDo列表的應(yīng)用，我們從空白模板開始：
- ionic start myToDoList blank
如果你進(jìn)入到項(xiàng)目目錄，你會(huì)看到AngularJS文件，這是我們添加相關(guān)代碼的地方。
創(chuàng)建和展示列表
首先，你需要在應(yīng)用中添加一個(gè)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/中創(chuàng)建一個(gè)controllers.js文件，來定義一個(gè)新的cntroller，我們暫且叫它ToDoListCtrl。這是controllers.js文件的內(nèi)容：
- angular.module('starter.controllers', [])
- .controller('ToDoListCtrl', function ($scope) {
- });
在上面的代碼中，我們定義了一個(gè)叫starter的module和一個(gè)叫作calledToDoListCtrl的Controler。
然后我們就要把這個(gè)module加到我們的應(yīng)用中了。打開www/js/app.js ，然后把module添加進(jìn)去：
- angular.module('starter', ['ionic', 'starter.controllers'])
- .run(function ($ionicPlatform) {
- $ionicPlatform.ready(function () {
- if (window.StatusBar) {
- StatusBar.styleDefault();
- }
- });
- })
我們繼續(xù)，定義一個(gè)$scope來攜帶ToDo list的條目，ToDoListCtrl中聲明一個(gè)新的$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來給應(yīng)用加顏色。你可以有同樣添加很多不同的header。這里有詳細(xì)的文檔： here。
我們現(xiàn)在需要在index.html中添加一個(gè)button來觸發(fā)事件：
- <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>
現(xiàn)在確認(rèn)一下，在上面的操作中，我們?cè)趍odal中添加了一個(gè)header，一個(gè)input box和一個(gè)button。
我們同樣有需要一個(gè)回退的Button在header中，它用來觸發(fā) closeModal() 功能。
現(xiàn)在我們開始綁定 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();
- };
- });
我們?cè)谏厦娴拇a中使用了 .fromTemlateUrl 來加載html的內(nèi)容，然后在初始化的時(shí)候通過兩個(gè)選項(xiàng)定義了$scope和animation的類型。
當(dāng)然我們也定義了打開、關(guān)閉moda和添加條目到數(shù)組的方法。
運(yùn)行
好了，萬事俱備，虛擬機(jī)走起，看起來還不錯(cuò)吧。
總結(jié)
在這篇文章中，我們了解了使用Ionic的一個(gè)大概流程。你可以在這里看到詳細(xì)的代碼。如果想深入學(xué)習(xí)，還是應(yīng)該多了解一下 AngularJS。
參考：大家有興趣的話，可以閱讀這套AngularJS的基礎(chǔ)開發(fā)教程：AngularJS開發(fā)框架實(shí)用編程入門之一
via sitepoint
