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 页面的头部导航barion-nav-view 页面的正文内容ion-view 页面内容ion-nav-back-button 后退按钮（新增）ion-tabs 页面导航栏（新增）ion-tab 页面导航项（新增）ion-toggle 开关项（新增）
时间： 2024-10-26 03:13:39