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(特色幻灯片)组件对于手机,而且用该组件’可以介绍产品。

你可能感兴趣的:(Ionic in Action MEAP v06 - 04)