Mobile first! Wijmo 5 + Ionic Framework之: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设备。对其他较老的设备无版本支持计划。
系统必备
本教程会使用到下面的环境,请预先准备。
Git
Node.js
Bower
Apache Cordova
在本教程中,我们使用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!
工程压缩包下载地址
本文转自 powertoolsteam 51CTO博客,原文链接:http://blog.51cto.com/powertoolsteam/1568684,如需转载请自行联系原作者
Mobile first! Wijmo 5 + Ionic Framework之:Hello World!相关推荐
- 170多个Ionic Framework学习资源(转载)
在Ionic官网找到的学习资源:http://blog.ionic.io/learning-ionic-in-your-living-room/ 网上的文章比较多,但是很多时候我们很难找到自己需要的. ...
- 【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 5官方文档翻译
Ionic Framework 5官方文档翻译 入门 Ionic Framework 5特点 Ionic Framework是什么? 核心概念 构建你的第一个应用 先进的Web应用 浏览器支持 版本控 ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-3 {面板切换}
编程的快乐和乐趣,来自于能成功运行程序并运用到项目中,会在后面案例,实际运用到项目当中与数据更新一起说明 从面板切换开始,请看效果图和代码,这只是一个面板切换的效果 Index HTML Code & ...
- 快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}
当然,即使努力了也没做成,至少你也有收获,因为你知道自己以后可以避开这个坑. 这是一个"IO"开关,请看效果图和代码,下一节,说明,数据交换 Index HTML Code < ...
- Gesture APIs-Furthering Windows Mobile 6.5 Touch Gesture Framework
Windows mobile 6.5开发者工具包在6月初就已经面世了.它给广大技术爱好者带来的新特性包括Widgets和Gesture API.在Widgets应用上,已经有开发人员进行了探索和尝试, ...
- Windows Mobile, WinCe使用 .NET Compact Framework 进行3G和RAS应用的开发
在.NET Compact Framework下开发3G应用可以有两个options,1:AT command, 2:RAS.其实RAS最终也是通过AT command来管理3G设备,RAS屏蔽了技术 ...
- Ionic Framework学习(一)
1.安装 (1)安装nodejs (2)新建文件夹,shift+右键,打开命令行:npm install -g ionic (3)Start an App:ionic start myApp tabs ...
- 一些很有用的技术工具
前端工具 codyhouse,有很多的demo,使用起来非常的方便,CodyHouse的github. jqueryscript,很多优秀的js插件都可以在上面找到. shell oh-my-zsh, ...
最新文章
- centos打架django + mysql环境
- git pull时冲突的几种解决方式
- mysql数据库管理维护_(转)Mysql数据库管理 表的维护
- 长三角,也开始“东北化”了
- Oracle使用rman备份数据库时出现cannot reclaim的错误
- 同义反复,相似的表达
- 【二分法】计蒜客:求方程的近似解
- SpringMVC中的父子容器关系
- IOS中如何显示带有html标签的富文本
- js 数字不足位数补0
- TypeScript 从零实现 axios 0x0
- “数据分析师”招聘信息的数据分析
- 基于画布的手绘风格图形库 Rough.js
- 利用matlab画地图
- c语言 测试有哪种天赋,c语言是指什么
- 奥维查看行政边界_全国乡镇行政区划数据乡镇边界数据查询获取方式
- 桌面文件丢失如何找回?这两个方法值得一试
- 程序员计算机常用快捷键,19个程序员都爱不释手的键盘快捷键,快来看看你知道几个又用过几个吧!...
- 热门在线项目管理工具
- 从0开始搭建一个疫情地图小程序——小程序篇
热门文章
- Guassdb T 在EulerOS系统安装说明
- mysql的基本介绍简书_mysql 简介
- json解析 子类和父类同名属性如何赋值_想学变量的解构赋值?看完这一篇就够了...
- anaconda新建不同python版本环境_解决 Anaconda 与 ROS 冲突(python 版本与 opencv)
- easyexcel 设置标题_EasyExcel,让 excel 导入导出更加简单
- Linux脚本实战之猜数字
- Python基础数据类型之set集合
- java mp3 暂停,Java MP3播放器 - 使用jLayer播放,暂停和搜索不能正常工作
- sqlyog怎么连接mysql_Mysql数据库连接过高,怎么快速杀掉连接
- Eclipse 安装配置指南