IONIC----08.route_menu_tab

来源:互联网 发布:linux转发工具 编辑:程序博客网 时间:2024/05/22 07:51
<!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.jsangular.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.jsangular.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

0 0