文档章节

ionic入门之AngularJS扩展

笔阁
 笔阁
发布于 2015/05/04 15:00
字数 633
阅读 8432
收藏 0

ionic

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:

ionic

ionic主要包括三个部分:

  • CSS框架 - 提供原生App质感的CSS样式模拟。ionic这部分的实现使用了ionicons图标样式库。

  • JavaScript框架 - ionic基于AngularJS基础框架开发,遵循AngularJS的框架约束;主要提供了适应移动端UI的 AngularJS的扩展,主要包括指令和服务。此外,ionic使用AngularUI Router来实现前端路由。

  • 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。

由于ionic使用了HTML5和CSS3的一些新规范,所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用,有时会发生莫名其妙的问题。

ionic.js : 指令

ionic.js对AngularJS进行了扩展,它的主要贡献是将移动端开发中常见 的UI组件抽象成AngularJS的指令,便于我们可以在HTML开发中快速应用。

比如,我们使用ion-tabs指令就可以实现一个功能完备的选项卡:

  1. <ion-tabs>

  2. <ion-tab title="首页">...</ion-tab>

  3. <ion-tab title="交流">...</ion-tab>

  4. <ion-tab title="设置">...</ion-tab>

  5. </ion-tabs>

ionic.js实现的指令基本覆盖了移动端开发所需,下面的图可以帮助我们快速简要地了解 ionic.js的能力:

directives

ionic.js : 路由管理

在单页应用(Single Page App)中,路由的管理是很重要的环节。ionic.js 没有使用AngularJS内置的ng-route模块,而是选择了AngularUI项目 的ui-router模块。

ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着 状态的切换。在不同的状态下,ionic.js渲染对应的子视图(动态加载的HTML片段) 就实现了路由导航的功能:

fsm

ionic.js : 手势支持

考虑到移动应用交互的特点,ionic.js也提供了手势操作的事件,比如:

  • hold - 长按

  • tap - 敲击

  • drag - 拖动

  • swipe - 滑动

  • ...

swipe

参考资料:http://www.hubwiz.com/course/55010505e564e5172c0b9405/

© 著作权归作者所有

笔阁
粉丝 223
博文 218
码字总数 492488
作品 0
海淀
程序员
私信 提问
加载中

评论(4)

笔阁
笔阁 博主

引用来自“小翠翠cherryLee”的评论

不错
多谢!!!!
小翠翠cherryLee
小翠翠cherryLee
不错
笔阁
笔阁 博主

引用来自“上帝爱开源”的评论

看着你的网站做项目啊,顶你!
多谢支持!!!!
上帝爱开源
上帝爱开源
看着你的网站做项目啊,顶你!
5大最流行手机webAPP框架之Ionic

Ionic 框架 Ionic框架是我们前五个web app框架中最年轻的,阿尔法版本是在2013年11月下旬发布的。Ionic是建立在google的AngularJS框架上的,它利用AngularJS来提供应用结构,而它本身更关注的是...

大培哥
2015/10/31
6.1K
0
Mobile first! Wijmo 5 + Ionic Framework之:Hello Wor

本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ioni...

葡萄城控件技术团队
2014/10/28
986
2
Cordova 和 Ionic 的区别

Cordova Apache Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个...

华山猛男
2018/11/07
176
0
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
189
0
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.2K
26

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
22分钟前
5
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
24分钟前
3
0
IE之css3效果兼容

本文转载于:专业的前端网站▷IE之css3效果兼容 一、兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-sha...

前端老手
27分钟前
3
0
NiushopB2C开源商城功能列表说明:

B2C单商户免费版:PC商城+微商城 B2C单商户标准版:PC商城+微商城组合套餐+阶梯优惠核销功能 B2C单商户企业版:PC商城+微商城拼团+组合套餐阶梯优惠+核销功能 B2C单商户分销版:PC商城+微商城...

niushop-芳
29分钟前
3
0
图片如何转GIF图片呢

如何将生活中拍摄的好玩有趣的图片制作成GIF动图呢?相信很多小伙伴都不知道要如何制作,其实制作方法非常的简单,下面分享一个图片转GIF动图的方法,希望这个方法能够帮助大家在与好友斗图时...

白米稀饭2019
35分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部