ionic笔记

ionic教程网站：http://www.ionic.wang/

1.ui-router路由简介

　　https://blog.csdn.net/mcpang/article/details/55101566

2.内联模版

　　1.<div ng-include="'a.html'"></div>
　　2.var partial = $templateCache.get("a.html");
　　3.使用$http 服务
　　　　$http.get("a.html",{cache:$templateCache})
　　　　　　.success(function(d,s){..})
　　　　　　.error(function(d,s){...});

3.ionic 路由机制: 状态

　　视图元素ui - view 

angular.module("myApp",["ionic"]) 
            .config(function($stateProvider){ 
                $stateProvider.state("state1",{...}) 
                    .state("state2",{...}) 
                    .state3("state3",{...}); 
            });

4.导航视图 : ion-nav-view 路由对应的页面

用来代替ui-view 指令
<ion-nav-view>
<!--模板内容将被插入此处-->
</ion-nav-view>

5.模板视图 : ion-view 

<script id="..." type="text/ng-template"> 
        <ion-view> 
            <!--模板视图内容--> 
        </ion-view> 
    </script> 

　　view-title - 视图标题文字
　　cache-view - 是否对这个模板视图进行缓存 允许值为：true | false，默认为 true
　　hide-back-button -是否隐藏导航栏中的返回按钮 允许值为：true | false，默认为 false
　　hide-nav-bar - 是否隐藏导航栏 允许值为：true | false，默认为 false

 

6.导航栏 : ion-nav-bar 　

　　属性：
　　　　align-title - 标题对齐方式 允许值为： left | right | center。默认为 center，居中对
　　　　no-tap-scroll - 点击导航栏时是否将内容滚动到顶部 允许值为：true | false。默认为 true 回到顶部

7.回退按钮 : ion-nav-back-button

<ion-nav-bar> 
       <ion-nav-back-button></ion-nav-back-button> 
</ion-nav-bar>

8.视图特定按钮 : ion-nav-buttons 

　　指令 ion-nav-buttons 必须是指令 ion-view 的直接后代： 

<ion-view> 
            <ion-nav-buttons> 
                <!--按钮定义--> 
            </ion-nav-buttons> 
        </ion-view>

　　ion-nav-buttons 指令有一个属性用于声明这些按钮在导航栏中的位置： 

　　　　side - 在导航条的那一侧放置按钮。允许值：primary | secondary | left | right

9.定制标题内容 : ion-nav-title 

　　ion-nav-title 必须是 ion-view 的 直接后代

10.定制视图切换方式 : nav-transition 

　　视图切换时的动画转场方式，可以使用 nav-transition 指令声明：
　　1. <any ui-sref=".." nav-transition="..">...</any>

　　目前支持的转场方式有三种：
　　　　 android - android 模拟  ios - ios 模拟  none - 取消转场动画

11.定制视图切换方向 : nav-direction

　　使用 nav-direction 指令声明视图转场时的切换方向：
　　1. <any ui-sref=".." nav-direction="..">...</any>
　　目前支持的选项有：
　　　　 forward - 新视图从右向左进入  back - 新视图从左向右进入  enter -  exit -  swap -

12.导航栏脚本接口 : $ionicNavBarDelegate 

服务$ionicNavBarDelegate 提供了控制导航栏的脚本接口：
 align([direction]) - 标题对齐方式。
参数 direction 是可选的，允许值为：left | right | center，缺省值为 center。
 showBackButton([show]) - 是否显示回退按钮
参数 show 是可选的，允许值为：true | false，缺省值为 true。
 showBar(show) - 是否显示导航栏
参数 show 的允许值为：true | false 。
 title(title) - 设置导航栏标题
参数 title 为 HTML 字符串。

13.访问历史 : $ionicHistory

ionic 的导航框架会自动维护用户的访问历史栈，我们可以通过服务$ionicHistory 管理访 问轨迹：
 viewHistory() - 返回视图访问历史数据  currentView() - 返回当前视图对象  currentHistoryId() - 返回历史 ID  currentTitle([val]) - 设置或读取当前视图的标题
参数 val 是可选的。无参数调用 currentTile()方法则返回当前视图的标题。
 backView() - 返回历史栈中前一个视图对象
如果从视图 A 导航到视图 B，那么视图 A 就是视图 B 的前一个视图对象。
 backTitle() - 返回历史栈中前一个视图的标题  forwardView() - 返回历史栈中的下一个视图对象  currentStateName() - 返回当前所处状态名  goBack() - 切换到历史栈中前一个视图
当然，前提是存在前一个视图。
 clearHistory() - 请空历史栈
除了当前的视图记录，clearHistory()将清空应用的全部访问历史

14.ionic一些常用的标签

http://www.ionic.wang/
ionContent易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。
ion-refresher 允许你添加下拉刷新滚动视图。

ion-infinite-scroll  分页使用，详见http://www.cnblogs.com/soul-wonder/p/8865081.html
ion-list
ion-item ionList的内部项
<ion-slides options="pro_options_jd" slider="">滑动框
ion-scroll 创建一个包含所有内容的可滚动容器 zooming 是否支持双指缩放。

nav-direction
　　视图过渡间的动画方向: forward(向前), back(向后), enter(进入), exit(退出), swap(交换).

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。
　　ng-class 指令的值可以是字符串，对象，或一个数组。
　　　　如果是字符串，多个类名使用空格分隔。
　　　　如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。
　　　　如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

ng-src 指令覆盖了 <img> 元素的 src 属性。
　　如果你使用了 AngularJS 代码设置图片地址，请使用 ng-src 指令替代 src 属性。