Mobile first! Wijmo 5 + Ionic Framework之：Hello World！
Ionic是什么？
Ionic是一個(gè)HTML5框架、免費(fèi)、開(kāi)源，用于幫助生成hybird mobile Apps (混合移動(dòng)應(yīng)用)。
Ionic包含3部分：
-
CSS 樣式：用于渲染W(wǎng)eb頁(yè)面，使得頁(yè)面更接近原生移動(dòng)應(yīng)用 (Native App)。
-
AngularJS：Ionic使用AngularJs的擴(kuò)展指令作為核心框架庫(kù)，同時(shí)AngularJs也加快了開(kāi)發(fā)過(guò)程。
-
Apache Cordova：Ionic使用Apache Cordova編譯為mobile App，并提供了ngCordova庫(kù)--使用AngularJs擴(kuò)展的Cordova API庫(kù)。
Ionic框架目前依然是beta階段(截止本文完稿時(shí)間，最新版：v1.0.0-beta.12 "krypton-koala" · 2014-09-10 · MIT Licensed )，當(dāng)前版本支持iOS6+ 和 Android 4.1+版本，且有計(jì)劃會(huì)支持Windows設(shè)備。對(duì)其他較老的設(shè)備無(wú)版本支持計(jì)劃。
系統(tǒng)必備
本教程會(huì)使用到下面的環(huán)境，請(qǐng)預(yù)先準(zhǔn)備。
-
Git
-
Node.js
-
Bower
-
Apache Cordova
在本教程中，我們使用Chrome用于開(kāi)發(fā)、調(diào)試，同時(shí)，你也可以在Android和IOS設(shè)備上用其他瀏覽器來(lái)調(diào)試。
配置系統(tǒng)環(huán)境，請(qǐng)參考Cordova Platform Guide，按照向?qū)Ъ纯赏瓿伞?/p>
快速入門(mén)
基于上面的系統(tǒng)環(huán)境安裝的NodeJs，我們先安裝Ionic CLI。
下面分別區(qū)分Windows、Linux、Mac的命令行代碼來(lái)安裝：
Windows
npm install --g ionic
Linux和Mac
sudo npm install --g ionic
?
下面通過(guò)命令創(chuàng)建工程
ionic start ExpenseTracker blank && cd ExpenseTracker
上面的命令使用了Ionic的空模板”blank”, 創(chuàng)建了一個(gè)名為“ExpenseTracker”Ionic工程; 創(chuàng)建成功后，我們進(jìn)入新建的ExpenseTracker目錄。?然后我們通過(guò)Ionic命令啟動(dòng)Web站點(diǎn)
ionic serve
該命令會(huì)啟動(dòng)Web服務(wù)，同時(shí)會(huì)使用默認(rèn)瀏覽器啟動(dòng)頁(yè)面。
在Web服務(wù)啟動(dòng)情況下，所做的任何修改，刷新瀏覽器頁(yè)面即可而不用重啟Web服務(wù)，這個(gè)對(duì)于調(diào)試非常方便。
我們會(huì)看到如下的頁(yè)面：
要停止服務(wù)，可在命令行下通過(guò)?結(jié)束服務(wù)。
下面開(kāi)始添加Wijmo 5的源碼到我們創(chuàng)建的工程中，Wijmo5源碼下載地址。先在工程的www/lib 文件夾下，創(chuàng)建一個(gè)Wijmo文件夾，并拷貝Wijmo源碼下Dist的3個(gè)文件夾controls、interop、styles到新創(chuàng)建的Wijmo文件夾下。工程文件夾中的www/lib目錄，包含了該app所要依賴的庫(kù)文件。
Wijmo 5下載后的源碼路徑概圖：
Iconic的目錄瀏覽截圖：
配置好文件目錄結(jié)構(gòu)后，我們就可使用Inonic和Wijmo 5了。在www目錄下，創(chuàng)建一個(gè)index.html，用您習(xí)慣使用的IDE(Visual Studio、Web Storm)進(jìn)行編輯，添加jQuery、Wijmo引用：
<!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>Expense?Tracker?|?Wijmo?5</title><link?href="lib/ionic/css/ionic.css"?rel="stylesheet"><!--?Wijmo?CSS?--><link?href="lib/wijmo/styles/wijmo.css"?rel="stylesheet"><link?href="css/style.css"?rel="stylesheet"><!--?jQuery?-?load?this?script?before?Angular?--><script?src="lib/jQuery/dist/jquery.min.js"></script><!--?ionic/angularjs?js?--><script?src="lib/ionic/js/ionic.bundle.js"></script><!--?Wijmo?Scripts?--><script?src="lib/wijmo/controls/wijmo.min.js"></script><script?src="lib/wijmo/controls/wijmo.input.min.js"></script><script?src="lib/wijmo/controls/wijmo.grid.min.js"></script><script?src="lib/wijmo/controls/wijmo.chart.min.js"></script><script?src="lib/wijmo/interop/angular/wijmo.angular.min.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">Ionic?Blank?Starter</h1></ion-header-bar><ion-content?class="padding"></ion-content></ion-pane></body></html>我們注意到，在index.html 文件中，并未直接引用AngularJs文件，這個(gè)是因?yàn)镮onic（ionic.bundle.js文件）已經(jīng)包含了AngularJs和其依賴，如UI-Router，故不需要直接引用了。
使用Wijmo 5
下面給Index.HTML文件中添加Wijmo 5控件，先需要在www/js/app.js文件中添加Wijmo的模塊依賴——‘wj’。
app.js完整代碼如下：
angular.module('starter',?['ionic',?'wj']) .run(function($ionicPlatform)?{$ionicPlatform.ready(function()?{????//?Hide?the?accessory?bar?by?default?(remove?this?to?show?the?accessory?bar?above?the?keyboard//?for?form?inputs)if(window.cordova?&&?window.cordova.plugins.Keyboard)?{cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);}????if(window.StatusBar)?{StatusBar.styleDefault();}}); })app.js中，已經(jīng)完成對(duì)ionic和wijmo模塊引入，下面則可直接使用Wijmo 5自定義的AngularJs指令了。
在index.html文件的<body>?元素中，共引入了3個(gè)Icon的AngularJS 指令：<ion-pane>,?<ion-header-bar>, 和<ion-content>。
-
<ion-pane>: 該指令是一個(gè)容器用于填充內(nèi)容。
-
<ion-header-bar>: 該指令用于給頁(yè)面添加一個(gè)header。
-
<ion-content>: 該指令創(chuàng)建內(nèi)容區(qū)域，并會(huì)用Ionic的自定義滾動(dòng)視圖代替瀏覽器默認(rèn)的。
在<ion-content>內(nèi)，我們添加<wj-input-number （Wijmo InputNumber控件），完整代碼如下：
<ion-pane><ion-header-bar?class="bar-stable"><h1?class="title">Ionic?Blank?Starter</h1></ion-header-bar><ion-content?class="padding"?ng-init="myValue=1"><wj-input-number?value="myValue"?step="1"?min="-5"?max="5"></wj-input-number></ion-content></ion-pane>運(yùn)行工程，可以看到Wijmo的InputNumber控件已經(jīng)添加到頁(yè)面中，默認(rèn)為1，最大值為5，最小值為-5，增長(zhǎng)步長(zhǎng)為1.
?
總結(jié)
本文，我們創(chuàng)建了Ionic工程并添加Wijmo 5的InputNumber控件，即完成了一個(gè)Hello World！
工程壓縮包下載地址
本文轉(zhuǎn)自 powertoolsteam 51CTO博客，原文鏈接：http://blog.51cto.com/powertoolsteam/1568684，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的Mobile first! Wijmo 5 + Ionic Framework之：Hello World！的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 移动BPM解决方案
- 下一篇： Django 中 cookie的使用