ion-nav-view

See the Pen by Ionic (@ionic) on CodePen.

当用户在你的app中浏览时,ionic能够检测到浏览历史。通过检测浏览历史,实现向左或向右滑动时可以正确转换视图。

采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务,URLs可以用来控制视图。

AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面。 此外,每个状态无需绑定到一个URL,并且数据可以更灵活地推送到每个状态。

每个模板都是一个状态,映射到一个URL,并定义程序使用angular-ui-router(记得用ion-nav-view代替ui-viewin)。

实例该文档来自ionic中文网ionic-china

以下实例中,我们将创建一个应用程序中包含不同状态的导航视图。

我们的标记中选择ionNavView作为顶层指令。显示一个页眉栏我们用(ionic-china中文网文档)ionNavBar指令通过导航更新。

接下来,我们需要设置我们的将渲染的状态值。

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

再打开应用,$stateProvider 会查询url, 看是否匹配 index 状态值, 再加载index.html到<ion-nav-view>

页面加载都是通过URLs配置的。在Angular中创建模板最一个简单的方式就是直接将他放到html模板文件中并且用<script type="text/ng-template">包含。

所以这也是一种方式将Home.html加入到我们的APP中来:

<script id="home" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      <!-- The content of the page -->
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

这是一个很好的方法,因为模板会很快的加载并被缓存就不同通过网络再去加载。

缓存

通常情况下,视图都被缓存了能提升性能。当跳出视图时,他的元素被保留在Dom中,并且它的作用于也从 $watch 中移除。 当我们跳到一个已经被缓存了的视图,视图会被激活,它的作用于被重新连接上,Dom中也保存了他的元素。这也允许保持以前的视图滚动位置。

缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个,并且这并不是唯一可以定制的,应用程序可以显式状态来设置视图应不应该被缓存。

注意,因为我们是缓存这些视图,我们没有破坏作用于. 相反, 它的作用于也从 $watch 中移除。

因为接下来的观看作用域并没有被摧毁和重建,控制器也没被再次加载。如果app/controller需要知道什么时候进入或离开一个视图,再视图事件从ionView作用内发出, 例如 $ionicView.enter

$ionicConfigProvider默认情况下,我们跳转页面时最近访问视图都已被缓存,当再次访问时,相同的实例数据和DOM元素会被引用。然而,当从历史记录访问,“前进”的观点是从缓存中移除。如果你再次跳转到这个视图,它会创建一个新的DOM元素和控制器实例。基本上,任何视图都是每次重新渲染。设置此配置 true 有缓存而不重置在每个加载。

$ionicConfigProvider.views.forwardCache(true);

全局禁用缓存

$ionicConfigProvider可以用于设置最大允许缓存的视图数量,通过设置为0来禁用所有缓存。默认:10

$ionicConfigProvider.views.maxCache(0);

在STATE PROVIDER中禁用缓存

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

通过属性禁用缓存

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI 路由

请访问 AngularUI Router's docs了解更多。下面由AngularUI Router团队的视频,向你解释它的工作原理。

API

属性 类型 说明
name
(可空)
string

一个视图的名字。这个名字应该是在相同的状态下其他视图中唯一的。你可以在不同的状态中有相同名称的视图。欲了解详细信息,查看ui-router的 ui-view文档