not sure why i am having such a hard time making tabs work in the ionic app..
Here is the html:
<body>
<ion-nav-bar class="bar-positive"> </ion-nav-bar>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
Here is the routing:
var app = angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
home: {
template: 'home.html',
}
}
});
$urlRouterProvider.otherwise('/home');
});
When I run this simple app, I expect the tab to display a title and icon.. but that's not happening..
There seems to be no explicit error messages which makes things worse.
http://plnkr.co/edit/K1nAtL
Just replace
<ion-tabs class="tabs-positive tabs-icon-only">
With
<ion-tabs class="tabs-positive tabs-icon-top">
then add the ionic font it will work.
Related
ionic one tab go to another tab's child page can't go back to another tab
The problem: There's a button can go to state 'tab.settings.sub' in state 'tab.home' page, when first time I enter into state 'tab.home' , then click button to enter into state 'tab.setting.sub' but I can't go back to state 'tab.setting'.
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs>
<ion-tab title="home" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="settings" ui-sref="tabs.settings.index">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content>
<button class="button" ng-click="home.goSub()">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/settings.html" type="text/ng-template">
<ion-view view-title="settings">
<ion-content>
<ion-item ui-sref="tabs.settings.sub">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/sub.html" type="text/ng-template">
<ion-view view-title="settings/sub">
<ion-content>
welcome to settings/sub
</ion-content>
</ion-view>
</script>
The problem in http://codepen.io/piwinux/pen/BNYXKd
Thank you for help.
Okay the issue here is that you did not declared your "Home" tab abstract nor its substates in your MyConfig.js. In order to implement navigation in your "Home" tab you have to use the same pattern you have for the "Settings" tab:
tabs.home state with abstract: true and template: '<ion-nav-view></ion-nav-view>' to navigate in the tab.
tab.home.index initial route of your "Home" tab with templateUrl: 'templates/home.html'.
tab.home.nextRoute for the next route within "Home" tab using $state.go ('tabs.home.sub'); instead of $state.go ('tabs.settings.sub'); in your HomeCtrl to access it.
.state ('tabs', {
abstract: true,
url: '/tab',
templateUrl: 'templates/tabs.html'
})
.state ('tabs.home', {
abstract: true,
url: '/home',
views: {
'home-tab': {
template: '<ion-nav-view></ion-nav-view>',
controller: 'HomeCtrl as home'
}
}
}).state ('tabs.home.index', {
url: '',
templateUrl: 'templates/home.html'
})
.state ('tabs.home.sub', {
url: '/sub',
templateUrl: 'templates/sub.html'
})
I made a tabbed page inside side menu with ionic framework, and run perfectly in PC.
but when i upload it to ionic view (view.ionic.io), and run it on my phone,
the tab disappear.
My Tab Script :
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs class="tabs-positive tabs-icon-top">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/palylist/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/playlist/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="#/app/playlist/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
Here i made the complete code in codePen : http://codepen.io/MarcelAng/pen/KrJyYp
Why ?, any idea ?,
thanks.
Try loading the template from app.js by using state / template URL this works for me. Somehow when using script it just doesn't work. Hope this helps
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
It seems impossible to navigate to a child state of a sibling or to a child state of an ancestor.
The workaround I used was to put all the states on the same level, which allows me to navigate to any state I need (navigate from a push notification to a nested state, navigate from one nested state to a state inside another parent, etc ...).
The problem with that method is that states and controllers do not inherit any code, leading to code duplication. Moreover, there are cases where the navigation is simply broken and the ion-nav-back-button do not behave as it should.
TLTR: What structure must be used to have a fully navigable application (check out the pen), when you use tabs and nested states ?
Here is the pen describing the problem : http://codepen.io/ruslan-fidesio/pen/LkyAkm
HTML :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<script id="home.html" type="text/ng-template">
<ion-view view-title="Home">
<ion-content>
<br/>
<a ui-sref="app.tabs.themes.details">Go to Child : broken</a>
<br/>
<br/>
<a ui-sref="app.other">Go to Other : broken</a>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-tabs class="tabs-positive">
<ion-tab title="home" ui-sref="app.tabs.home">
<ion-nav-view name="tabs-home"></ion-nav-view>
</ion-tab>
<ion-tab title="themes" ui-sref="app.tabs.themes.list">
<ion-nav-view name="tabs-themes"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="themes/abstract.html" type="text/ng-template">
<div class="bar bar-subheader bar-dark" sticky>
Themes subheader
</div>
<ion-nav-view></ion-nav-view>
</script>
<script id="themes/list.html" type="text/ng-template">
<ion-view view-title="Themes">
<ion-content class="has-subheader">
<p>Parent View</p>
<a ui-sref="app.tabs.themes.details">Go to Child : OK !</a>
</ion-content>
</ion-view>
</script>
<script id="themes/details.html" type="text/ng-template">
<ion-view view-title="Theme X">
<ion-content class="has-subheader">
Child View
</ion-content>
</ion-view>
</script>
<script id="other.html" type="text/ng-template">
<ion-view view-title="Other">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-content>
<br/>
Other View
<br/>
<a ui-sref="app.tabs.themes.details">Go to Child : broken</a>
</ion-content>
</ion-view>
</script>
</body>
</html>
JS :
var app = angular.module(
'app', [
'ionic'
]
);
app.run(
function($ionicPlatform, $rootScope) {
$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();
}
}
);
}
);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
template: '<ion-nav-view></ion-nav-view>'
})
.state('app.tabs', {
url: '/tabs',
abstract: true,
templateUrl: 'tabs.html'
})
.state('app.tabs.home', {
url: '/home',
views: {
'tabs-home': {
templateUrl: 'home.html'
}
}
})
.state('app.other', {
url: '/other',
templateUrl: 'other.html'
})
.state('app.tabs.themes', {
url: '/themes',
abstract: true,
views: {
'tabs-themes': {
templateUrl: 'themes/abstract.html'
}
}
})
.state('app.tabs.themes.list', {
url: '/list',
templateUrl: 'themes/list.html'
})
.state('app.tabs.themes.details', {
url: '/details',
templateUrl: 'themes/details.html'
});
$urlRouterProvider.otherwise('/app/tabs/home');
});
app.config(
['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom');
$ionicConfigProvider.navBar.alignTitle('center');
}]);
After some research it is related to IonTabs and separated ion-nav-views.
(check out this picture : http://ionicframework.com/img/diagrams/tabs-nav-stack.png )
In this case, it is better to replace tabs with custom "tabs" implementation using only one ion-nav-view as shown here : http://codepen.io/ruslan-fidesio/pen/RRgpjL
HTML :
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<better-tabs style="positive">
<better-tab state="app.tabs.home" title="Home"></better-tab>
<better-tab state="app.tabs.themes.list" root-state="app.tabs.themes" title="Themes"></better-tab>
</better-tabs>
JS :
app.directive(
'betterTabs',
function() {
return {
restrict: 'E',
compile: function(elem, attrs) {
var footer = angular.element('<ion-footer-bar></ion-footer-bar>');
var tabs = elem.find('better-tab');
elem.append(footer);
footer.append(tabs);
if (attrs.style) {
footer.addClass('bar-' + attrs.style);
}
}
};
}
);
app.directive(
'betterTab',
['$state', function($state) {
return {
scope: {
state: '#',
rootState: '#',
title: '#'
},
restrict: 'E',
required: ['^betterTabs'],
link: function(scope) {
scope.$state = $state;
},
template: function() {
return '<a ui-sref="{{ state }}" ng-class="{active: $state.includes(\'{{ rootState ? rootState : state }}\')}">{{ title }}</a>';
}
};
}]
);
I am creating an App in ionic but I am stuck in routing issues. Currently I have an app view with a side menu and on Home page I have two tabs Tab 1 and Tab 2 which have different UI Views tab1.html & tab2.html
Tabs Code in home.html
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light hp" tabs-style="tabs-icon-top" tabs-type="tabs-positive" style="top: 60px !important;" animation="slide-left-right">
<!-- Dashboard Tab -->
<ion-tab title="Tab 1" href="#/home/tab1">
<ion-nav-view name="tab1-content"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Tab 2" href="#/home/tab2">
<ion-nav-view name="tab2-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
tab1.html and tab2.html code:
<ion-view view-title="Tab 1">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 1 Content
</ion-content>
</ion-view>
<ion-view view-title="Tab 2">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 2 Content
</ion-content>
</ion-view>
Routing Code in 'routing.js'
.state('menu.home', {
url: '/page21',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('menu.about', {
url: '/page10',
views: {
'side-menu21': {
templateUrl: 'templates/about.html',
controller: 'settingsCtrl'
}
}
})
... and so on
Issue:
When I navigate Home from menu or from login page (which is separate) I didn't see tabs' content. Can anyone help me what's wrong?
The page url seems like: http://localhost/testapp/#/side-menu21/page21
Your assistance in this issue will be appreciated.
Thanks!
I think you should add abstract property in home tab state :
.state('menu.home', {
url: '/page21',
abstract: true,
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
you need 2 abstract states, one for a side menu, and one for Tabs itself, if you can create a plunkr/codepen of what you have I could be able to help you.
Can I have 2 states with abstract:true i.e base layout for different tabs?
Forexample,
for tab-1, tab-2 and tab-3, I need to have tabs.html as abstract:true in state provider and for tab-4, I need to have menu.html as abstract:true in state provder so that subsequent states inherit from it.
Something like this:
.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'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.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'
}
}
})
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html",
controller: 'EventsCtrl'
}
}
})
tabs.html looks like this:
<!--
Create tabs with an icon and label, using the tabs-positive style.
Each tab's child <ion-nav-view> directive will have its own
navigation history that also transitions its views in and out.
-->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Status" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/dash">
<ion-nav-view name="tab-dash"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Chats" 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>
<!--Practice Tab -->
<ion-tab title="Events" icon-off="ion-ios-arrow-forward " icon-on="ion-ios-arrow-forward-utline" href="#/tab/events">
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-tab>
</ion-tabs>
menu.html:
<ion-side-menus enable-menu-with-back-views="true">
<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">
<ion-header-bar class="bar-stable">
<h1 class="title">My app</h1>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item nav-clear menu-close href="#/events">
Events
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
It does not work though.Is it possible to do it? If not what are the alternative?
Yes, you can add multiple abstract states.
Here is the Documentation for Angular states. According to the docs:
An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.