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 属性。
- 还没有人评论，欢迎说说您的想法！
客服
