Mobile first! Wijmo 5 + Ionic Framework之:Hello World!
本教程中,我们用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!
工程压缩包下载地址
Mobile first! Wijmo 5 + Ionic Framework之:Hello World!的更多相关文章
- Mobile first! Wijmo 5 + Ionic Framework之:费用跟踪 App
费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mobile first! Wijmo 5 + Ionic Framework ...
- Wijmo 5 + Ionic Framework之:费用跟踪 App
Wijmo 5 + Ionic Framework之:费用跟踪 App 费用跟踪应用采用了Wijmo5和Ionic Framework创建,目的是构建一个hybird app. 我们基于<Mob ...
- Wijmo 5 + Ionic Framework之:Hello World!
Wijmo 5 + Ionic Framework之:Hello World! 本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World. ...
- 170多个Ionic Framework学习资源(转载)
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
- 一:Ionic Framework初体验
因项目关系,需要开发一个平板使用的应用程序,刚开始以为需要使用Andriod,后来经理提供了一个解决方案,Ionic Framework https://ionicframework.com/ 第一步 ...
- 案例:1 Ionic Framework+AngularJS+ASP.NET MVC WebApi Jsonp 移动开发
落叶的庭院扫的一干二净之后,还要轻轻把树摇一下,抖落几片叶子,这才是Wabi Sabi的境界. 介绍:Ionic是移动框架,angularjs这就不用说了,ASP.Net MVC WebApi提供数据 ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-1{创建APP项目}
快乐学习 Ionic Framework+PhoneGap 手册1-1 * 前提必须安装 Node.js,安装PhoneGap,搭建Android开发环境,建议使用真机调试 {1.1}= 创建APP项 ...
- 【Ionic】---Using Local Notifications In Your Ionic Framework App
Using Local Notifications In Your Ionic Framework App 配置好ng-cordova先 <script src="lib/ngCord ...
- Ionic Framework 4 介绍
Ionic Framework 4是一个开源UI工具包,用于使用Web技术(HTML,CSS和JavaScript)构建高性能的高质量移动和桌面应用程序.Ionic Framework专注于前端用户体 ...
随机推荐
- 【kAri OJ620】winoros的树
时间限制 1000 ms 内存限制 65536 KB 题目描述 winoros 是一个热爱大自然的萌妹子,在植树节的时候,她打算带着集训的朋友们一起去种树. 到了种树的地方,学校给了她们四个不可弯曲. ...
- Php学习之SESSION反序列化机制
在php.ini中存在三项配置项:session.save_path="" --设置session的存储路径session.save_handler="" -- ...
- MAC Java 开发环境配置
JDK Oracle官网 -> Download -> Java for Developers -> Java SE Downloads -> Java Platform (J ...
- 宿主机为linux、windows分别实现VMware三种方式上网(转)
一.VMware三种方式工作原理1 Host-only连接方式 让虚机具有与宿主机不同的各自独立IP地址,但与宿主机位于不同网段,同时为宿主主机新增一个IP地址,且保证该IP地址与各虚机IP地址位于 ...
- jquery 使用方法<转载>
jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...
- Hbase can't get locations问题
2016-11-08 22:21:16,875 ERROR [main-SendThread(ht-lxfx-01:24002)] client.ZooKeeperSaslClient: An err ...
- (转)MFC的一些宏的整理 (DECLARE_DYNCREATE/IMPLEMENT_DYNCREATE)
很早看了MFC的一些宏的实现,什么RUNTIME_CLASS, DECLARE_DYNAMIC, DECLARE_DYNCREATE,IMPLEMENT_DYNCREATE, etc,看了就烦,现在整 ...
- Change ICON of MFC Application and Dialog
Change ICON of MFC Application and Dialoghttp://www.codeproject.com/Tips/406870/Change-ICON-of-MFC-A ...
- gdb调试多进程和多线程命令
gdb调试多进程和多线程命令 来源:http://blog.csdn.net/pbymw8iwm/article/details/7876797 1. 默认设置下,在调试多进程程序时GDB只会调试主 ...
- 用纯原生js实现jquery的ready函数(两种实现)
第一种实现方式: var dom = new function() { var dom = []; dom.isReady = false; dom.isFunction = function(obj ...