Ionic in Action MEAP v06 - 04

1.ui-router和ngRoute区别:

唯一的区别是:ngRoute不支持重要的特征,例如命名视图(named views),嵌套视图(nested views),并行视图(parallel                   views);然而ui-router支持;具体介绍:https://angular-ui.github.io/ui-router/

2.ionNavBar和ionNavView的用法:

(1)angularjs能将打了标记的模板(templates)注入到存在ionNavView的视图中去,如果没有ionNavView时,app就不清楚将内容加载到什么位置,所以说,你要是使用导航的

模板,至少需要一个ionNavView在app中;

(2)ionNavBar将被显示在界面的顶部,用于显示视图的主题,或者显示返回按钮(ionNavBackButton component);如果只有一条路(没有其他选择)可走的时候,就会显示出

来,用于返回到之前的界面,而当前有多条路时(主界面),就会隐藏返回按钮;如果没有历史记录时,也不现实返回按钮

3.ui-router状态state的介绍:

(1)https://github.com/angular-ui/ui-router/wiki;

4.ionContent的使用:

(1)内容大小的区域是基于设备的

(2)如果有header何footer控件那么ionContent就会自适应大小和位置

(3)管理滚动条,有多种配置可供选择,比如设置滚动条的方向,或者设置无滚动条

(4)开始位置是从navBar的后面左上角开始绘制;

(5)如果用了ionHeaderBar但是没有使用ionContent,那么content部分将被绘制在ionHeaderBar的下面,而不是后面;

5.ionic中使用css:

(1)Ionic带有很多css简单的类,被html元素使用,从而生成Ionic的组件;

(2)假如熟悉Bootstrap或者Foundation,就能快速的熟悉添加类的方法进而创建可视化组件

(3)针对可移动的设计,主要有几个表单元素,比如checkboxes(多选框),a range slider(区间滑动组件toggle),buttons(按钮),等等;

(4)Ionic的列表组件,list和list item是同一个类型,而且有许多样式的配置项,

(5)css的class类:

(5.1)list:添加该类(list)到一个容器元素中,就会创建一个列表容器,

(5.2)item:添加该类(item)到一个元素中,就会生成list的一个子项,item和list-item完全不同的概念

(5.3)各种不同的list item类型,dividers,thumbnails,或者icons等等.

6.ionic的不同组件:

(1)ionic组件分为两个不同的范畴,css(例如buttons)和javascript(例如infinite scroll),还有两者(css和javascript)都有的(例如tabs);

(2)css组件提供视觉上的组件,但是没有真正的配置项或者交互项;

(3)javascript组件提供了更加智能化的交互组件,这些有可能或者没有可能通过css组件来创建;

(4)建议使用css组件,除非有一些只能由javascript实现的特征实现,

(5)Ionic运行是非常快的,但是减少javascript的使用,可以降低开销;虽然不明显,但是当一个组件是由css和javascript组成的,你也可以使用css的classes去修改

javascript的版本,例如ionNavBar是用css适配颜色;

7.Ionicons:

(1)可用的ionics:http://ionicons.com;实际上就是一些字体图标;

8.$http和$ionicLoading:

(1)公共资源:http://api.openweathermap.org/data/2.5/weather?q=Beijing可以直接获取北京天气的Json对象;

(2)$http:angularJs中访问服务器的服务

(3)$ionicLoading:ionic的服务远程服务的进度条的服务---属于ionic的服务,得注入使用

(4)show()显示和hide()隐藏方法实现进度条的显示和隐藏;

(5)show()有很多的配置项,用来定制各种特殊的显示方式,比如:twmplate-设置显示内容;duration-设置显示时间间隔,时间间隔之后自动隐藏

(6)/*增加延迟执行器,如果失败之后的一些操作*/

$timeout(function(){

/*如果访问服务器失败,则返回到主界面上*/

$location.path('/home');

$location.replace();

},3000);

9.Ionic 类list card的使用:

(1)list card和item item-avatar,item-divider???

10.slide box($ionSlideBoxDelegate)的使用:

(1)ion-slide-box:滑动容器,ion-slide:具体的滑动页;

(2)ionic 自定义css样式,和普通的一样,注意在css文件中设置样式时,[idname] .[classname]==id的名称+空格+‘.’+class名称

11.语法:

(1)Ionic的建立是围绕着state的,状态的声明是在config()方法中运用$stateProvider来实现的。

(2)Ionic提供了ionNavView标记,用于当state发生变化时,加载对应的模板;

(3)Ionic提供了ionNavBar标记,可以自动将表一栏中的标题修改成当前视图的标题,而且也能将ionNavButtons包括到标题栏中来,并且设置按钮的位置(左或者右)

(4)Ionic提供的list和card组件对移动端来说,是非常友好的列表展示方式;

(5)Ionic支持angularjs中的$http服务,用于加载服务端数据;而且Ionic提供的$ionicLoading服务,提示数据加载指示器(相当于进度条),用于加载服务器端数据时。

(6)Ionic提供的ionSlideBox(特色幻灯片)组件对于手机,而且用该组件’可以介绍产品。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,392评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 一、Ionic中ui-router不同于ngRouter的特征: 1.nested view(嵌套视图): 二、章...
    lengyan_zhao阅读 242评论 0 0
  • h1 h2 h3 h4 h5 h6 无序列表 1 2 3 有序列表 test test2 test3 link b...
    雪无音阅读 188评论 0 0
  • 炎炎夏日,三仓河畔的农民们冒着三十八度的高温,正在用铡草机加工甜叶菊。空气中弥漫着浓浓的甜味。 三仓镇种植甜叶菊已...
    田园垄亩梅德萌阅读 577评论 0 2