Skip to content

Instantly share code, notes, and snippets.

@thetruechar

thetruechar/Ionic Nightly Tabs with one navigation history.markdown

Created July 24, 2015 16:39
Show Gist options
  • Save thetruechar/6315ef8f08b22ea20aa0 to your computer and use it in GitHub Desktop.
Save thetruechar/6315ef8f08b22ea20aa0 to your computer and use it in GitHub Desktop.
Download ZIP
Ionic Nightly Tabs with one navigation history
Raw
index.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 Nightly Template</title>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-chevron-left">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="tabs.html" type="text/ng-template">
<ion-nav-view></ion-nav-view>
<div class="tabs">
<a href="#/home" class="tab-item has-badge" ng-class="{'tab-item-active': isAt('home')}">
<span class="badge">3</span>
<i class="icon icon ion-home"></i>
<span class="tab-title">Home</span>
</a>
<a href="#/about" class="tab-item" ng-class="{'tab-item-active': isAt('about|inner')}">
<i class="icon icon ion-navicon"></i>
<span class="tab-title">About</span>
</a>
<a href="#/help" class="tab-item" ng-class="{'tab-item-active': isAt('help')}" nav-clear>
<i class="icon icon ion-help"></i>
<span class="tab-title">Help</span>
</a>
</div>
</script>
<script id="home.html" type="text/ng-template">
<ion-view title="Home">
<ion-content class="padding">
<h1>Home</h1>
<p><a href="#/inner">Inner view on About tab</a></p>
<p>The help tab resets the navigation history</p>
<p>Currently having some css issue that hides the title on the tabs, but it can be fixed...</p>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content class="padding">
<h1>About</h1>
<a href="#/inner">Inner view on About tab</a>
</ion-content>
</ion-view>
</script>
<script id="inner.html" type="text/ng-template">
<ion-view title="Inner view">
<ion-content class="padding">
<h1>Inner view</h1>
<p>&darr; Notice that the About tab is active down there &darr;</p>
</ion-content>
</ion-view>
</script>
<script id="help.html" type="text/ng-template">
<ion-view title="Help">
<ion-content class="padding">
<h1>Help</h1>
</ion-content>
</ion-view>
</script>
</body>
</html>
Raw
Ionic Nightly Tabs with one navigation history.markdown
Raw
script.js
var app = angular.module('ionicApp', ['ionic']);
app.config(function ($stateProvider, $urlRouterProvider) {
var home = {
url: '/home',
templateUrl: 'home.html'
};
var about = {
url: '/about',
templateUrl: 'about.html'
};
var help = {
url: '/help',
templateUrl: 'help.html'
};
var inner = {
url: '/inner',
templateUrl: 'inner.html'
};
var tabs = {
abstract: true,
templateUrl: 'tabs.html',
controller: function($scope, $location) {
$scope.isAt = function(path) {
return new RegExp(path).test($location.path());
};
}
}
$stateProvider.state('tabs', tabs);
$stateProvider.state('tabs.home', home);
$stateProvider.state('tabs.about', about);
$stateProvider.state('tabs.inner', inner);
$stateProvider.state('tabs.help', help);
$urlRouterProvider.otherwise('/home');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment