Routing in my app is setup as follows:
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<ion-nav-view></ion-nav-view>'
});
$stateProvider
.state('app.todos', {
url: '/home',
views: {
todos: {
templateUrl: 'home.html',
controller: 'TodosCtrl'
}
}
});
$stateProvider
.state('app.help', {
url: '/help',
views: {
help: {
templateUrl: 'help.html'
}
}
});
$urlRouterProvider.otherwise('/home');
//index.html
<body>
<ion-nav-bar class="bar-positive"> </ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-checkmark" ui-sref="app.todos">
<ion-nav-view name="todos"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-help" ui-sref="app.help">
<ion-nav-view name="help"></ion-nav-view>
</ion-tab>
</ion-tabs>
<script type="text/ng-template" id="home.html">
<ion-view title="Todos">
<ion-content padding="true">
<h2>Home Page</h2>
<p>Here's the main route for the app.</p>
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="help.html">
<ion-view title="Help">
<ion-content padding="true">
<h2>Using the app</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
</ion-content>
</ion-view>
</script>
</body>
On app start, I would expect the state app.todos to become active and display the respective template.
This is not happening.
Plnkr available here:
http://plnkr.co/edit/LDNLHx?p=preview
take a look at this codepen http://codepen.io/aaronksaunders/pen/wKMEYP?editors=101
I moved the tabs template out to an HTML file and structured it how I am use to working with tabs and it seems to be working fine.
<script type="text/ng-template" id="tabs.html">
<ion-tabs class="tabs-positive">
<ion-tab icon="ion-checkmark" ui-sref="app.todos">
<ion-nav-view name="todos"></ion-nav-view>
</ion-tab>
<ion-tab icon="ion-help" ui-sref="app.help">
<ion-nav-view name="help"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
I also restructured your abstract state to handle the new structure
.state('app', {
url: "/app",
abstract: true,
templateUrl: "tabs.html"
})
Put names of views under the quotes.
views: {
'todos': {
templateUrl: 'home.html',
controller: 'TodosCtrl'
}
}
Related
My problem is, if I use the back button nothing happends. So the idea behind my code is, I want to have on different tabs different views in the side menu. This works without problems. But if I navigate from /groups to /group/:groupId/:groupName the back button is comming up but if i click on it, it doesn't navigate back to /groups, nothing happends.
Index.html
<body ng-app="JasserApp">
<div class="login-main-container" ng-show="showLogin" ng-controller="LoginCtrl">
<h5>JAPP</h5>
<div class="login-main-button-container social-wrap b">
<button class="facebook" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
</div>
<!--
The nav bar that will be updated as we navigate between views.
-->
<div ng-show="!showLogin" ng-controller="MainCtrl">
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</div></body>
Tabs.html (I think this is the file with problems)
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main content, usually <ion-nav-view> -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Groups" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/groups">
<ion-nav-view name="tab-groups"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Account" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<!--<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>-->
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-nav-view name="sideMenu"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
Routing for the views
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
// Each tab has its own nav history stack:
.state('tab.groups', {
url: '/groups',
views: {
'tab-groups': {
templateUrl: 'templates/tab-groups.html',
controller: 'GroupsCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groups-sideMenu.html',
}
}
})
.state('tab.group-detail', {
url: '/group/:groupId/:groupName',
views: {
'tab-groups': {
templateUrl: 'templates/group-detail.html',
controller: 'GroupsDetailCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groupDetail-sideMenu.html',
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/groups');
});
I hope the question is clear.
best regards
For some reason Tab view is visible at first however, when we navigate to Tab1 after visiting Tab2 html is not visible.
Plunker: http://plnkr.co/edit/naNhC5?p=preview
Route:
.state('home.tabs', {
cache: false,
url: '/i',
views: {
'mainContent': {
templateUrl: 'tabs.html'
}
}
})
.state('home.tabs.tab1', {
url: '/tab1',
views: {
'tab1': {
cache: false,
templateUrl: 'tab1.html'
}
}
})
.state('home.tabs.tab2', {
url: '/tab2',
views: {
'tab2': {
cache: false,
templateUrl: 'tab2.html'
}
}
})
Tabs Html:
<ion-tabs class="tabs-light ">
<ion-tab title="Tab1" ui-sref="home.tabs.tab1">
<ion-nav-view name="tab1"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab2" ui-sref="home.tabs.tab2">
<ui-view name="tab2"></ui-view>
</ion-tab>
</ion-tabs>
Tab-1 View:
<ion-view view-title="Tab1">
<ion-content class="padding has-header">
<h2>Tab1</h2>
</ion-content>
</ion-view>
There is a little error in your tabs.html file. You need to substitute ui-view with ion-nav-view:
<ion-tabs class="tabs-light">
<ion-tab title="Tab1" ui-sref="home.tabs.tab1">
<ion-nav-view name="tab1"></ion-nav-view>
</ion-tab>
<ion-tab title="Tab2" ui-sref="home.tabs.tab2">
<ion-nav-view name="tab2"></ion-nav-view> <!-- <<<< -->
</ion-tab>
</ion-tabs>
CHECK DEMO
Why?
What is the difference between ui-view in angularjs and ion-nav-view in ionic
I'm using the Ionic framework and I have a tabbed interface which uses routing with templates. For some reason no matter what URL I put into the $location.path it doesn't route to the correct place. I'm using the same URL I've been using before and I've never run into any problems so I don't understand why its not working.
Here is my tabs.html (Settings tab is not working):
<ion-tabs ng-controller = "tabs" class="tabs-icon-top tabs-color-active-positive">
<!-- Articles Tab -->
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<!-- Closets Tab -->
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" href="#/tab/closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<!-- Settings Tab -->
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select = "redirect()" ><!--href="#/tab/settings">-->
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is my controller (The redirect function gets called when the settings tab is selected):
.controller('tabs', function($scope, Settings, $rootScope, $location, $window) {
$scope.redirect = function() {
if($rootScope.loggedOn) {
console.log("ASSDA");
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
else {
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
}
});
As you can see i've tried both $window.location.href and $locaion.path - both didn't work. When the Settings tab is selected it just defaults to the article tab. Once your on the articles page and you click back onto settings it defaults back to the article page but this time you get a blank page. It is hitting my console.log("ASSDA") so the if statement is returning true.
Here is how my routes are set up:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl:'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
.state('tab.login', {
url: '/login',
templateUrl: 'templates/tab-login.html',
controller: 'settingsController'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/article');
});
app.js
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/tab/article");
$stateProvider
.state('tab', {
url: '/tab',
templateUrl: 'tab.html',
abstract: true
}).state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl: 'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
})
.controller('articlesController', function($scope) {})
.controller('closetController', function($scope) {})
.controller('settingsController', function($scope) {})
Add codes in index.html
<ion-nav-bar class="bar-energized nav-title-slide-ios">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="tab.html" type='text/ng-template'>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" ui-sref="tab.article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" ui-sref="tab.closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id='templates/tab-article.html' type='text/ng-template'>
<ion-view title="Articles Page">
<ion-content>
Articles page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-closet.html' type='text/ng-template'>
<ion-view title="Closet Page">
<ion-content>
Closet page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-settings.html' type='text/ng-template'>
<ion-view title="Settings Page">
<ion-content>
Settings page
</ion-content>
</ion-view>
</script>
I figured this out, I actually needed to add another hidden login tab in my tabs.html. I guess it was looking for a login tab which didn't exist - adding it to tabs.html fixed it. So it would be:
<ion-tab title="LogIn" hidden="true">
<ion-nav-view name="tab-logIn"></ion-nav-view>
</ion-tab>
I learn and try to create an ionic app with tabs combining the side menu.
Here is what it looks like (Codepen):
The side-menu part is okay. There is an additional link on my home page. Here is my problem: After clicking the link, I can go back to the previous page only through the back button. And my home tab doesn't work. I try to add another link to my about page, and either back button or home tab could go back to the previous page, which is the home page.
Here is my .js file:
angular.module('demo', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'contact.html'
})
})
.controller('MyCtrl', function ($scope, $ionicSideMenuDelegate) {
$scope.showRightMenu = function () {
$ionicSideMenuDelegate.toggleRight();
};
});
I looked for other similar issues and tried to switch the href to ui-sref. The home tab still doesn't work. Did I miss something?
And here is my .html:
<body ng-app="demo" ng-controller="MyCtrl">
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button class="button-clear">
<i class="ion-arrow-left-c"></i> Back </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" ui-sref="about">
<ion-nav-view name="about"></ion-nav-view>
</ion-tab>
<ion-tab title="Setting" icon="ion-navicon" ng-click="showRightMenu()">
</ion-tab>
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
<h1 class="title">Setting</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item>Setting</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content class="padding">
<a class="button button-stable button-block" ui-sref="contact">Contact</a>
<a class="button button-stable button-block" ui-sref="about">About</a>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view view-title="About">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
<script id="contact.html" type="text/ng-template">
<ion-view view-title="Contact">
<ion-content class="contactBg" scroll="false">
</ion-content>
</ion-view>
</script>
Tabs have history only when you navigate to a sub item; a child element in the tab. That's the only situation when you should have a back button inside a tab.
First thing I've noticed, you're referencing an old version of the framework:
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script>
I would suggest to use the latest, stable:
<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
Then you're trying to wrap everything inside a big container.
Normally what you would do is create a menu (menu.html):
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
<ion-nav-back-button>
</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"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="bar-dark">
<h1 class="title">Settings</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear href="#">
Settings
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Where you have a <ion-nav-view name="menuContent"></ion-nav-view>.
That's the place where all the views will be loaded.
I've hidden the navigation button for the menu so you won't see it:
<!--
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" menu-toggle="right"></button>
</ion-nav-buttons>
-->
Then you would have your tabs container (tabs.html):
<ion-view view-title="Tabs">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="app.tabs.home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon-on="ion-ios-information" icon-off="ion-ios-information-outline" ui-sref="app.tabs.about">
<ion-nav-view name="about"></ion-nav-view>
</ion-tab>
<ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
<ion-nav-view name="contact"></ion-nav-view>
</ion-tab>
<ion-tab title="Setting" icon-on="ion-navicon" icon-off="ion-navicon" ng-click="showRightMenu()"></ion-tab>
</ion-tabs>
</ion-view>
I've hidden the tab contacts class="ng-hide" cause I don't really understand what you're trying to do there (it will be loaded when you click the button in the home page):
<ion-tab title="Contact" ui-sref="app.tabs.contact" class="ng-hide">
<ion-nav-view name="contact"></ion-nav-view>
</ion-tab>
Each tab has got its ion-nav-view container where the specific tabs will be loaded:
<ion-nav-view name="home"></ion-nav-view>
You should configure your states so that the menu is the main, abstract state:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html"
})
.state('app.tabs', {
url: "/tabs",
views: {
'menuContent': {
templateUrl: "tabs.html",
controller: 'tabsController'
}
}
})
.state('app.tabs.home', {
url: "/home",
views: {
'home': {
templateUrl: "home.html",
}
}
})
.state('app.tabs.about', {
url: "/about",
views: {
'about': {
templateUrl: "about.html",
}
}
})
.state('app.tabs.contact', {
url: "/contact",
views: {
'contact': {
templateUrl: "contact.html"
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/tabs');
});
The state for the tabs container (app.tabs) will be loaded in the menuContent
.state('app.tabs', {
url: "/tabs",
views: {
'menuContent': {
templateUrl: "tabs.html",
controller: 'tabsController'
}
}
})
while all the others (specific tab) will have their own view:
.state('app.tabs.home', {
url: "/home",
views: {
'home': {
templateUrl: "home.html",
}
}
})
I've also used a controller for the tabs container => tabsController:
.controller('tabsController', function($scope, $ionicSideMenuDelegate) {
$scope.showRightMenu = function() {
$ionicSideMenuDelegate.toggleRight();
};
});
so you can manage your side-menu.
Roughly your app should look like this.
I am new to the ionic framework and was trying to achieve using the tabs component on a side menu page which works fine but the navigation animations from page to page with the slide-left-right animation declaration don't work.
for e.g.
there is a base state (app) which holds the side menu code
.state('app', {
url: '/app',
abstract: true,
templateUrl: "templates/menu.html",
controller: "appController"
})
and its loaded into
<body>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
...
side menu pages are loaded with the parent (app.pageOne, app.pageTwo etc)
Login and register pages are loaded at the root so is no need to include a side menu (login, register etc)
I created a tabs template to use on a side menu page with another base state for the tabs
.state('app.tabs', {
url: '/tab',
abstract: true,
views: {
'menuContent' :{
templateUrl: "templates/tabs.html"
}
}
})
and is loaded in the side menu view
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
Now if I have a page 'app.pageOne' and navigate to 'app.pageTwo' the slide animations works as expected.
But if I'm on a tab page 'app.tabs.home' and click a link to go to 'app.pageTwo' the nav-bar don't update nor is there any animation transition.
I'm aware it looks like a parent child issue but I just can't solve it, any ideas?
state are as follows eg
login
register
app ____page1
|____page2
|____Tabs
|____Home
|____Contact etc
page1 animation to page2 works fine
Home to page2 doesn't animate (It just loads straight away)
Hope that makes more sense.
check this url http://codepen.io/calendee/pen/JdtuG?editors=101
it works for me :)
html
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/0.9.27/js/ionic.bundle.min.js"></script>
</head>
<body>
<!-- ALL VIEW STATES LOADED IN HERE -->
<ion-nav-view></ion-nav-view>
<script id="entry.html" type="text/ng-template">
<ion-nav-bar animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back">
</ion-nav-bar>
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>Entry Page!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-tabs tabs-type="tabs-icon-only">
<ion-tab title="Tab 1" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 1 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 2" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 2 Content</h2>
</ion-content>
</ion-tab>
<ion-tab title="Tab 3" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
<ion-content has-header="true" padding="true">
<h2>Tab 3 Content</h2>
</ion-content>
</ion-tab>
</ion-tabs>
</ion-view>
</script>
<script id="mainContainer.html" type="text/ng-template">
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"
animation="nav-title-slide-ios7"
>
</ion-nav-bar>
<ion-nav-view name="main"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<div class="title">Side Menu</div>
</header>
<ion-content has-header="true">
<ul class="list">
<a ui-sref="entry" class="item">Back To Entry Page</a>
<a ui-sref="main.home" class="item" ng-click="toggleMenu()">Home</a>
<a ui-sref="main.tabs" class="item" ng-click="toggleMenu()">Tabs</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Home Page!</h1>
<a ui-sref="main.info" class="button button-positive">Info</a>
</ion-content>
</ion-view>
</script>
<script id="info.html" type="text/ng-template">
<ion-view title="{{navTitle}}" left-buttons="leftButtons">
<ion-content has-header="true" padding="true">
<h1>Info Page!</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
javascript
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url : '/entry',
templateUrl : 'entry.html',
controller : 'EntryPageController'
})
.state('main', {
url : '/main',
templateUrl : 'mainContainer.html',
abstract : true,
controller : 'MainController'
})
.state('main.home', {
url: '/home',
views: {
'main': {
templateUrl: 'home.html',
controller : 'HomePageController'
}
}
})
.state('main.info', {
url: '/info',
views: {
'main': {
templateUrl: 'info.html',
controller : 'InfoPageController'
}
}
})
.state('main.tabs', {
url: '/tabs',
views: {
'main': {
templateUrl: 'tabs.html',
controller : 'TabsPageController'
}
}
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('MainController', [ '$scope', function($scope) {
$scope.toggleMenu = function() {
$scope.sideMenuController.toggleLeft();
}
}])
.controller('EntryPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function() {
$state.go('main.home');
}
}])
.controller('HomePageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Home Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('InfoPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Info Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
.controller('TabsPageController', [ '$scope', '$state', function($scope, $state) {
$scope.navTitle = 'Tab Page';
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function(e) {
$scope.toggleMenu();
}
}];
}])
it took some tweaks but finally worked on my scenario