1) Main page is index.html
2) By default, Using router config i redirect to login page - template/login.html
3) From login page, if login successful, i will redirect to the home page with sidemenu - template/landing.html
4) In homepage, when i click the hamburger icon, i get sidemenu with options
5) But when i click an option in sidemenu, for example "updateProfile" template/updateProfile.html , i'm not able to see the corresponding updateProfile page in homepage
i tried making changes in config, but i'm not making any progress. kindly help me out.
Below is my code.
index.html
<body ng-app="myapp">
<ion-nav-view></ion-nav-view>
</body>
template/login.html
<ion-view view-title="Sign in">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-content>
<input type="text" placeholder="#handle" ng-model="userName" />
<button class="button button-block button-positive" ng-click="signIn()">Sign in</button>
</ion-content>
</ion-view>
app.js
app.controller('LoginController',function($scope,$state){
$state.go('landing');
};
});
app.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('login',{
url : '/',
templateUrl : 'template/login.html',
controller : 'LoginController',
cache : false
});
$stateProvider.state('landing',{
url : '/landing',
templateUrl : 'template/landing.html',
controller : 'LandingController'
}).state('landing.updateProfile', {
url: "/updateProfile",
views: {
'menuContent' : {
templateUrl: "template/updateProfile.html"
}
}
});
$urlRouterProvider.otherwise('/');
});
template/landing.html
<ion-view view-title="Landing">
<ion-nav-bar class="bar-stable">
</ion-nav-bar>
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon button-clear ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable"><h4>Do your thing</h4></ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/yourDishes">Your Events</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-view>
template/updateProfile.html
<ion-view view-title="Update Profile">
<ion-content>
update profile
</ion-content>
</ion-view>
i got the issue fixed.
in template/landing.html href should be of below format, only then it will match the corresponding url mentioned in the config function.
<ion-item menu-close href="#/landing/updateProfile">Update Profile</ion-item>
<ion-item menu-close href="#/landing/yourDishes">Your Events</ion-item>
Related
I'm new member in ionic and I want create a simple app with menu sidebar left and in fist page I have a list item, when I click item on list I will show new sceen detail item, but I want hold navigation bar in top. Here is my sceen app I want create.
I created a menu sidebar and list item same left picture but when I set event ng-click for item in list I can't create new page same right picture.
How I can hold navigationbar and change content to new page?
Here is my code:
menu.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear 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" width="{{dev_width}}">
<ion-header-bar class="bar-stable">
<div class="bar-header">
</div>
</ion-header-bar>
<ion-content class="custom">
<ion-list>
<ion-item menu-close href="#/menu/groupa">
<img src="{{availableImages[0].src}}" />{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupb">
<img src="{{availableImages[1].src}}" />{{availableImages[1].text}}
</ion-item>
<ion-item menu-close href="#/menu/groupc">
<img src="{{availableImages[1].src}}"/>{{availableImages[0].text}}
</ion-item>
<ion-item menu-close href="#/login">
Logout
</ion-item>
</ion-list>
</ion-content>
<ion-footer-bar >
<span class="color-title" ><img src="{{availableImages[2].src}}" width="30" style="vertical-align:middle ;margin-right:15px"/>{{availableImages[2].text}} </span>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
Groupb.html:
<ion-view align-title="center">
<ion-nav-title>
<span class="color-title">Group B</span>
</ion-nav-title>
<ion-content class="list-groupa">
<div ng-show="isLoading">Loading.....</div>
<ion-list>
<ion-item ng-repeat="employee in datashow" type="item-text-wrap" ng-click="clicker(datashow)">
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
<!-- </view> -->
</ion-content>
</ion-view>
$scope.clicker = function(myValue){
$scope.dataToShare = myValue;
srvShareData.setData($scope.dataToShare);
$state.go('detailgroupb');
};
Detailgroupb.html
<ion-view align-title="center">
<ion-nav-bar >
<button ng-click="goBack()">
Set title to banana!
</button>
</ion-nav-bar>
<ion-content class="list-groupa">
<ion-list>
<ion-item ng-repeat="employee in sharedData" type="item-text-wrap" ng-click="clicker(employee)">
<!-- href="#/employee/{{employee.id}}" -->
<span class="item-group"><b>{{employee.Type}}</b></span>
<p><span class="item-group">test desc2 {{employee.Distance.Value}}</span></p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
app.js
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('login',{
url:'/login',
templateUrl:'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu',{
url:'/menu',
templateUrl:'templates/menu.html',
controller:'MenuCtrl'
})
.state('menu.groupa', {
url: '/groupa',
views: {
'menuContent': {
templateUrl: 'templates/groupa.html',
controller:'GroupaCtrl'
}
}
})
.state('menu.groupc', {
url: '/groupc',
views: {
'menuContent': {
templateUrl: 'templates/groupc.html',
controller:'GroupcCtrl'
}
}
})
.state('menu.groupb', {
url: '/groupb',
views: {
'menuContent': {
templateUrl: 'templates/groupb.html',
controller:'GroupbCtrl'
}
}
})
.state('detailgroupb',{
url:'/detailgroupb',
templateUrl:'templates/detailgroupb.html',
controller:'GroupbDetailCtrl'
})
;
$urlRouterProvider.otherwise("/login");
})
.config(function($ionicConfigProvider) {
// note that you can also chain configs
$ionicConfigProvider.navBar.alignTitle('center');
});
My result:
I am making an ionic app and I am trying to create a home page with side menu, but it does not show properly. I ve seen multiple examples and I tried to do exactly the same steps, without success. The problem is that the ion-nav-buttons on the main menu and the ion-header-bar in the side menu do not show.
This is the home.html:
<ion-side-menus enable-menu-with-back-views="true">
<!-- Left Menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ui-sref="">Test 1</ion-item>
<ion-item ui-sref="">Test 2</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
This is the menu-content.html:
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the route.js:
.state('home', {
url: '/home',
abstract:true,
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('home.menu-content', {
url: '/home-menu-content',
views: {
'homeContent' :{
templateUrl: 'templates/home-menu-content.html',
controller : 'HomeMenuCtrl'
}
}
})
and these are the controllers:
.controller('HomeCtrl', function ($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope) {
})
This is the home.html:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" data-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="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item data-menu-close href="#/app/home">
Search
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
This is the menu-content.html
<ion-view style="" title="Home">
<ion-content padding="true">
<label style="" class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input placeholder="Search" type="search">
</label>
<br>
<ion-list style="">
<ion-item style="" ui-sref="ad">Ad 1</ion-item>
<ion-item style="" ui-sref="ad">Ad 2</ion-item>
<ion-item style="" ui-sref="ad">Ad 3</ion-item>
</ion-list>
</ion-content>
</ion-view>
These are the states inside the app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/home.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home-menu-content.html',
controller: 'HomeMenuCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/home');
});
and these are the controllers:
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
$scope.toggleLeft = function () {
$ionicSideMenuDelegate.toggleLeft();
};
})
.controller('HomeMenuCtrl', function ($scope, $ionicModal, $timeout) {
})
Its works fine.Tested
I found the problem to this and it was very simple. I had to create an <ion-nav-bar> for the main menu. The <nav-buttons> were not showing in the main header bar of my project. Now, the snippet for the main menu is this:
<!-- Main Menu -->
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button-icon icon ion-email"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="homeContent"></ion-nav-view>
</ion-side-menu-content>
I have issue is my back button is not showing in detail page, after navigating it from tab. I have my states like
$stateProvider
.state('poets', {abstract: true, url: '/poets', templateUrl: 'views/poets/index.html'})
.state('poets.list', {url: '/poet-list', views: {'poets-list': {templateUrl: 'views/poets/poet.list.html', controller: 'PoetCtrl'}}})
.state('poets.popular', {url: '/poet-popular', views: {'poets-popular': {templateUrl: 'views/poets/poet.popular.html', controller: 'PoetPopularCtrl'}}})
.state('poets-detail', {url: '/poets/detail/:itemId', templateUrl: 'views/poets/detail.html', controller: 'PoetDetailCtrl'})
'poets.popular' & 'poets.popular' are two tabs both are navigating to detail page. I would like to add back button on my detail page so that, it navigate back to the previous state.
index.html
<ion-view>
<ion-tabs class="tabs-striped tabs-color-balanced tabs-icon-left">
<ion-tab icon="ion-home" title="All Poets" href="#/poets/poet-list">
<ion-nav-view name="poets-list"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-home" title="Popular" href="#/poets/poet-popular">
<ion-nav-view name="poets-popular"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
poet.list.html or poet.popular.html are almost same, I have written single as.
<ion-view title="Poets">
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button ng-click="popover.show($event)" class="button button-icon"><i class="icon ion-more"></i></button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item href="#/poets/detail/{{item.id}}" class="item-icon-right item item-text-wrap"
ng-repeat="item in data" type="item-link">
<h2>{{item.name}}</h2>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
<ion-infinite-scroll ng-if="!end" on-infinite="fetchMore()"></ion-infinite-scroll>
</ion-content>
</ion-view>
detail.html
<ion-view view-title="{{data.name}}">
<ion-nav-bar class="bar bar-balanced">
<ion-nav-back-button class="button-clear"><i class="ion-arrow-left-a"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-buttons side="primary">
<button class="button button-icon" menu-toggle="left"><i class="icon ion-navicon"></i></button>
</ion-nav-buttons>
<ion-content>
....
</ion-content>
</ion-view>
CODE
http://codepen.io/hawkphil/pen/LEBNVB
I have two pages (link1 and link2) from the side menu. Each page has 2 tabs:
link1: tab 1.1 and tab 1.2
link2: tab 2.1 and tab 2.2
I am using ion-tabs for each page to contain the 2 tabs.
This is a very simple design: I want to click on the link1 or link2 to go to appropriate route. But for some reason, the state has changed correctly (see Console) but the actual html template did not get updated. Can you find out what's wrong and how to fix?
There seems to be some caching problem or something.
HTML
<title>Tabs Example</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</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="bar-balanced">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close ui-sref="link1">
Link 1
</ion-item>
<ion-item nav-clear menu-close ui-sref="link2">
Link 2
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
<ion-side-menu side="right">
<ion-header-bar class="bar-calm">
<h1 class="title">Right Menu</h1>
</ion-header-bar>
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
<div class="list">
<a class="item item-avatar" href="#">
<img src="img/avatar1.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</ion-side-menus>
<script id="link1.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 1.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
<script id="link2.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.1</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view view-title="Home">
<ion-content has-header="true" has-tabs="true" padding="true">
<p>Test</p>
<p>Test Tab 2.2</p>
</ion-content>
</ion-view>
</ion-tab>
</ion-tabs>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('link1', {
url: "/link1",
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
$urlRouterProvider.otherwise("/link1");
})
.controller('AppCtrl', ['$scope', '$rootScope', '$state', '$stateParams', function($scope, $rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(evt, toState, toParams, fromState, fromParams) {
console.log(toState);
});
}])
You are currently referring to the latest release which is 1.0.0-rc.0 which has bug while transition from one state to another it is not loading the view.
Further research found that, they had 14 beta releases from version 1.0.0-beta.1 to 1.0.0-beta.14 after they are now on version 1.0.0-rc.0 which is release candidate.
nav-view is working perfect till 1.0.0-beta.13 version but it stop working after 1.0.0-beta.14(which is last beta release),
I would suggest you to degrade your version to 1.0.0-beta.13, I know depending on beta version is not good thing but still until ionic release stable version you have to rely on it.
Working Codepen with 1.0.0-beta.13
Update:
Your problem is your view are getting cached because by default caching is enabled inside your ionic app.
Straight from Ionic Doc (Latest Release doc 1.0.0-beta.14)
By default, views are cached to improve performance. When a view is
navigated away from, its element is left in the DOM, and its scope is
disconnected from the $watch cycle. When navigating to a view that is
already cached, its scope is then reconnected, and the existing
element that was left in the DOM becomes the active view. This also
allows for the scroll position of previous views to be maintained.Maximum capacity of caching view is 10.
So by mentioning cache: false on $stateProvider states function or disabling cache of nav-view globally by doing $ionicConfigProvider.views.maxCache(0); inside angular config phase.
So in your case this is what exact problem, your 1st view is getting cache & showing it again & again
There are 3 ways to solve this issue
1. Disable cache globally
Disable all caching by setting it to 0, before using it add $ionicConfigProvider dependency.
$ionicConfigProvider.views.maxCache(0);
Codepen
2. Disable cache within state provider
$stateProvider
.state('link1', {
url: "/link1",
cache: false,
views: {
'menuContent': {
templateUrl: "link1.html"
}
}
})
.state('link2', {
url: "/link2",
cache: false,
views: {
'menuContent': {
templateUrl: "link2.html"
}
}
});
Codepen
3. Disable cache with an attribute
<ion-tab title="Home" icon="ion-home">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information">
<ion-view cache-view="false" view-title="Home">
<!-- Ion content here -->
</ion-view>
</ion-tab>
Codepen
I believe the updated approach would be great to implement. Thanks.
Github issue for the same issue link here
I am trying to use ionic Framework to build a content menu which has 2 parts, coming from different controllers. I have specified them as view: menuContent and view: menuSubcontent below.
HTML
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="main bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon"></i></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
<ion-nav-view name="menuSubcontent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Left</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close ng-click="login()">
Login
</ion-item>
<ion-item nav-clear menu-close href="#/app/morestuff">
etc.
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
ROUTER
.state('app.playlists', {
url: "/playlists",
views: {
'menuContent': {
templateUrl: "templates/playlists.html",
controller: 'PlaylistsCtrl'
},
'menuSubcontent': {
template: "<span>subcontent of playlists</span>"
}
}
})
When the page renders, the <ion-nav-view name="menuSubcontent"> is not visible although it is in the DOM. I added some CSS properties to make it visible:
z-index: 2
margin-top: 400px; /* some arbit large number */
I was wondering if this is the right approach (adding my own css classes to menuSubcontent) or is there systematic way of using the framework which takes out the guesswork in positioning with multiple views. I am still learning how to use this framework.
<ion-side-menus ng-controller="SideMenuController">
<!-- Header Changes -->
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar bar-header bar-positive">
<!-- Open Sidebar Menu Start-->
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
<!-- Open Sidebar Menu End -->
<ion-nav-back-button class="button-clear">
<i class="ion-chevron-left"></i> Back
</ion-nav-back-button>
<!-- Open Sidebar Menu Start-->
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-refresh" ng-click="doRefresh()"></button>
</ion-nav-buttons>
<!-- Open Sidebar Menu End -->
</ion-nav-bar>
<ion-nav-view name="main" animation="slide-left-right">
</ion-nav-view>
</ion-side-menu-content>
<!-- Header Changes -->
<!-- SideMenu Contents -->
<ion-side-menu side="left" class="light-bg dark-border">
<header class="bar bar-header bar-light">
<h1 class="title">Route Menu</h1>
</header>
<ion-content class="has-header">
<div class="list">
<a menu-close class="item item-icon-left" href="#/app/home">
<i class="icon fa fa-bank fa-ionicon"></i>
Home
</a>
</ion-content>
<!-- SideMenu Contents -->
</ion-side-menu>
</ion-side-menus>
//** abstract route for sidemenu
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/sidemenu.tpl.htm'
});
//!** Home
$stateProvider.state('app.home', {
url: '/home',
views: {
'main': {
templateUrl: 'app/home/home.tpl.htm'
}
}
});
Define your template as abstract in your routes :
Sources : http://codepen.io/ionic/pen/vqhzt
If you keep multiple in same page then you have to configure like below,
<ion-tab title="Rooms" icon-off="ion-ios7-box-outline" icon-on="ion-ios7-box" href="#/tab/rooms">
<ion-nav-view name="tab-rooms"></ion-nav-view>
</ion-tab>
<ion-tab title="Chat" icon-off="ion-ios7-chatboxes-outline" icon-on="ion-ios7-chatboxes" href="#/tab/chat">
<ion-nav-view name="tab-chat"></ion-nav-view>
</ion-tab>
So based on url appropriate view will get render,
Else you can create separate state for each view like below,
.state('menuLogin', {
url: '/menuLogin',
abstract: true,
templateUrl: 'templates/loginMenu.html'
})
.state('menuMain', {
url: '/menuMain',
cache:false,
abstract: true,
templateUrl: 'templates/mainMenu.html'
})
.state('menuLogin.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('menuMain.main', {
url: '/main',
views: {
'menuContent': {
templateUrl: 'templates/main.html',
controller: 'MainCtrl'
}
}
})
So first state is belongs to login menu and second is belongs to main menu.
Loginmenu.html :
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>
and Mainmenu.html :
<ion-nav-bar class="bar-positive" align-title="center" style="text-align:center;">
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent" align-title="center"></ion-nav-view>
So you can customize state like this.
Hope this helps you.