您的位置：首页 > 其它

IONIC----08.route_menu_tab

2016-07-29 09:53 204 查看

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">

<script src="./lib/js/ionic.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css">

<title>Ionic</title>
</head>

<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>

</html>
<!--
<script src="./js/app.js"></script>
<script src="./js/controller.js"></script>
-->

<script>
//可独立app.js
angular.module('myApp', ['ionic','myApp.controllers'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {       //定义一个路由，其它路由可以继承这个路由
url: "/tab",
abstract:true,
templateUrl: "templates/tabs.html"
})
.state('tab.tab1', {
url: '/tab1',
views:{
'tab-tab1':{
templateUrl: "templates/tab-tab1.html",
controller:'tab1Controller'
}
}
})
.state('tab.tab2', {
url: '/tab2',
views:{
'tab-tab2':{
templateUrl: "templates/tab-tab2.html",
controller:'tab2Controller'
}
}
})
.state('tab.tab3', {
url: '/tab3',
views:{
'tab-tab3':{
templateUrl: "templates/tab-tab3.html",
controller:'tab3Controller'
}
}
})
.state('tab.content1', {
url: '/content1/:id',
views:{
'tab-tab1':{
templateUrl: "templates/tab-content1.html",
controller:'content1Controller'
}
}
})
//无返回按钮
.state('news', {
url: '/news',
templateUrl: "templates/news.html"
})
//有返回按钮-路由要继承tab--href="#/tab/news"
.state('tab.news', {
url: '/news',
views:{
'tab-tab1':{
templateUrl: "templates/news.html"
}
}
})

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/tab1');
});

//可独立controller.js
angular.module('myApp.controllers', [])
.controller('tab1Controller', function($scope){
$scope.title='tab1Controller';
})
.controller('tab2Controller', function($scope){
$scope.title='tab2Controller';
})
.controller('tab3Controller', function($scope){
$scope.title='tab3Controller';
})
.controller('content1Controller', function($scope,$stateParams){
$scope.title='content1Controller';
console.log($stateParams);
})
</script>

GITHUB

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ionic route menu-tab

相关文章推荐

新的分享

章节导航