Firstly, we need to set up the routes in app.js file. In this case we have our menu template in menu.html file. We need to name the menu state (e.g. app) and then all other pages will have states with this syntax menuStateName.pageStateName. We will also need to set abstract: true for the menu state.
Below is an example:
ionicApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'menu.html'
})
.state('app.add', { // add item page
url: "/add",
views: {
'menuContent': {
templateUrl: 'add-item.html'
}
}
})
.state('app.list', { // list items page
url: "/list",
views: {
'menuContent': {
templateUrl: 'list.html'
}
}
})
.state('app.edit', { // edit item page
url: "/edit/:itemId",
views: {
'menuContent': {
templateUrl: 'edit-item.html'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/add');
}
]);
On index.html, we just need to put <ion-nav-view></ion-nav-view>.
<body ng-app="ionicApp">
<ion-nav-view></ion-nav-view>
</body>
Then on each page file, we have ion-view and ion-content:
<ion-view view-title="PageTitle">
<ion-content>
... your markup content ...
</ion-content>
</ion-view>
Then on the menu markup file (menu.html), we have something like this:
<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
<ion-nav-bar class="bar">
<!--<ion-nav-back-button>
</ion-nav-back-button>-->
<ion-nav-buttons side="left">
<button class="button button-icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="custom-brown">
<div class="title">Menu Title</div>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/add">
<b>Add Item</b>
</ion-item>
<ion-item menu-close href="#/app/list">
<b>List Items</b>
</ion-item>
<ion-item menu-close href=". . .">
<b>. . .</b>
</ion-item>
<ion-item menu-close href=". . .">
<b>. . .</b>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
On the example above, I use enable-menu-with-back-views="true" so that the menu icon will always be displayed. I also commented out <ion-nav-back-button></ion-nav-back-button> to hide the back button so only the menu icon will be displayed.We can also have the menu items populated dynamically. We could use something like below:
<ion-item menu-close ng-repeat="item in vm.items" ui-sref="app.edit({itemId: {{item.itemId}}})">
<b>Edit :</b> {{item.name}}
</ion-item>
No comments:
Post a Comment