Angular + Ionic: Multiple Nav Stacks - angularjs

Question

I just started learning Angular + Ionic this week. What I'm trying to do is get something like this: http://codepen.io/calendee/pen/IAjoL.
Except, I'd like to have a "Back" button in the Nav Bar of the Tabs page that takes me back to the Sign In page. i.e. I'm trying to get the Sign In Page, and the Tabs page to be part of a separate nav stack.
I've tried a couple of things, but in all cases I can only either a) Render the back button, b) Get the content to show up in each tab. Not both. Any help would be greatly appreciated!
Thanks,
Saswat
Note: I'm not sure why, but Stack Overflow apparently needs some code for a codepen link. So here it is.

Answer 1

I was part of the team here at Taqtile that developed Pontofrio's mobile site (a well known Brazilian retail brand) that has a very similar effect to what your are looking for and we accomplished that using angularjs.
We used just css for the stacks element location/animation (which would be your code pen code, basically) but the trick for the views persistency is just the use of ui-router to keep the old views state alive while you move then.
Oh, it also allowed the user to go back states using the back button or swiping (using hammerjs and angular-hammer - when we developed it, the last stable angularjs release was still 1.1.5, so we sadly didn't have all touch events out of the box...)

Answer 2

Its actually quite easy. You need to add another parent state which will be your sign-in form. And, have the tabs following another parent state of which will have the navigating back button. Download the ionic starter app for tabs and change the app.js, controller.js and tabs.html. Create a signin.html, to know the flow.
//app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.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 && 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) {
// 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
.state('signin',{
url: '/signin',
templateUrl: 'templates/signin.html',
controller: 'signInCtrl'
})
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
// 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'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/signin');
});
In signin.html
<ion-view title="'Sign-In'" left-buttons="leftButtons" right-buttons="rightButtons">
<ion-content has-header="true">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<p class="text-center">
Forgot password
</p>
</div>
</ion-content>
</ion-view>
In tabs.html
<!--
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-view>
<ion-content>
<button class="button button-positive" ng-click="GoBack()">back</button>
<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>
</ion-tabs>
</ion-content>
</ion-view>
In Controller.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {})
.controller('TabCtrl',function($scope,$state){
$scope.GoBack = function(){$state.go('signin')};
})
.controller('signInCtrl',function($scope,$state){
$scope.signIn = function(user){$state.go('tab');}
})
.controller('ChatsCtrl', function($scope, Chats) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//
//$scope.$on('$ionicView.enter', function(e) {
//});
$scope.chats = Chats.all();
$scope.remove = function(chat) {
Chats.remove(chat);
};
})
.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
$scope.chat = Chats.get($stateParams.chatId);
})
.controller('AccountCtrl', function($scope) {
$scope.settings = {
enableFriends: true
};
});