I am using ionic framework and I've created a new tab application.
What I need to do is to have a page as default or home page that doesn't have the tabs and then all the rest to have the tabs as normal.
Like a landing page.
How can I do this?
In recent ionic versions, this is easily achieved by setting
$ionicTabsDelegate.showBar(false);
Sample Code:
.directive('hideTabs', function($rootScope, $ionicTabsDelegate) {
return {
restrict: 'A',
link: function($scope, $el) {
$scope.$on("$ionicView.beforeEnter", function () {
$ionicTabsDelegate.showBar(false);
});
$scope.$on("$ionicView.beforeLeave", function () {
$ionicTabsDelegate.showBar(true);
});
}
};
})
SOURCE
Plunker Demo
First define a separate $stateProvider
for landing or default page [I think you already defined a $stateProvider
for other pages] in app.js
.The app.js
file should be like this,
app.js
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
controller: 'homeCtrl',
templateUrl: 'home.html'
}
}
})
.state('tabs.settings', {
url: '/settings',
views: {
'settings-tab': {
controller: ' signOutCtrl',
templateUrl: 'settings.html'
}
}
});
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
$urlRouterProvider.otherwise('/landing');
});
Also create a html page for tabs.
tabs.html
<ion-view title="Home">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="{{tab1Title}}" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="{{tab2Title}}" icon="ion-gear-a" href="#/tab/settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="{{tab3Title}}" href="#/landing" icon="ion-log-out">
</ion-tab>
</ion-tabs>
</ion-view>
Also you need to hide <ion-nav-bar>
in your landing
page by using hide-nav-bar="true "
.
landing.html
<ion-view hide-nav-bar="true ">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h1 style="text-align: center;">Welcome To Landing Page</h1>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a>
</ion-content>
</ion-view>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With