ionic框架是架构于ng之上的,所以同样有路由配置模块,也大致相同,但更强大些,所以也会有些区别,用的模块不再是angular的ngRoute模块,而是angular-ui-route模块,
比ng的Route多了一些配置方法和属性。所依赖的服务也有所不同,ng是$routeProvider,ionic依赖的是$stateProvider,称之为状态。
配置代码:
<script>
var app = angular.module('myApp', ['ionic']); //依赖模块,依赖ionic模块,这个模块集成了angular-ui-route模块
app.config(function ($stateProvider,$urlRouterProvider) { //config还是一样,注入服务$stateProvider及$urlRouterProvider,$urlRouterProvider服务用为处理异常URL
$stateProvider
.state("home", { //不再是when方法,而是状态state方法
url: '/myHome', //相对于ng多一个URL地址配置,必须写 ,ng是第一个参数就是url地址,这里第一个参数只是个名称属性
templateUrl: 'template/main.html' //模板真实地址,同于ng
})
.state("detail", {
url: '/myDetail/:id', //url地址名后追加 约定的变量名 id 接收上个页面传递过来的数据,会保存在$stateParams中
templateUrl: 'template/detail.html',
controller:'detail'
});
$urlRouterProvider.otherwise('myHome')
});
app.controller('detail',['$scope','$state','$stateParams',
function ($scope,'$state',$stateParams) { //定义控制器,'$state服务替代ng的$location服务,用于定义URL间的跳转
$scope.jump=function(){
$state.go('home',{id:4}) //调用go方法替代ng $location的path方法,第一个参数为跳转到页面的URL配置名称,第二个参数为可选,要传递到下个页面的数据,同样会保存在$stateParams中
}
console.log($stateParams.id) //从$stateParams取数据
}]);
</script>
ng跳转的方法有二种:href 和 js中定义跳转方法 ng-click指令调用方法
ionic中除了上面两种外,又增加了一种扩展属性ui-sref跳转的方法,属性值为state配置URL时的第一个参数名
<a class="button balanced-bg" ui-sref="detail({id:4})">页面详情</a> //需要传参名称后面加括号,以对象开传送,对象的键为跟接收页面用来接收数据的约定变量名