Ionic Js十二：导航ion-nav-view

ion-nav-view
当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。
采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。
AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套，以及合并视图，允许一个以上模板呈现在同一个页面。
此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。
以下实例中，我们将创建一个应用程序中包含不同状态的导航视图。
我们的标记中选择ionNavView作为顶层指令。显示一个页眉栏我们用 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到。

页面加载都是通过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 可以用于设置最大允许缓存的视图数量，通过设置为0来禁用所有缓存。

$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>

ion-view
隶属于ionNavView。一个内容的容器，用于展示视图或导航栏信息。
下面是一个带有"我的页面"标题的导航栏载入页面的例子。

<ion-nav-bar></ion-nav-bar>

<ion-nav-view class="slide-left-right">

  <ion-view title="我的页面">

    <ion-content>

      你好!

    </ion-content>

  </ion-view>

</ion-nav-view>

<body ng-app="starter">

  <!-- 当我们浏览时，导航栏会随之更新。 -->

  <ion-nav-bar class="bar-positive nav-title-slide-ios7">

  </ion-nav-bar>

  <!-- 初始化时渲染视图模板 -->

  <ion-nav-view></ion-nav-view>

</body>

<ion-nav-bar>

</ion-nav-bar>

<ion-nav-view>

  <ion-view>

    <ion-nav-buttons side="left">

      <button class="button" ng-click="doSomething()">

        我是一个在导航栏左侧的按钮！

      </button>

    </ion-nav-buttons>

    <ion-content>

      这里是一些内容！

    </ion-content>

  </ion-view>

</ion-nav-view>

<ion-nav-bar>

  <ion-nav-back-button class="button-clear">

    <i class="ion-arrow-left-c"></i> 后退

  </ion-nav-back-button>

</ion-nav-bar>

自定义点击动作，用 $ionicNavBarDelegate:

<ion-nav-bar ng-controller="MyCtrl">

  <ion-nav-back-button class="button-clear"

    ng-click="canGoBack && goBack()">

    <i class="ion-arrow-left-c"></i> 后退

  </ion-nav-back-button>

</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {

  $scope.goBack = function() {

    $ionicNavBarDelegate.back();

  };

}

在后退按钮上显示上一个标题，也用$ionicNavBarDelegate。

<ion-nav-bar ng-controller="MyCtrl">

  <ion-nav-back-button class="button-icon">

    <i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}

  </ion-nav-back-button>

</ion-nav-bar>

function MyCtrl($scope, $ionicNavBarDelegate) {

  $scope.getPreviousTitle = function() {

    return $ionicNavBarDelegate.getPreviousTitle();

  };

}

nav-clear
nav-clear一个当点击视图上的元素时用到的属性指令，比如一个或者一个

。
当点击时，nav-clear将会导致给定的元素，禁止下一个视图的转换。这个指令很有用，比如，侧栏菜单内的链接。
用法
下面是一个侧栏菜单内添加了nav-clear指令的一个链接。点击该链接将禁用视图间的任何动画。

<a nav-clear menu-close href="#/home" class="item">首页</a>

ion-nav-title
ion-nav-title 用于设置 ion-view 模板中的标题。
用法

<ion-nav-bar>

</ion-nav-bar>

<ion-nav-view>

  <ion-view>

    <ion-nav-title>

      <img src="logo.svg">

    </ion-nav-title>

    <ion-content>

      Some super content here!

    </ion-content>

  </ion-view>

</ion-nav-view>

<body ng-controller="MyCtrl">

  <ion-nav-bar>

    <button ng-click="setNavTitle('banana')">

      Set title to banana!

    </button>

  </ion-nav-bar>

</body>

function MyCtrl($scope, $ionicNavBarDelegate) {

  $scope.setNavTitle = function(title) {

    $ionicNavBarDelegate.title(title);

  }

}

Ionic Js十二：导航ion-nav-view的更多相关文章

