ionic路由(一)

学习要点：
1. Ionic 中路由管理介绍
2. ionic 中内联模板介绍
3. i onic 路由机制: 状态
4. 导航视图 : ion-nav-view
5. 模板视图 : ion-view
6. 导航栏 : ion-nav-bar
7. 回退按钮 : ion-nav-back-button
8. 视图特定按钮 : ion-nav-buttons
9. 定制标题内容 : ion-nav-title
10. 定制视图切换方式 : nav-transition
11. 定制视图切换方向 : nav-direction
12.导航栏脚本接口 : $ionicNavBarDelegate
13.访问历史 : $ionicHistory

1． Ionic中路由管理介绍
在单页应用（ Single Page App）中，路由的管理是很重要的环节。 ionic.js 没有使用 AngularJS
内置的 ng-route 模块，而是选择了 AngularUI 项目 的 ui-router 模块。
ui-router 的核心理念是将子视图集合抽象为一个状态机，导航意味着 状态的切换。在不同
的状态下， ionic.js 渲染对应的子视图（动态加载的 HTML 片段） 就实现了路由导航的功能
ui-router: https://github.com/angular-ui/ui-router 2． ionic 中内联模板介绍
可能你没有注意过， HTML 中常用的 script 标签在 AngularJS 中被重新定义了： 除了原来的脚本声明功能
之外，如果 script 元素的 type 属性 定义为 text/ng-template，则被称为内联模板。例如：
<script type="text/ng-template" id="a.html">
<p>This is the content of the template.</p>
</script>
内联模板在单页应用（ SAP）开发中非常有用。 SAP 应用通常需要通过 AJAX 从后台载入众多的 HTML 片段，
这些 HTML 片段都用文件存放的话，看起来、想起来 都很不爽。使用内联模板，就可以把这些零散的 HTML
片段模板都集中在一个 文件里，维护和开发的感觉都会好很多。
AngularJS 在编译时会将内联模板的 id 属性值和其内容，分别作为 key 和 value，存入$templateCache 管
理的 hash 表中:


使用内联模板
内联模板的使用，常见的有几种情况。
使用 ng-include 指令
可以利用 ng-include 指令在 HTML 中直接使用内联模板，例如：
<div ng-include="'a.html'"></div>
注意：其中 a.html 是一个字符串常量，需要使用单引号包裹起来。
使用$templateCache 服务
也可以直接使用$templateCache 服务的方法 get()从模板缓存中读出 其内容：
1. var partial = $templateCache.get("a.html");
使用$http 服务
还有一种常见的用法是使用$http 服务时指定 cache 参数，这将直接从$templateCache 中取出模板，而不
必进行网络访问：
$http.get("a.html",{cache:$templateCache})
.success(function(d,s){..})
.error(function(d,s){...});
3． ionic 路由机制: 状态
对于视图的路由，ionic没有使用AngularJS的路由模块（ ng-route），而是使用了 angular-ui
项目的 ui-route 模块。 ionic.bundle.js 已经打包了 ui-route 模块， 所以我们使用时不
需要单独引入。
和通常基于 URL 匹配的路由机制不同， ui-route 是基于状态机的导航：


可以认为视图元素 ui-view 有多个状态，比如： state1/state2/state3。 在任何一个时刻，
视图元素只能处于某一状态下。这些状态是由状态机管理的。
在 ui-route 中的$state 服务就是一个状态机实例，在任何时刻，我们可以使用其 go()方
法跳转到指定名称的状态。
配置状态机
需要指出的是，状态的划分以及每个状态的元信息（比如模板、 url 等）是在配置 阶段通
过$stateProvider 完成的：
angular.module("myApp",["ionic"])
.config(function($stateProvider){
$stateProvider.state("state1",{...})
.state("state2",{...})
.state3("state3",{...});
});
触发状态迁移的几种方式（通俗的讲就是页面跳转的几种方式）
1. 调用$state.go()方法，这是一个高级的便利方法；
2. 点击包含 ui-sref 指令的链接 <a ui-sref="state1">Go State 1</a>
3. 导航到与状态相关联的 url。
当用户点击这个链接时， $state 服务将根据状态名 state1 找到对应的元信息，提取、编译
模板，并将其显示在 ui-view 指令指定的 视图窗口中。



交流QQ群：187269144 QQ群2：438443293QQ群3：248403526