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>';
}
};
}]
);
Related
enter image description hereI'm new to Ionic v-1. I tried implementing navigation using parent-child relationship. The parent state is "tab" while the active child state is "home". When I load the app, the home state contents do not load.
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state('tabs',{
url:"/tab",
abstract:true,
templateUrl:"templates/tabs.html"
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller: 'HomeTabCtrl'
}
}
})
.state('tabs.addFriend',{
url:"/addFriend",
views:{
'addFriend-tab':{
templateUrl:"templates/addFriend.html",
controller:'addFriendTabController'
}
}
})
.state('tabs.message',{
url:"/message",
views:{
'message-tab':{
templateUrl:"templates/message.html",
controller:'messageTabController'
}
}
})
.state('tabs.notifications',{
url:"/notifications",
views:{
'notifications-tab':{
templateUrl:"templates/notifications.html",
controller:'notificationsTabController'
}
}
})
.state('tabs.profile',{
url:"/profile",
views:{
'profile-tab':{
templateUrl:"templates/profile.html",
controller:'profileTabController'
}
}
});
$urlRouterProvider.otherwise("/tab/home");
})
.controller('HomeTabCtrl',function($scope){
console.log("Home tab");
})
.controller('addFriendTabController',function($scope){
console.log("addFriend tab");
})
.controller('messageTabController',function($scope){
console.log("message tab");
})
.controller('notificationsTabController',function($scope){
console.log("notifications tab");
})
.controller('profileTabController',function($scope){
console.log("profile tab");
});
<body ng-app="starter">
<ion-pane>
<div class="bar bar-positive item-input-inset headerBorder">
<label class="item-input-wrapper positive-bg" id="headerSearch">
<i class="icon ion-ios-search placeholder-icon searchIcon"></i>
<input type="search" placeholder="People, jobs, posts and more...">
</label>
<i class="icon ion-grid placeholder-icon searchIcon"></i>
</div>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<div class="tabs-stripped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs tab-top">
<a href="#/tab/home" class="tab-item active">
<i class="icon ion-home"></i>
</a>
<a href="#/tab/addFriend" class="tab-item">
<i class="icon ion-person-stalker"></i>
</a>
<a href="#/tab/message" class="tab-item">
<i class="icon ion-chatboxes"></i>
</a>
<a href="#/tab/notifications" class="tab-item">
<i class="icon ion-android-notifications"></i>
</a>
<a href="#/tab/profile" class="tab-item">
<i class="icon ion-person"></i>
</a>
</div>
</div>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-content class="has-tabs-top">
<div class="list card">
<div class="item item-thumbnail-left">
<img src="img/ionic.png">
<h2 class="listCss">Name</h2>
<h3>Followers</h3>
<p>Time</p>
</div>
<div class="item item-image">
<img src="img/NIKHIL.jpg">
</div>
Click here...
</div>
</ion-content>
</script>
<script id="templates/addFriend.html" type="text/ng-template">
</script>
<script id="templates/message.html" type="text/ng-template">
</script>
<script id="templates/notifications.html" type="text/ng-template">
</script>
<script id="templates/profile.html" type="text/ng-template">
</script>
</ion-pane>
</body>
if you want to use multiple named views you've to do like so for exmaple:
IN you HTML:
<ion-tabs class="tabs-icon-bottom tabs-color-light tabs-background-brown">
<ion-tab title="LAST SCAN" icon-off="fwd-last-scan-off" icon-on="fwd-last-scan-on" ui-sref="tab.lastscan">
<ion-nav-view name="tab-left"></ion-nav-view>
</ion-tab>
<ion-tab title="SCAN" icon-off="fwd-total-scan-off" icon-on="fwd-total-scan-on" ui-sref="tab.scan">
<ion-nav-view name="tab-center"></ion-nav-view>
</ion-tab>
<ion-tab title="MENU" icon-off="fwd-menu-off" icon-on="fwd-menu-on" ui-sref="tab.menu">
<ion-nav-view name="tab-right"></ion-nav-view>
</ion-tab>
<ion-tab title="EXTRA" icon-off="fwd-extra-off" icon-on="fwd-extra-on">
<ion-nav-view name="tab-off"></ion-nav-view>
</ion-tab>
</ion-tabs>
In your JS:
"use strict";
angular.module("gestione")
.config(["$stateProvider", "$urlRouterProvider", "$ionicConfigProvider", "$httpProvider", "$ionicNativeTransitionsProvider",
function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider, $ionicNativeTransitionsProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise("/tab/login");
$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.lastscan", {
url: "/lastscan",
cache: false,
nativeTransitions: {
"type": "filp",
"direction": "up"
},
views: {
'tab-left': {
templateUrl: "templates/tab-lastscan.html",
controller: "LastScanCtrl",
controllerAs: "lastscan"
}
}
})
.state("tab.menu", {
url: "/menu",
views: {
'tab-right': {
templateUrl: "templates/tab-menu.html",
controller: "MenuCtrl"
}
}
})
.state("tab.settings", {
url: "/settings",
cache: false,
views: {
'tab-off': {
templateUrl: "templates/settings.html",
controller: "SettingCtrl",
controllerAs: "settingCtrl"
}
}
})
;
}]);
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 have a problem with elements which has the ng-click and on-hold property. The problem is after on-hold event the ng-click event will be executed.
I think this is a common issue and I hope there is a solution for this.
Example:
index.html
<!DOCTYPE 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="lib/ionic/css/ionic.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<script src="js/ListCtrl.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
list.html
<ion-view view-title="Test">
<ion-content>
<ion-list show-delete="data.deleteMode">
<ion-item class="item-icon-right"
ng-repeat="item in items track by $index"
on-hold="data.deleteMode = ! data.deleteMode;"
ng-click="onClick(item)">
<ion-delete-button class="ion-trash-a" ng-click="onRemoveTaskBtn(task)"></ion-delete-button>
<p>{{item.text}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
app.js
angular.module('starter', [
'ionic',
'starter.list'
]).run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
});
}).config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/list');
});
ListCtrl.js
angular.module('starter.list', [])
.config(function ($stateProvider) {
$stateProvider.state('list', {
url: '/list',
templateUrl: 'js/list.html',
controller: 'ListCtrl'
});
}).controller('ListCtrl', [
'$scope',
function ($scope) {
$scope.data = {
deleteMode : false
};
$scope.items = [
{ text : 'Text 1' },
{ text : 'Text 2' },
{ text : 'Text 3' },
{ text : 'Text 4' },
{ text : 'Text 5' }
];
$scope.onClick = function(item) {
console.log('Clicked on item with text: ' + item.text);
}
}
]);
Just found exactly the same problem.
The solution is to use the on-tap instead of the ng-click.
For what I've seen, Ionic classifies its events on tap duration and stop propagating the event to its own listeners. Since ng-click is not a Ionic event, the event will be propagated.
In index.html I have included these javascripts:
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
And then I have:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
In app.js I have this:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$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();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view.splash', {
url: '/',
views: {
'view.splash': {
templateUrl: 'templates/view-splash.html',
controller: 'SplashCtrl'
}
}
})
.state('view.login', {
url: '/login',
views: {
'view.login': {
templateUrl: 'templates/view-login.html',
controller: 'LoginCtrl'
}
}
});
$urlRouterProvider.otherwise('/');
});
And finally in controllers.js I have:
angular.module('starter.controllers', [])
.controller('SplashCtrl', function($scope) {
$scope.appname = 'Wetters';
})
.controller('LoginCtrl', function($scope) {
$scope.whereami = 'on login';
})
Now, splash.html looks like this:
<ion-view view-title="Splash">
<ion-content>
This is splash
</ion-content>
</ion-view>
However, when I go to the app with browser, nothing is displayed. The page is empty.
I don't really understand whats wrong.
On ionic-page they don't write much about blank pages, focus is most on tab or menu apps.
What should you put inside index.html when you want to view multiple views, one at the time? I think the problem could be Im using:
<ion-nav-view></ion-nav-view>
Maybe I should put something else in index, but I really dont know what to put there.
I make a example for you:
Splash and Login example
If you need some help, just call!
Here is the code, if you cannot see in codepen:
HTML
<html ng-app="ionicApp">
<title>Side Menus</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-view></ion-nav-view>
<script id="templates/splash.html" type="text/ng-template">
<ion-view view-title="Splash" ng-controller="SplashCtrl">
<ion-content>
Splash
</ion-content>
</ion-view>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Login" ng-controller="LoginCtrl">
<ion-content>
Login
</ion-content>
</ion-view>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: "/",
templateUrl: "templates/splash.html"
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html"
});
$urlRouterProvider.otherwise("/");
})
.controller('SplashCtrl', function($scope, $state, $timeout) {
$timeout(function() {
$state.go('login');
}, 3000);
})
.controller('LoginCtrl', function($scope) {
});
I have an app, with a login view that the user needs to put your credentials to login.
This is my index.html:
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Services for Partners</title>
<link href="lib/ionic/css/ionicons.min.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's css and js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<link href="css/app.css" rel="stylesheet">
</head>
<body>
<div>
<ion-nav-view animation="slide-right-left" cache-view="false"></ion-nav-view>
</div>
<div class="bar bar-footer bar-dark">
<div>copyright</div>
</div>
</body>
</html>
In my index.html I am using the attribute cache-view="false".
After the user has logged in, he is redirect to home view.
Here is part of my home view:
<ion-view title="home" ng-controller="homeCtrl">
<div class="bar bar-header bar-dark">
<button class="button button-icon icon ion-gear-b"></button>
<button class="button button-icon icon ion-android-close" ng-click="closeApp()"></button>
</div>
<ion-content overflow-scroll="true" padding="true" scroll="true" class="has-header has-footer">
<!--<div class="spacer" style="width: 300px; height: 15px;"></div>-->
<div style="text-align:center;">
<img src="img/logo.png" class="logo-pequena">
</div>
<div>
In the home view, I have a button to log out, calling a method closeApp().
Here is my home controller, with my closeApp() method:
starter.controller('homeCtrl', ['$scope', '$state', '$ionicHistory', function($scope, $state, $ionicHistory) {
$scope.closeApp = function() {
//Remove todos as infos do usuário do localStorage
localStorage.clear();
$ionicHistory.clearHistory();
$ionicHistory.clearCache();
$ionicHistory.nextViewOptions({
historyRoot: true,
disableAnimate: true,
disableBack: true
});
$state.go('login');
}
}]);
Here we can see that I am using several commands to disable ionic history.
Below, is my services.js file:
var starter = angular.module('starter.services', []);
starter.run(function($ionicPlatform,$state,$ionicHistory){
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="home"){
navigator.app.exitApp();
}
else {
$ionicHistory.backHistory();
}
}, 100);
});
Here is my route.js file:
var starter = angular.module('starter.routes', []);
//Rotas do app
starter.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider //.state(...).state(...).state(...)
//Login
.state('login', {
url: '/login',
cache: false,
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
//Novo Usuário
.state('newuser', {
url: '/newuser',
cache: false,
templateUrl: 'templates/newuser.html',
controller: 'newUserCtrl'
})
//Esqueceu a senha
.state('forgotpwd', {
url: '/forgotpwd',
cache: false,
templateUrl: 'templates/forgotpwd.html',
controller: 'forgotPwdCtrl'
})
//Sobre
.state('about', {
url: '/about',
cache: false,
templateUrl: 'templates/about.html',
controller: 'aboutCtrl'
})
//Home
.state('home', {
url: '/home',
cache: false,
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
}]);
Here I have configured all routes to not caching any view.
After all those stuffs nothing happens. My app still permits me click on back button (not a hardware button, but the software button). I am previewing my app on "Ionic View App" running in my Sony Z3 smartphone.
So, the user can go back to home page, without logging in.
I want to exit app if the user clicks the back button at login view. But after all those configurations, I am still running with this trouble.
What I need to do ?
I have already updated cordova and ionic. Is it a bug or is it possible to resolve this issue ?
Thanks.
Why don't you try this
///code to skip login page if logged in
.run(function ($rootScope, $state) {
// Check login session
$rootScope.$on('$stateChangeStart', function (event, next, current) {
if(condition to check that you are logged in..maybe store token in localstorage and heck){
if (next.name === "login") {
event.preventDefault();
$state.go('home');
}
}
});
})
for back button action
.run(['$rootScope', '$ionicPlatform','$state', '$ionicHistory',
function($rootScope, $ionicPlatform,$state, $ionicHistory){
$ionicPlatform.registerBackButtonAction(function(e){
if ($state.current.name == 'home') {
ionic.Platform.exitApp();
}
else if ($ionicHistory.backView() ) {
$ionicHistory.goBack();
}
e.preventDefault();
return false;
},101);
}])