I work on default created app: ionic start conference sidemenu
& I want to have in my app the same header(with Back button and other custom buttons) on each page. I tried to define a custom ion-nav-bar in index.html as following:
<html>
...
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body> </html>
and all the other pages looks like this:
<ion-view view-title="PageN">
<ion-content>
<ion-list>
<ion-item ng-repeat="article in articles" href="#/app/articles/{{article.id}}">
{{article.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
routing looks like:
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
} if (window.StatusBar) { StatusBar.styleDefault(); }
}); })
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl' })
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
},
data: {
authorization: true,
redirectTo: 'app.login'
}
})
$urlRouterProvider.otherwise('/app/sessions');
});
After I launched the application, my custom navbar is hidden. I can see only default navbar. How to customize the default navbar or how to replace it with a custom one? I already tried some solutions including header but without success.
Anyone?