IONIC----09.route1

最新推荐文章于 2023-07-04 15:35:31 发布

damys

最新推荐文章于 2023-07-04 15:35:31 发布

阅读量358

点赞数

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

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

版权

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-bar class="bar-positive">
        <ion-nav-back-button class="button-clear">
            <i class="icon ion-ios-arrow-back"></i> 返回
        </ion-nav-back-button>
    </ion-nav-bar>

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