目录
(4) . 在controller.js 添加声明对应controller
(1) . 导包
<script src="js/app.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
(2) . 写js路由
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
controller: 'tabCtrl',
templateUrl: 'templates/tabs.html'
})
.state('tab.pendingWork', {
url: '/pendingWork',
views: {
'tab-pendingWork': {
templateUrl: 'templates/tab-pendingWork.html',
controller: 'pendingWorkCtrl'
}
}
})
.state('tab.doneWork', {
url: '/doneWork',
views: {
'tab-doneWork': {
templateUrl: 'templates/tab-doneWork.html',
controller: 'doneWorkCtrl'
}
}
})
.state('tab.aboutSoftware', {
url: '/aboutSoftware',
views: {
'tab-aboutSoftware': {
templateUrl: 'templates/tab-aboutSoftware.html',
controller: 'aboutSoftwareCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/pendingWork')
});
(3) . 绘制html页面
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="待办单据" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/pendingWork">
<ion-nav-view name="tab-pendingWork"></ion-nav-view>
</ion-tab>
<ion-tab title="已办单据" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/doneWork">
<ion-nav-view name="tab-doneWork"></ion-nav-view>
</ion-tab>
<ion-tab title="关于我们" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/aboutSoftware">
<ion-nav-view name="tab-aboutSoftware"></ion-nav-view>
</ion-tab>
</ion-tabs>
(4) . 在controller.js 添加声明对应controller
.controller('tabCtrl',function($scope){})
.controller('pendingWorkCtrl', function($scope, Chats) {
})
.controller('doneWorkCtrl', function($scope, $stateParams, Chats) {
})
.controller('aboutSoftwareCtrl', function($scope) {
});
(5) . 在index.html声明整个app用这个模型
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
(6) . 三个html页面
<ion-view view-title="待办事务">
<ion-content>
待办事务
</ion-content>
</ion-view>
<ion-view view-title="已办事务">
<ion-content class="padding">
已办事务
</ion-content>
</ion-view>
<ion-view view-title="关于我们">
<ion-content>
关于我们
</ion-content>
</ion-view>
(7) . 效果图