ionic中路由管理介绍:
在单页应用中,路由的管理是很重要的环节。ionic.js没有使用AngularJS内置的ng-route路由,而是选择了AngularUI项目的ui-router模块。
ui-router的核心理念是将子视图集合抽象为一个状态机,导航意味着状态的切换。在不同的状态下,ionic.js渲染对应的子视图(动态加载的HTML片段)就实现了路由导航的功能。
路由设置
模块导航用< ion-tabs class=”tabs-bottom”>
$stateProvider .state('tab', {
// cache: false,//是否缓存
url: "/tab/event",
abstract:true,//默认加载
templateUrl: "templates/event.html"//模板
})
这样模板会默认加载到ion-nav-view中,也可以指定加载到某个ion-nav-view中,使用name属性
//对应的路由写法是
$stateProvider .state('tab', {
url: "/tab/event",
views:{
"viewType":{
//viewType与ion-nav-view的name属性对应,如果dom中没有name属性值是viewType的ion-nav-view,那很有可能不会渲染模板页面
templateUrl: "templates/event.html", //模板
controller:'controller_events_list'//controller
}
}
})
ionic 也支持url参数
url: "/tab/event/:id/:num"
参数按顺序加到url上
注意:引用url的时候必须给足对应的参数,否则路由会跳到空白页,或者出现其他异常
href="#/school/0/0"
$stateParams获取url参数
在controller中注入$stateParams
以上面的为例,取id时调用$stateParams.id,同理取num就是$stateParams.num
页面跳转方法
标签的href
href="#/tab"
js跳转
$location.path("/tab");
要注意在controller里先注入location也可以使用window,同样的,使用前需要依赖注入
$window.location.assign(url);
使用$window需要加#号
父子路由
在布局页面里,通常会有一组页面是同级的,像登录、注册、找回密码。习惯上希望给这三个页面建立一个同级的逻辑关系。这里涉及parent.child写法。
比如下面的代码:
/auth是父级总管,无法加载auth.login还是其他auth.xx,都会默认加载/auth的模板内容,这里我设置成了”“,模板不包含内容。如果/auth中有内容,则是/auth开头的页面共用的。
//登录相关
.state('auth', {
url: '/auth',
views:{
'otherPage':{
templateUrl: ""
}
}
})
//登录界面
.state('auth.login', {
url: '/login',
views:{
'otherPage':{
templateUrl: "login.html",
controller:'controller_login'
}
}
})
//注册
.state('auth.register', {
url: '/register',
views:{
'otherPage':{
templateUrl: "register.html",
controller:"controller_register"
}
}
})
另外,如果当前路径是/auth时,去加载/auth/register这样的子页面,不会渲染成功。虽然会触发$stateChangeSuccess,但没有渲染模板,dom不会改变。
访问除路由外地址,可以定向访问登录或者其他页面。
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/auth/login');