我记录

ionic 路由

掷鸡蛋者 发布于 2015/5/25 14:22 浏览: 6081 回复: 0 所在分类:ionic

使用 github 上的路由组件:AngularUI Router

官方文档:https://github.com/angular-ui/ui-router/wiki 

中文翻译:http://bubkoo.com/2014/01/01/angular/ui-router/guide/state-manager/ 

对于传统 angularJs 用户来说,记得把 ng 的 ui-view 替换成 ion-nav-view

视频讲解:https://www.youtube.com/watch?v=dqJRoh8MnBo 

页面元素:

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

一般页面顶部必须有导航栏,所以正常情况下,还要加上 ion-nav-bar 标签:

<ion-nav-bar class="bar-stable">

<ion-nav-back-button></ion-nav-back-button>

</ion-nav-bar>

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

其中红色 bar-stable 修改颜色

路由配置

angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('index', {

url: '/',

template: '<h1>index</h1>'

})

.state('music', {

url: '/music',

template: '<h1>musicxxx</h1>'

});


// 默认跳转到首页

$urlRouterProvider.otherwise('/');


})

注意:上面配置的黑色部分不能丢,否则直接访问首页路径/,会没有内容,必须访问如下网址:

http://localhost:8100/#/

模板设置

除了上面直接使用 template 属性返回模板内容,也可以使用templateUrl属性,指定内联模板,比如

.state('index', {

url: '/',

templateUrl: ‘templates/home.html'

})

然后在 /index.html 首页中,嵌入如下<script>标签,其中id 是templateUrl,script 里面是模板内容

<script id=“templates/home.html" type="text/ng-template">

<!— 导航栏上面的标题 view-title -->

<ion-view view-title="Index">

<ion-content>

<a href="#/music”>跳转到其他页面</a>

</ion-content>

</ion-view>

</script>

然后,你也可以将模板放在文件目录下,一般都是放在名叫 /templates 的目录下,所以要注意:

  1. 模板可以是 inline 内联模板(即放在这里的 script 标签中),也可以放在 /templates 目录下。

  2. 如果是内联模板,建议 ID 也以 “templates/“ 开头,方便以后拆分出来,放到实际的 “templates/“ 目录下。


掷鸡蛋者2015/5/25 14:22

留下脚印

踩一脚
copyright © 用微博记录这个时代 2010-2014
Powered by 我记录2.0
Processed in 0 seconds, 0 queries