最新版本号[免费下载]

ion-nav-view

作者:本站编辑 发布时间:2015-11-24 来源:本站原创 点击数:

Ionic利用AngularUI路由模块,使应用程序接口可以组织成不同的“状态”。例如Angular的核心$route服务,利用URL控制视图。然而,AngularUI路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面。此外,每个状态无需绑定到一个URL,并且数据可以更灵活地推送到每个状态。

用ionNavView指令在你的app中渲染模版。每个模板都是状态的一部分。状态通常映射到一个url上,然后用angular-ui-router定义程序(查看它们的文档,记下用ion-nav-view替换ui-view的例子)。

用法

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

要做到这一点,在我们的标签中,用ionNavView顶层指令。要显示一个页眉,我们利用,当我们通过导航堆栈导航时,就会用ionNavBar指令更新。

你可以在navView的动画属性上应用任何动画类来给它添加页面动画。

建议的页面过渡: 'slide-left-right', 'slide-left-right-ios7', 'slide-in-up'。

<ion-nav-bar></ion-nav-bar> <ion-nav-view animation="slide-left-right">   <!-- 中间内容 --> </ion-nav-view>

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

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

然后在app启动时,$stateProvider就会检查url,检查它的索引匹配状态,然后尝试将home.html加载到<ion-nav-view>内。

页面由指定的URL加载。在Angular中有一个简单的方式就是把它们直接放到你的HTML文件,并用<script type="text/ng-template">语法。因此,这是一种把home.html载入到app中的一种方式:

<script id="home" type="text/ng-template">   <!-- ion-view的标题会在导航栏显示 -->   <ion-view title="'Home'">     <ion-content ng-controller="HomeCtrl">       <!-- 页面的内容 -->       <a href="#/music">跳转到音乐页面!!</a>     </ion-content>   </ion-view> </script>

这么做那也是极好的,因为缓存了模板,加载速度非常快,不必从网络上再获取。

请访问AngularUI 路由文档了解详情。下面是一个很棒的AngularUI路由视频,可以帮助了解它的所有运作情况:

API

属性类型详情
name(可选)字符串

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


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友
上一篇文章:ion-view
下一篇文章:$ionicSideMenuDelegate
AI智能听书
选取音色