demo2.html
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>angular-demo2</title> <link href="../lib/ionic/css/ionic.css" rel="stylesheet"> <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script> </head> <body> <ion-nav-bar class="bar-stable"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script type="text/javascript"> var app = angular.module('app',['ionic']); app.controller('DashCtrl', function($scope) {}) .controller('AccountCtrl', function($scope) { $scope.settings = { enableFriends: true }; }); app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tab', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tab.dash', { url: '/dash', views: { 'tab-dash': { templateUrl: 'templates/dash.html', controller: 'DashCtrl' } } }) .state('tab.account', { url: '/account', views: { 'tab-account': { templateUrl: 'templates/account.html', controller: 'AccountCtrl' } } }); $urlRouterProvider.otherwise('/tab/dash'); }); </script> </body> </html>
tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-positive"> <!-- Dashboard Tab --> <ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Account Tab --> <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>
dash.html
<ion-view view-title="Dashboard"> <ion-content class="padding"> <div class="list card"> <div class="item item-divider">Recent Updates</div> <div class="item item-body"> <div> There is a fire in <b>sector 3</b> </div> </div> </div> <div class="list card"> <div class="item item-divider">Health</div> <div class="item item-body"> <div> You ate an apple today! </div> </div> </div> <div class="list card"> <div class="item item-divider">Upcoming</div> <div class="item item-body"> <div> You have <b>29</b> meetings on your calendar tomorrow. </div> </div> </div> </ion-content> </ion-view>
account.html
<ion-view view-title="Account"> <ion-content> <ion-list> <ion-toggle ng-model="settings.enableFriends"> Enable Friends </ion-toggle> </ion-list> </ion-content> </ion-view>
注意在配置路由的时候导航项的内容是不同的，添加了一个views子项
整个示例用到了七个ionic的标签：
ion-nav-bar 页面的头部导航bar
ion-nav-view 页面的正文内容
ion-view 页面内容
ion-nav-back-button 后退按钮（新增）
ion-tabs 页面导航栏（新增）
ion-tab 页面导航项（新增）
ion-toggle 开关项（新增）