IONIC----08.route_menu_tab-优快云博客

本文链接：https://blog.youkuaiyun.com/damys/article/details/52061747

本文介绍了一个使用Ionic框架构建的应用程序结构。通过配置不同状态和视图，实现了具有多个页面和导航功能的移动应用。文章展示了如何设置路由以及如何定义控制器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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