Ionic Js十：加载动作
$ionicLoading 是 ionic 默认的一个加载交互效果.里面的内容也是可以在模板里面修改. 用法 angular.module('LoadingApp', ['ionic']) .cont ...
Ionic Js十九：加载动画
ion-spinner ionSpinner 提供了许多种旋转加载的动画图标.当你的界面加载时,你就可以呈现给用户相应的加载图标. 该图标采用的是SVG. 实例 HTML 代码 <ion-c ...
Ionic Js十八：滑动框
ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed="slid ...
Ionic Js十六：滚动条
ion-scroll ion-scroll 用于创建一个可滚动的容器. <ion-scroll [delegate-handle=""] [direction="& ...
Ionic Js十五：对话框
$ionicPopup ionic 对话框服务允许程序创建.显示弹出窗口. $ionicPopup 提供了3个方法:alert(), prompt(),以及 confirm() . 实例 HTML 代 ...
Ionic Js十四：浮动框
$ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框. 实例 HTML 代码 <p> <button ng-click="open ...
第二十二章、 Model/View便利类树型部件QTreeWidget
老猿Python博文目录专栏:使用PyQt开发图形界面Python应用老猿Python博客地址一.引言树部件(Tree Widget)是Qt Designer中 Item Widgets(It ...
Bootstrap入门（十二）组件6：导航标签页
Bootstrap入门(十二)组件6:导航标签页 1.标签页 2.胶囊式标签页 3.垂直展示 4.两端对齐的标签页 5.禁用的链接 6.添加下拉菜单先引入本地的CSS文件和JS文件(注:1. ...
iOS开发——UI进阶篇（十）导航控制器、微博详情页、控制器的View的生命周期
一.导航控制器出栈 1.initWithRootViewController本质 UIViewController *vc = [[OneViewController alloc] init]; // ...

随机推荐

[NOI1997] 积木游戏
COGS 261. [NOI1997] 积木游戏 http://www.cogs.pro/cogs/problem/problem.php?pid=261 ★★ 输入文件:buildinggame ...
angularJS $routeProvider
O'Reilly书上的伪代码 var someModule = angular.module('someModule',[...module dependencies]); someModule.co ...
ARC官方文档翻译！ - iPhone App开发外包专区 - 威锋论坛 - 威锋网
CHENYILONG Blog ARC官方文档翻译! - iPhone App开发外包专区 - 威锋论坛 - 威锋网 http://bbs.weiphone.com/read-htm-tid-344 ...
Python练习-无参装饰器的正确打开方式
import time def DecoUserPrint(UserFunc):#定义一个DecoUserPrint接收参数的多重方法 def DecoPrint(): StartTime = tim ...
php实现异步请求
PHP开启异步多线程执行脚本装载自:http://www.cnblogs.com/clphp/p/4913214.html 场景要求客户端调用服务器a.php接口,需要执行一个长达5s-20s不 ...
PCA主成分分析理解
一.理论概述 1)问题引出先看如下几张图: 从上述图中可以看出,如果将3个图的数据点投影到x1轴上,图1的数据离散度最高,图3其次,图2最小.数据离散性越大,代表数据在所投影的维度上具有越高的区分度 ...
命名实体识别(NER)
一.任务 Named Entity Recognition,简称NER.主要用于提取时间.地点.人物.组织机构名. 二.应用知识图谱.情感分析.机器翻译.对话问答系统都有应用.比如,需要利用命名实体 ...
Fiddler是最强大最好用的Web调试工具
Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大 ...
公司xenserver搭建的使用
[root@xenserver ~]# ls -l /dev/disk/by-path/total 0lrwxrwxrwx 1 root root 9 Jan 19 16:33 pci-0000:0 ...
Android 浏览器启动应用程序
点击浏览器中的URL链接,启动特定的App. 首先做成HTML的页面,页面内容格式如下: <a href="[scheme]://[host]/[path]?[query]" ...

Ionic Js十二：导航ion-nav-view

Ionic Js十二：导航ion-nav-view的更多相关文章

随机推荐

热门专题