私はIonicでアプリを作成していますが、最初にタブを作成しても問題なく動作しますが、今はside-menu
とタブを作成したいのですが、どうすればいいのか分かりません。サイドメニューとタブを使用してIonicアプリを作成するにはどうすればよいですか?
どうすればいいですか?
Index.htmlと
<body ng-app="starter" ng-controller="MainCtrl" animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view>
<ion-view>
<ion-content></ion-content>
</ion-view>
</ion-nav-view>
</body>
Tabs.html
<ion-view view-title="MeuPedido" align-title="center">
<ion-tabs class="tabs-icon-top tabs-top tabs-assertive">
<ion-tab icon="icon ion-fork" title="Compras">
<ion-nav-view name="tab-empresas"></ion-nav-view>
<ion-nav-view name="tab-produtos"></ion-nav-view>
<ion-nav-view name="tab-qtdProduto"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-ios-cart" title="Carrinho"></ion-tab>
<ion-tab icon="ion-android-person" title="Perfil"></ion-tab>
<ion-tab icon="ion-information-circled" title="Sobre"></ion-tab>
</ion-tabs>
</ion-view>
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('main', {
url: "/main",
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'UserCtrl'
})
.state('addUsuario', {
url: '/addUsuario',
templateUrl: 'templates/addUsuario.html',
controller: 'UserCtrl'
})
.state('tab',{
url: '/tab',
abstract:true,
templateUrl: 'templates/tabs.html',
})
.state('tab.empresas',{
url: '/empresas',
views: {
'tab-empresas': {
templateUrl: 'templates/empresas.html',
controller: 'EmpresaCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
})