ionic入门之AngularJS扩展(一)
ionic
ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android、iOS,计划支持:Windows Phone、Firefox OS) 的原生App应用:
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指令就可以实现一个功能完备的选项卡:
- <ion-tabs>
- <ion-tab title="首页">...</ion-tab>
- <ion-tab title="交流">...</ion-tab>
- <ion-tab title="设置">...</ion-tab>
- </ion-tabs>
ionic.js实现的指令基本覆盖了移动端开发所需,下面的图可以帮助我们快速简要地了解 ionic.js的能力:
ionic.js : 路由管理
在单页应用(Single Page App)中,路由的管理是很重要的环节。ionic.js 没有使用AngularJS内置的ng-route模块,而是选择了AngularUI项目 的ui-router模块。
ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着 状态的切换。在不同的状态下,ionic.js渲染对应的子视图(动态加载的HTML片段) 就实现了路由导航的功能:
ionic.js : 手势支持
考虑到移动应用交互的特点,ionic.js也提供了手势操作的事件,比如:
- hold - 长按
- tap - 敲击
- drag - 拖动
- swipe - 滑动
- ...
ionic入门之AngularJS扩展(一)的更多相关文章
- ionic入门之AngularJS扩展基本布局
目录: 标题栏 : ion-header-bar 页脚栏 : ion-footer-bar header/footer : 样式及内容 内容区 : ion-content 滚动框 : ion-scro ...
- ionic之AngularJS扩展 移动开发(视图导航一)
目录: 内联模板 : script 路由机制 : 状态机 导航视图 : ion-nav-view 模板视图 : ion-view 导航栏 : ion-nav-bar 回退按钮 : ion-nav-ba ...
- Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念.发展历程.适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源. 原文发表于我的技 ...
- 6个强大的AngularJS扩展应用
本文链接:http://www.codeceo.com/article/6-angularjs-extension.html本文作者:码农网 – 小峰 AngularJS现在非常热门,是Google推 ...
- Ionic 入门与实战之第三章:Ionic 项目结构以及路由配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第三章,主要对 Ionic 的项目结构作了介绍,并讲解了Ionic 中的路由概念以及相关配置. 原文发表于我的技术博客 1. Ioni ...
- Ionic 入门与实战之第二章第二节:Ionic 环境搭建之 Ionic Lab 使用
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第二节,主要对 Ionic Lab 工具作了介绍,并讲解了其使用方法,这也是一个开发 Ionic 比较好的调试工具. 原文发表于 ...
- Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...
- ionic 入门创建第一个应用demo
一.ionic卸载 1.清除旧版本的ionic框架 npm uninstall -g ionic npm uninstall -g cordova npm cache clear npm cache ...
- 【Ionic】---AngularJS扩展基本布局
目录: 标题栏 : ion-header-bar 页脚栏 : ion-footer-bar header/footer : 样式及内容 内容区 : ion-content 滚动框 : ion-scro ...
随机推荐
- 访问路径:https://i.cnblogs.com/posts?categoryid=925678
https://i.cnblogs.com/posts?categoryid=925678
- Javascript位置 body之前、后执行顺序
简介:当页面加载的时候,嵌入html标记的js代码和位于<body></body>之间的js代码将被执行:当调用的时候,位于<head></head>之 ...
- centos linux安全和调优 第四十一节课
centos linux安全和调优 第四十一节课 上半节课 Linux安全 下半节课 Linux调优 2015-07-01linux安全和调优 [复制链接]--http://www.apele ...
- MPI简介
什么是MPI: MPI是一个库,而不是一门语言.但是按照并行语言的分类,可以把FORTRAN+MPI或者C+MPI看作是一种在原来串行语言基础上扩展后得到的并行语言.MPI库可以被FORTRAN77/ ...
- 经过各种坑之后centos+ uwsgi + nginx +django 终于配好了
https://pypi.python.org/pypi/setuptools#downloads https://www.python.org/ftp/python/ 开机 加入 uwsgi ngi ...
- MySQL (ZIP Archive) 下载及安装及卸载
下载地址官网: http://www.mysql.com/downloads/ MySQL Enterprise Edition 需要注册账户并且与Oracle公司购买 可以直接下载 MySQL Co ...
- Java基础——数组应用之StringBuilder类和StringBuffer类
接上文:Java基础——数组应用之字符串String类 一.StringBuffer类 StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和 ...
- Java基础之线程——管理线程同步方法(BankOperation2)
控制台程序. 当两个或多个线程共享同一资源时,例如文件或内存块,就需要采取措施,确保其中的一个线程不会修改另一个线程正在使用的资源.当其中的一个线程更新文件中的某个记录,同时另一个线程正在检索这个记录 ...
- .net 调度器怎么实现心跳(socket除了他,没选择吧)
自己写调度器,就要从tcp通信入手:心跳的实现除了使用socket,想不到其他任何方案. socket基本使用demo: Socket Client: static void Main(string[ ...
- composer很慢修改镜像
有两种方式启用本镜像服务: 系统全局配置: 即将配置信息添加到 Composer 的全局配置文件 config.json 中.见“例1” 单个项目配置: 将配置信息添加到某个项目的 composer. ...