IONIC----08.route_menu_tab

最新推荐文章于 2021-05-29 18:37:39 发布

damys

最新推荐文章于 2021-05-29 18:37:39 发布

阅读量438

点赞数

分类专栏： Ionic 文章标签： ionic route menu-tab

本文链接：https://blog.csdn.net/damys/article/details/52061747

版权

Ionic 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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

damys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IONIC----08.route_menu_tab

<!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
复制链接

扫一扫