大佬教程收集整理的这篇文章主要介绍了Mobile first! Wijmo 5 + Ionic Framework之：Hello World！，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
本教程中，我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。
@H_618_2@Ionic是什么？Ionic是一个HTML5框架、免费、开源，用于帮助生成hybird mobile Apps (混合移动应用)。
Ionic包含3部分：
Ionic框架目前依然是beta阶段(截止本文完稿时间，最新版：v1.0.0-beta.12 "krypton-koala" · 2014-09-10 · MIT licensed )，当前版本支持iOS6+ 和 AndroID 4.1+版本，且有计划会支持Windows设备。对其他较老的设备无版本支持计划。
@H_618_2@系统必备本教程会使用到下面的环境，请预先准备。
在本教程中，我们使用Chrome用于开发、调试，同时，你也可以在AndroiD和IOS设备上用其他浏览器来调试。
配置系统环境，请参考Cordova Platform Guide，按照向导即可完成。
@H_618_2@快速入门基于上面的系统环境安装的NodeJs，我们先安装Ionic CLI。
下面分别区分windows、linux、Mac的命令行代码来安装：
windows
linux和Mac
下面通过命令创建工程
该命令会启动Web服务，同时会使用默认浏览器启动页面。
在Web服务启动情况下，所做的任何修改，刷新浏览器页面即可而不用重启Web服务，这个对于调试非常方便。
我们会看到如下的页面：
要停止服务，可在命令行下通过
下面开始添加Wijmo 5的源码到我们创建的工程中，Wijmo5源码下载地址。先在工程的www/lib 文件夹下，创建一个Wijmo文件夹，并拷贝Wijmo源码下dist的3个文件夹controls、interop、styles到新创建的Wijmo文件夹下。工程文件夹中的www/lib目录，包含了该app所要依赖的库文件。
Wijmo 5下载后的源码路径概图：
Iconic的目录浏览截图：
@H_607_98@
配置好文件目录结构后，我们就可使用Inonic和Wijmo 5了。在www目录下，创建一个index.HTML，用您习惯使用的IDE(Visual studio、Web Storm)进行编辑，添加jquery、Wijmo引用：
<!DOCTYPE HTML> <HTML> head> @H_555_114@meta charset="utf-8"name="vIEwport" content="initial-scale=1,maximum-scale=1,user-scalable=no,wIDth=device-wIDth"title>Expense Tracker | Wijmo 5</link href="lib/ionic/CSS/ionic.CSS" rel="stylesheet"> <!-- Wijmo CSS --> ="lib/wijmo/styles/wijmo.CSS"="CSS/style.CSS" jquery - load this script before Angular script src="lib/jquery/dist/jquery.min.Js"></script ionic/angularJs Js ="lib/ionic/Js/ionic.bundle.Js" Wijmo Scripts ="lib/wijmo/controls/wijmo.min.Js"="lib/wijmo/controls/wijmo.input.min.Js"="lib/wijmo/controls/wijmo.grID.min.Js"="lib/wijmo/controls/wijmo.chart.min.Js"="lib/wijmo/interop/angular/wijmo.angular.min.Js" cordova script (this will be a 404 during development) ="cordova.Js" your app's Js ="Js/app.Js"body ng-app="starter"ion-pane> ion-header-bar class="bar-stable"> h1 ="title">Ionic Blank Starterh1ion-header-barion-content ="padding"ion-contentbody>
下面给Index.HTML文件中添加Wijmo 5控件，先需要在www/Js/app.Js文件中添加Wijmo的模块依赖——‘wj’。
app.Js完整代码如下：
angular.module('starter',['ionic','wj'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(() {
// 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.
@H_618_2@总结
本文，我们创建了Ionic工程并添加Wijmo 5的inputnumber控件，即完成了一个Hello World！
工程压缩包下载地址
以上是大佬教程为你收集整理的Mobile first! Wijmo 5 + Ionic Framework之：Hello World！全部内容，希望文章能够帮你解决Mobile first! Wijmo 5 + Ionic Framework之：Hello World！所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。