本教程中，我們用Wijmo 5 和 Ionic Framework實現一個Mobile的工程:Hello World。
Ionic是什么？
Ionic是一個HTML5框架、免費、開源，用於幫助生成hybird mobile Apps (混合移動應用)。
Ionic包含3部分：
- CSS 樣式：用於渲染Web頁面，使得頁面更接近原生移動應用 (Native App)。
- AngularJS：Ionic使用AngularJs的擴展指令作為核心框架庫，同時AngularJs也加快了開發過程。
- Apache Cordova：Ionic使用Apache Cordova編譯為mobile App，並提供了ngCordova庫--使用AngularJs擴展的Cordova API庫。
Ionic框架目前依然是beta階段(截止本文完稿時間，最新版：v1.0.0-beta.12 "krypton-koala" · 2014-09-10 · MIT Licensed )，當前版本支持iOS6+ 和 Android 4.1+版本，且有計划會支持Windows設備。對其他較老的設備無版本支持計划。
系統必備
本教程會使用到下面的環境，請預先准備。
在本教程中，我們使用Chrome用於開發、調試，同時，你也可以在Android和IOS設備上用其他瀏覽器來調試。
配置系統環境，請參考Cordova Platform Guide，按照向導即可完成。
快速入門
基於上面的系統環境安裝的NodeJs，我們先安裝Ionic CLI。
下面分別區分Windows、Linux、Mac的命令行代碼來安裝：
Windows
npm install --g ionic
Linux和Mac
sudo npm install --g ionic
下面通過命令創建工程
ionic start ExpenseTracker blank && cd ExpenseTracker
上面的命令使用了Ionic的空模板”blank”, 創建了一個名為“ExpenseTracker”Ionic工程; 創建成功后，我們進入新建的ExpenseTracker目錄。 然后我們通過Ionic命令啟動Web站點
ionic serve
該命令會啟動Web服務，同時會使用默認瀏覽器啟動頁面。
在Web服務啟動情況下，所做的任何修改，刷新瀏覽器頁面即可而不用重啟Web服務，這個對於調試非常方便。
我們會看到如下的頁面：
要停止服務，可在命令行下通過 
結束服務。
下面開始添加Wijmo 5的源碼到我們創建的工程中，Wijmo5源碼下載地址。先在工程的www/lib 文件夾下，創建一個Wijmo文件夾，並拷貝Wijmo源碼下Dist的3個文件夾controls、interop、styles到新創建的Wijmo文件夾下。工程文件夾中的www/lib目錄，包含了該app所要依賴的庫文件。
Wijmo 5下載后的源碼路徑概圖：
Iconic的目錄瀏覽截圖：
配置好文件目錄結構后，我們就可使用Inonic和Wijmo 5了。在www目錄下，創建一個index.html，用您習慣使用的IDE(Visual Studio、Web Storm)進行編輯，添加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文件，這個是因為Ionic（ionic.bundle.js文件）已經包含了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中，已經完成對ionic和wijmo模塊引入，下面則可直接使用Wijmo 5自定義的AngularJs指令了。
在index.html文件的<body> 元素中，共引入了3個Icon的AngularJS 指令：<ion-pane>, <ion-header-bar>, 和<ion-content>。
<ion-pane>: 該指令是一個容器用於填充內容。<ion-header-bar>: 該指令用於給頁面添加一個header。<ion-content>: 該指令創建內容區域，並會用Ionic的自定義滾動視圖代替瀏覽器默認的。
在<ion-content>內，我們添加<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>
運行工程，可以看到Wijmo的InputNumber控件已經添加到頁面中，默認為1，最大值為5，最小值為-5，增長步長為1.
總結
本文，我們創建了Ionic工程並添加Wijmo 5的InputNumber控件，即完成了一個Hello World！
工程壓縮包下載地址